Forem: Jones Mbindyo

Accessibility in Android Jetpack Compose

Jones Mbindyo — Sun, 18 Jun 2023 13:35:51 +0000

Android Jetpack Compose is a modern Android UI toolkit that makes it easy to create beautiful, user-friendly apps. It also includes a number of features that make it easy to create accessible apps.

In this blog post, we'll explore the significance of accessibility in Android Jetpack Compose and uncover practical techniques to create apps that cater to users with diverse abilities. We will cover the following topics:

What is accessibility?
Why is accessibility important?
How does Android Jetpack Compose support accessibility?
Android Jetpack Compose Best practices for creating accessible apps.

By following these best practices, you can create accessible apps that everyone can use.

"Focusing on the needs of the individual is the foundation of accessibility in software." - Steve Ballmer

Let's get started!

What is accessibility?

The term accessibility in software is defined as the ability for everyone to use an app, regardless of their abilities. This includes people with disabilities such as visual impairments, hearing impairments, and mobility impairments.

Approaches and techniques to enhance the accessibility of an app:

Using large touch targets. Make sure that all on-screen elements that can be interacted with by users with limited dexterity are large enough to be easily tapped or clicked. The Android Design guidelines recommend that touch targets be at least 48dp wide and 48dp high.
Providing text descriptions for visual elements. Use descriptive text where possible to describe the app's content. This will help users who are blind or visually impaired understand what is happening on the screen.
Supporting keyboard navigation. Adding the capability for the app to be navigated using only the keyboard. This will make it easier for users who are unable to use a mouse or touchscreen to interact with your app.

@Composable
fun KeyboardNavigableScreen() {
    val focusManager = LocalFocusManager.current

    Column(Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center) {
        Text(
            text = "Keyboard Navigable Screen",
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
        Spacer(modifier = Modifier.height(16.dp))

        Button(
            onClick = { /* Handle button click */ },
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .focusable(),
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color.Gray
            ),
        ) {
            Text(text = "Click Me")
        }
    }

    // Enable keyboard navigation for the screen
    DisposableEffect(Unit) {
        focusManager.moveFocus(FocusDirection.First)
        onDispose { }
    }
}

In this example composable function, The LocalFocusManager is used to manage focus within the composables. By calling focusManager.moveFocus(FocusDirection.First), we ensure that the first focusable element in the screen receives focus when the screen is loaded. Inside the Column, we have a Text composable displaying a title and a Button composable. The Button is given the focusable modifier, which allows it to receive focus and be interacted with using the keyboard. By including the focusable modifier on interactive composables like buttons, checkboxes, or text fields, you enable keyboard users to navigate and interact with those elements using keyboard controls.

Providing audio output for visual elements. This will allow users who are blind or visually impaired to use your app by listening to descriptions of what is happening on the screen.

import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTag

@Composable
fun AudioOutputExample() {
    val context = LocalContext.current

    val audioDescriptionMap = remember {
        mapOf(
            "button" to stringResource(R.string.button_audio_description),
            "image" to stringResource(R.string.image_audio_description),
            // Add more mappings for other visual elements
        )
    }

    Box(
        Modifier.semantics { contentDescription = "button" }
            .testTag("button")
    ) {
        // Button content here
    }

    Image(
        painter = painterResource(R.drawable.my_image),
        contentDescription = "image",
        modifier = Modifier.semantics { contentDescription = "image" }
            .testTag("image")
    )

    // Function to play audio description for a given element
    fun playAudioDescription(elementTag: String) {
        val audioDescription = audioDescriptionMap[elementTag]
        audioDescription?.let {
            // Play audio description using Text-to-Speech or other audio playback mechanisms
        }
    }
}

AudioOutputExample composable function demonstrates providing audio output for visual elements and can be easily customized to add audio descriptions to other UI elements. The playAudioDescription() function can be used to play audio descriptions for any UI element and playing it using appropriate audio playback mechanisms like Text-to-Speech (TTS). Adapt this example to suit your app's structure and incorporate it throughout your app to provide audio output for various visual elements, ensuring a more inclusive experience for users who are blind or visually impaired.

Why is accessibility important?

Promoting Inclusivity: Android's accessibility features are designed to ensure that individuals with disabilities can use Android devices and apps. These features cater to diverse needs, such as visual impairment, hearing loss, motor disabilities, and cognitive disabilities.
Enhancing User Experience: Accessibility features not only benefit individuals with disabilities but also enhance the overall user experience for everyone. For instance, keyboard navigation proves useful when users are on the go or have their hands occupied. Screen readers provide valuable assistance for multitasking or gaining deeper insights into the on-screen content.
Driving Equity: Ensuring accessibility is not just a matter of convenience; it is a fundamental aspect of equity. Technology should be accessible to all individuals, regardless of their abilities.

How does Android Jetpack Compose support accessibility?

Semantics API: Jetpack Compose offers a powerful Semantics API that allows developers to provide meaningful information about the UI elements. Developers can specify properties like content description, role, state, and actions for each composible. This information is crucial for assistive technologies to understand and convey the UI elements to users with disabilities.
Dynamic Text Support: Jetpack Compose automatically responds to changes in system font size settings, ensuring that your app's UI scales accordingly. This feature benefits users with low vision or those who prefer larger text sizes for better readability.
Accessibility Testing Tools: Jetpack Compose includes a number of accessibility testing tools that can help you identify and fix accessibility issues in your app. These tools include the Accessibility Scanner, which can find accessibility issues in your app's layout, and the TalkBack simulator, which allows you to test your app using TalkBack, a screen reader for Android.
Developer Community: The Jetpack Compose community is committed to accessibility. There are a number of resources available to help you make your app more accessible, including tutorials, documentation, and sample code. You can also find a community of developers who are interested in accessibility on the Jetpack Compose subreddit and Discord server.

Android Jetpack Compose Best practices for creating accessible apps.

Get feedback from people with disabilities. One of the best ways to make your app more accessible is to get feedback from people with disabilities. You can do this by inviting people with disabilities to test your app and provide feedback, or by joining a community of developers who are interested in accessibility.
Use the Semantics composable to provide accessibility information about your UI elements.
Use descriptive text. When possible, use descriptive text to describe the content of your app. This will help users who are blind or visually impaired understand what is happening on the screen.
Use predictable layouts. Use predictable layouts in your app so that users can easily understand where elements are located and how to interact with them.
Avoid using animations and transitions that can be disorienting for users with disabilities. If you do use animations and transitions, make sure they are short and easy to follow.
Use consistent patterns throughout your app. This will make it easier for users to learn how to interact with your app. Document your app's accessibility features. This will help users who are new to your app find the features they need.

In conclusion, Android Jetpack Compose offers robust support for creating accessible apps, empowering developers to prioritize inclusivity and enhance the user experience for all. With its Semantics API, content descriptions, focus management, and integration with accessibility testing tools, Jetpack Compose streamlines the process of making apps accessible to users with disabilities. By following best practices such as providing meaningful content descriptions, ensuring keyboard accessibility, and supporting dynamic text sizes, developers can build apps that are navigable, understandable, and usable by everyone. Jetpack Compose is a powerful tool that enables the creation of inclusive and accessible Android apps, contributing to a more inclusive digital landscape.

For more alluring content about Android Jetpack Compose follow me on Twitter and LinkedIn so that you do not miss any updates about new articles.

Supercharge Your Android Apps with Effective Testing Strategies

Jones Mbindyo — Mon, 22 May 2023 19:52:10 +0000

Welcome to the world of Android testing! In our previous journey, we built a fully functional Reminder App using Jetpack Compose. However, to ensure the completeness and quality of our application, we need to delve into the realm of Android Tests. Here, we explore the compelling benefits of incorporating tests into your app development process. Let's discover how testing can enhance the reliability, stability, and overall user experience of your Android applications.

What we will learn.

Enhanced Reliability: We can easily validate the functionalities of our app's UI components, ensuring that they work as intended across various scenarios and user interactions. This will help us catch potential bugs, edge cases, and regressions early in the development cycle, resulting in a more reliable and robust application.
Improved Stability: Android tests will give us an edge during code changes and updates. They will help us identify any unintended side effects or compatibility issues that may arise when modifying existing code or introducing new features. This will help us maintain the stability of our app and mitigate the risk of introducing regressions.
Enhanced User Experience: Robust Android UI testing helps ensure that our app delivers a seamless and intuitive user experience. By simulating user interactions and validating UI behavior, we can identify and fix usability issues, layout problems, and inconsistencies in the user interface. This ultimately leads to a polished and user-friendly app, enhancing overall satisfaction and engagement.

Nice to have.

Completion of the previous Reminder App article is recommended as we will build upon the same app in this article.
Proficiency in building Android apps using Kotlin.
Familiarity with Jetpack Compose.
Basic understanding of Android tests is a plus.
Familiarity with Git.

Let's delve into the juicy part.

In an Android project tree, the (androidTest) and (test) directories serve different purposes:

(androidTest): This directory is specifically designated for instrumented tests, also known as Android tests or UI tests. It contains test code that interacts with the Android framework and runs on an Android device or emulator. Instrumented tests typically simulate user interactions with the app's UI, validate UI behavior, and test functionalities that require a running Android environment. These tests can access and manipulate the app's resources, activities, and components, providing a more comprehensive evaluation of the app's behavior on a device.
(test): The (test) directory is used for unit tests. These tests are written in isolation and do not require an Android device or emulator to execute. They focus on testing individual units of code, such as classes, functions, or methods, in isolation from the Android framework.

Unit tests primarily target business logic, algorithms, and non-UI components of the app. They are typically faster to execute compared to instrumented tests and provide a more targeted and efficient means of verifying the correctness of individual code units.

Unit Tests.

We will start by testing our DataSource object class which holds our list of plants. Below is our test class setup:

class DataSourceModelTest : TestCase() {

    @Before
    override fun setUp() {

    }
}

In the context of unit testing using a testing framework like JUnit, the @Before annotation is used to mark a method that should be executed before each individual test method in the test class.
To finalize our DataSourceModelTest test case, we will define our expected results and verify them using Assert.assertEquals(), which is a method used to compare two values and assert their equality.

import com.rocqjones.reminderapp.data.DataSource
import com.rocqjones.reminderapp.models.ComposeRandomItem
import junit.framework.TestCase
import org.junit.Assert
import org.junit.Before
import org.junit.Test

class DataSourceModelTest : TestCase() {

    private val actualPlants = DataSource.plants
    private lateinit var expectedPlant1 : ComposeRandomItem
    private lateinit var expectedPlant2 : ComposeRandomItem

    @Before
    override fun setUp() {
        expectedPlant1 = ComposeRandomItem(
            name = "Aloe Vera",
            schedule = "Monthly",
            type = "Succulent",
            description = "Aloe vera is a succulent plant species of the genus Aloe. It is cultivated for agricultural and medicinal uses."
        )
        expectedPlant2 = ComposeRandomItem(
            name = "Bamboo Palm",
            schedule = "Weekly",
            type = "Palm",
            description = "The Bamboo Palm, also known as the Reed Palm, is a medium-sized palm native to South America. It is a popular houseplant and can grow up to 12 feet tall."
        )
    }

    @Test
    fun testExpectedPlant1() {
        Assert.assertEquals(expectedPlant1, actualPlants[0])
    }

    @Test
    fun testExpectedPlant2() {
        Assert.assertEquals(expectedPlant2, actualPlants[1])
    }
}

After running the code locally here are the expected results.
Another way to verify the test cases of our class is through CI/CD.

To create a new branch for testing Android tests, use the command git checkout -b "testing/android-tests". Remember to commit and push your changes. As we have set branch rules, the Android CI will automatically run checks on the branch. If any issues arise, the branch won't be mergeable until we fix our errors. From our GitHub Actions you will find all failed and successful check.

Android Tests.

Tests for this section should go in the androidTest folder since they will be interacting with the Android framework.

We will start by writing Android tests for our MainActivity. To get started we will make several changes to our existing code.

For fun ListItems(//...) add testTag("list_items") to the modifier and also update your ListItems composable functions to assign unique test tags to each ComposeCard. Updated code should now look like.

@Composable
fun ListItems(
    modifier: Modifier = Modifier,
    data: List<ComposeRandomItem> = DataSource.plants.map { it }
) {
    LazyColumn(modifier = modifier.padding(vertical = 4.dp).testTag("list_items")) {
        itemsIndexed(items = data.toMutableList()) { index, n ->
            ComposeCard(
                name = n.name,
                type = n.type,
                description = n.description,
                modifier = Modifier.testTag("composeCard_$index")
            )
        }
    }
}

Next we modify our ComposeCard and remove the redundant opt-in annotation @OptIn(ExperimentalMaterial3Api::class).

@Composable
fun ComposeCard(name: String, type: String, description: String, modifier: Modifier) {
    val dialogState = remember { mutableStateOf(false) }

    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.primary
        ),
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp).clickable { 
            dialogState.value = true
        }
    ) {
        CardContent(name, type, description)
    }

    if (dialogState.value) {
        ReminderDialog(name = name, onDismiss = { dialogState.value = false })
    }
}

We are now set to write our Android UI tests, we first set up our MainActivityTest class for UI testing using Jetpack Compose. It initializes the test rule, creates a setup method to prepare the test environment, and specifies the content of the ComposeTestRule to the MainActivity composable function.

@RunWith(AndroidJUnit4::class)
class MainActivityTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Before
    fun setUp() {
        // Set up your Compose UI here
        composeTestRule.setContent {
            ReminderAppTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ListItems()
                }
            }
        }
    }
}

Add the following dependencies.

testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.5'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"

debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
implementation 'androidx.test.uiautomator:uiautomator:2.2.0'

In this MainActivityTest class, we use the @RunWith annotation to indicate that we are using the AndroidJUnit4 test runner. The composeTestRule rule is created using createComposeRule() and allows us to write UI tests for Compose.
The setUp method is annotated with @Before and is run before each test case.

import android.app.NotificationManager
import android.content.Context
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import androidx.compose.ui.test.*
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.test.espresso.matcher.ViewMatchers.*
import androidx.test.ext.junit.runners.AndroidJUnit4
import androidx.test.platform.app.InstrumentationRegistry
import androidx.test.uiautomator.By
import androidx.test.uiautomator.UiDevice
import androidx.test.uiautomator.Until
import com.rocqjones.reminderapp.ui.theme.ReminderAppTheme
import org.junit.Assert
import org.junit.Before
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith
import java.util.concurrent.TimeUnit


@RunWith(AndroidJUnit4::class)
class MainActivityTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Before
    fun setUp() {
        // Set up your Compose UI here
        composeTestRule.setContent {
            ReminderAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ListItems()
                }
            }
        }
    }

    @Test
    fun testComposableList() {
        composeTestRule.onNodeWithTag("list_items")
    }

    @Test
    fun testComposableCard() {
        composeTestRule.onNodeWithTag("composeCard_0")
    }

    @Test
    fun testOpenReminderDialog() {
        composeTestRule.onNodeWithTag(
            "list_items"
        ).assertExists().onChildren()[0].assertExists().performClick()

        // Verify that the ReminderDialog is displayed
        composeTestRule.onNodeWithTag("reminderDialog").assertExists()

        val schedules = listOf(
            "5 seconds" to 5000L,
            "8 minutes" to 8 * 60 * 1000L,
            "1 day" to 24 * 60 * 60 * 1000L,
            "1 week" to 7 * 24 * 60 * 60 * 1000L
        )

        composeTestRule.onNodeWithTag("reminderDialog")
            .assertExists()

        for ((scheduleText, _) in schedules) {
            composeTestRule.onNodeWithText(scheduleText)
                .assertExists()
        }

        composeTestRule.onNodeWithText("5 seconds").assertExists().performClick()

        // Wait for 5 seconds
        Thread.sleep(TimeUnit.SECONDS.toMillis(5))

        // Check if the notification appears
        val device = UiDevice.getInstance(InstrumentationRegistry.getInstrumentation())
        val notificationExists = device.wait(
            Until.hasObject(By.pkg("com.rocqjones.reminderapp").depth(0)),
            TimeUnit.SECONDS.toMillis(10)
        )
        Assert.assertTrue("Notification should appear", notificationExists != null)

        // Click the notification
        val notification = device.findObject(By.text("Reminder App."))
        notification?.click()

        // Verify that the MainActivity is launched
        val instrumentation = InstrumentationRegistry.getInstrumentation()
        instrumentation.waitForIdleSync()
        val currentActivity = instrumentation.targetContext.packageManager.getLaunchIntentForPackage(
            instrumentation.targetContext.packageName
        )?.component?.className
        Assert.assertEquals(
            "MainActivity should be launched",
            MainActivity::class.java.name,
            currentActivity
        )

        // Clear the notification
        val notificationManager = instrumentation.targetContext.getSystemService(
            Context.NOTIFICATION_SERVICE
        ) as NotificationManager
        notificationManager.cancel(17)
    }
}

The testComposableList and testComposableCard test cases serve as basic checks to ensure that the UI elements are present.
The testOpenReminderDialog test case is the main test case that we simulates opening the ReminderDialog and performing various assertions. It clicks on a ComposeCard to open the dialog, verifies the presence of the dialog, interacts with its options, waits for the notification to appear, checks if the notification is displayed, clicks the notification to launch the MainActivity, verifies that the MainActivity is launched, and finally clears the notification from the status bar.
UiDevice.getInstance(InstrumentationRegistry.getInstrumentation()) is used to obtain an instance of the UiDevice class. It allows us to simulate touch inputs and in this case accessing device information. Once we have the UiDevice instance, we can use its methods to interact with the scheduled notification.
Below is a screenshot of our Android UI test cases.

Workflows References.

Reminder App GitHub Actions workflows.

Conclusion.

By leveraging tests in your Android app development, you can achieve a higher level of reliability, stability, and user experience, ensuring that your app meets the expectations of your users and stands out in the competitive landscape. Feel free to customize and expand upon this code as needed.

Resources.

Testing documentation.

For more alluring content about Android Jetpack Compose follow me on Twitter and LinkedIn so that you do not miss any updates about new articles.

Let's create notification reminder app in Jetpack Compose.

Jones Mbindyo — Sun, 14 May 2023 18:52:54 +0000

Get yourself a cup of coffee before we dive into this interesting tutorial.

@Composable
fun Coffee(enough: Int, caffeine: Int) {
    when (enough) {
        in (caffeine + 1) downTo caffeine -> {
            drinkCoffee()
        }
        else -> {
            drinkCoffee()
        }
    }
}

What we will cover.

Applying CI/CD Using GitHub Actions for Android.
Creating notification reminders using compose.
Schedule notification using Work Manager.

Nice to have.

Prior knowledge coding in Kotlin.
Familiarity with Android Studio tools & usage.
Skills in Version Control (Git).
Basic understanding of Jetpack Compose.
Scheduling tasks with WorkManager

Step 1: Project setup.

Open your Android Studio and tap Create Project which will take you to Templates wizard.

In my case I am using...

Android Studio Electric Eel | 2022.1.1 Patch 2
Current Desktop: ubuntu:GNOME

We will use Empty Compose Activity (Material3) template which will generate for us a starter project.
Click Next and in this stage we will give our project a nice name. In this app we will set our Minimum SDK to API level 23 which is equivalent to Android Version 6.0(Marshmallow). If you want to learn more about which Minimum API Level to choose depending on your app needs you can tap on Help me choose link below the Minimum SDK drop-down.
Once you are done you can click Finish and your project will build and generate our starter code.

If you run into trouble with Gradle build, you can access File > settings of your project and manually update Gradle JDK version by pointing to the right local directory (I'm using version 11.0.15 at the time of this tutorial)

Step 2: Setup GitHub Repository.

If you're following this tutorial it's nice to have a GitHub account to complete this section. If you don't have one, you can do that here.

To easily complete this section you can connect your Android Studio to your GitHub account from File > Settings > Version Control > GitHub. If you're already connected we can share our project by accessing VSC menu on the top-bar menu and click Share Project on GitHub. Follow the dialog prompts, add, commit, and push your initial code (Android Studio will automatically create the repository for you).

Step 3: Configuring CI/CD Using GitHub Actions.

Go to your GitHub repo created above and click Actions.
Search for Android CI and from results as shown below click Configure. Follow prompts and either commit directly to your main branch or checkout to a new branch which is a better practice. Do not edit android.yml file generated (For now we will go with the default generated configurations).

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline.

Setup Branch protection rules
From your repo settings got to Branches and create some rules. For Branch name pattern write the name of your default branch and check the following rules:

Require a pull request before merging.
Require status checks to pass before merging.
Require branches to be up to date before merging.
Do not allow bypassing the above settings.

Example output.

Step 4: Let's get coding.

We will start by creating some animated collapsible cards with some random data. Since this is not the main area of focus we will keep it simple.
From our generated code we replace the Greeting("Android") method inside onCreate with ListItems(). Your onCreate should now look like:

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ReminderAppTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ListItems()
                }
            }
        }
    }

In our ListItems() function we will create a list of 30 cards. To optimize our program's performance, we will use a lazy list instead of a for-loop. Lazy lists allow us to efficiently process large datasets by evaluating only the elements that are needed, on demand. This reduces memory consumption and speeds up our program's execution time, especially when working with large datasets.

@Composable
fun ListItems(
    modifier: Modifier = Modifier,
    names: List<String> = List(30) { "$it" }
) {
    LazyColumn(modifier = modifier.padding(vertical = 4.dp)) {
        items(items = names) { n ->
            ComposeCard(name = n)
        }
    }
}

Modularity and Reusability: We will break down the program's logic into different functions to improve the code's readability, maintainability, ease testing, and performance on multi-core processors.

ComposeCard() will define our Composable card and it's content.

@Composable
fun ComposeCard(name: String) {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.primary
        ),
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        CardContent(name)
    }
}

Since we want to handle animations within our card, we will create other functions (CardContent()) that handle the card content and compose its state. Additionally, by isolating the animation logic in its own function, we can optimize its performance and ensure smooth, responsive animations.

@Composable
fun CardContent(name: String) {
    val expanded = remember { mutableStateOf(false) }
}

We use the remember function in Android Jetpack Compose to store and manage state within a composable function. This function creates a MutableState object instance, which we can use to store and update state values. By initializing the expanded variable using remember, we can update its value within our composable function's scope, and any changes will trigger recompositions of the function.

Let's add a spring-based animation to our card make it feel more natural and engaging when clicked.

Row(modifier = Modifier
       .padding(12.dp)
       .animateContentSize(
            animationSpec = spring(
               dampingRatio = Spring.DampingRatioMediumBouncy,
               stiffness = Spring.StiffnessLow
            )
       )
    ) { //... }

To add content to our animated card, we can include a single column layout and an icon button with an onClick listener that handles the expanded state, as explained above.

Column(modifier = Modifier.weight(1f).padding(12.dp)) {
    Text(text = "Hello")
    Text(text = "$name.",
        style = MaterialTheme.typography.headlineMedium.copy(
            fontWeight = FontWeight.ExtraBold
        )
    )

    if (expanded.value) {
        // Some random text here.
        Text(
            text = ("Jetpack Compose is a modern UI toolkit designed to simplify UI development.").repeat(2)
        )
    }
}

IconButton(onClick = { expanded.value = !expanded.value }) {
    Icon(
        painter = if (expanded.value) painterResource(id = R.drawable.baseline_expand_less_24) else painterResource(id = R.drawable.baseline_expand_more_24),
        contentDescription = if (expanded.value) {
            stringResource(R.string.show_less)
        } else {
            stringResource(R.string.show_more)
        }
    )
}

At this point we already have a working collapsible list of items. We can override a dark theme on our app as follows:

@Preview(
    showBackground = true,
    widthDp = 320,
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    name = "DefaultPreviewDark"
)
@Preview(showBackground = true, widthDp = 320, heightDp = 320)
@Composable
fun DefaultPreview() {
    ReminderAppTheme {
        ListItems()
    }
}

Notifications in Compose using Work Manager.

In order to achieve our goal, we'll be utilizing Android Jetpack WorkManager. This powerful framework handles various types of persistent work, such as Immediate, Long Running, and Deferrable tasks. For the purposes of this post, we'll be focusing on Immediate tasks.

Using WorkManager offers numerous benefits to developers. Firstly, it ensures that background tasks are reliably executed, even if the app is closed or the device is rebooted. Secondly, it provides a flexible API for scheduling work that can be tailored to specific app requirements. Thirdly, it optimizes battery usage by intelligently deferring work until system resources become available, ensuring that the app does not consume excessive power. Furthermore, it supports chaining of tasks, which allows for the creation of complex workflows with minimal overhead. Lastly, it simplifies the management of scheduled tasks by providing a single, centralized location for monitoring and controlling their execution.
Modify our build.gradle(:app) dependencies tree to have the following.

dependencies {

    implementation 'androidx.core:core-ktx:1.10.1'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
    implementation 'androidx.activity:activity-compose:1.7.1'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.compose.material3:material3:1.0.1'

    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"

    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

    // work manager
    implementation("androidx.work:work-runtime-ktx:$work_version")

    // coroutines
    api "org.jetbrains.kotlinx:kotlinx-coroutines-core:$rootProject.coroutines"
    api "org.jetbrains.kotlinx:kotlinx-coroutines-android:$rootProject.coroutines"

    // Lifecycle components
    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$rootProject.lifecycleVersion"
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:$rootProject.lifecycleVersion"
    // Lifecycle utilities for Compose
    implementation "androidx.lifecycle:lifecycle-runtime-compose:$rootProject.lifecycleVersion"

    implementation 'androidx.fragment:fragment-ktx:1.5.7'

    implementation 'androidx.compose.material:material:1.4.3'
}

For plugins have:

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
    id 'kotlin-kapt'
}

Modify our build.gradle(Project:) as follows

buildscript {
    ext {
        compose_version = '1.4.3'
        work_version = "2.8.1"
        lifecycleVersion = '2.6.1'
        coroutines = '1.6.4'
    }
}
// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.4.2' apply false
    id 'com.android.library' version '7.4.2' apply false
    id 'org.jetbrains.kotlin.android' version '1.8.20' apply false
}

If you're experiencing build issues related to compatibility issues, check out this Compose to Kotlin Compatibility documentation and Compose Compiler Stable Version. At the time of writing this post the above should work.

To schedule reminders we're going to make some changes to our MainActivity.kt initially we we're using random data for our collapsible list. We're going to replace the list of 30 items we generate with real data from our local data sources. Create an object DataSource { } which holds listOf( ComposeRandomItem(//...)).
The ComposeRandomItem() data class structure.

data class ComposeRandomItem(
    val name: String,
    val schedule: String,
    val type: String,
    val description: String
)

For this section, I prepared the DataSource which can be found here

Replace names list from fun ListItems with data: List<ComposeRandomItem> = DataSource.plants.map { it }. The updated function should be as follows.

@Composable
fun ListItems(
    modifier: Modifier = Modifier,
    data: List<ComposeRandomItem> = DataSource.plants.map { it }
) {
    LazyColumn(modifier = modifier.padding(vertical = 4.dp)) {
        items(items = data.toMutableList()) { n ->
            ComposeCard(
                name = n.name,
                type = n.type,
                description = n.description
            )
        }
    }
}

Let's modify our ComposeCard parameters

@Composable
fun ComposeCard(name: String, type: String, description: String) { }

Custom reminder dialog.

Our custom ReminderDialog composable function takes two parameters: name, a string that represents the reminder's name, and onDismiss, a function that's invoked when the dialog is dismissed.

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ReminderDialog(name: String, onDismiss: () -> Unit) {

    val schedules = listOf(
        R.string.schedule_5_seconds to 5000L,
        R.string.schedule_8_minutes to 8 * 60 * 1000L,
        R.string.schedule_1_day to 24 * 60 * 60 * 1000L,
        R.string.schedule_1_week to 7 * 24 * 60 * 60 * 1000L
    )

    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(
            dismissOnBackPress = true,
            dismissOnClickOutside = true
        )
    ) {
        Surface(
            shape = RoundedCornerShape(16.dp),
            modifier = Modifier.padding(16.dp)
        ) {
            Column(modifier = Modifier.fillMaxWidth()) {
                Text(
                    text = stringResource(R.string.title_reminder),
                    fontWeight = FontWeight.Bold,
                    fontSize = 20.sp,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.padding(vertical = 16.dp).fillMaxWidth()
                )

                schedules.forEach { (scheduleTextId, delayMillis) ->
                    ListItem(
                        text = { Text(text = stringResource(scheduleTextId)) },
                        modifier = Modifier.clickable {
                            // event
                            onDismiss()
                        }
                    )
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterialApi::class) is an annotation used in Kotlin to indicate that the annotated element is using experimental Material Design components or APIs that are subject to change in future versions.
The string resources used.

<string name="title_reminder">Remind me in…</string>
<string name="channel_name">reminder_channel</string>
<string name="channel_description">reminder_reminder</string>
<string name="schedule_5_seconds">5 seconds</string>
<string name="schedule_8_minutes">8 minutes</string>
<string name="schedule_1_day">1 day</string>
<string name="schedule_1_week">1 week</string>

To demonstrate the use of state in managing dynamic UI elements within our composable function, we will modify our ComposeCard() function as follows:

@Composable
fun ComposeCard(name: String, type: String, description: String) {
    val dialogState = remember { mutableStateOf(false) }

    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.primary
        ),
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp),
        onClick = { dialogState.value = true }
    ) {
        CardContent(name, type, description)
    }

    if (dialogState.value) {
        ReminderDialog(name = name, onDismiss = { dialogState.value = false })
    }
}

In this function, dialogState is a piece of state that is used to track whether the ReminderDialog component should be displayed or not. The state is updated in response to a click event on the Card component, and the dialog is conditionally displayed based on the state of dialogState.

Scheduling reminders using `WorkManager`.

By using the Android Jetpack WorkManager API, we can schedule a one-time work request to display a reminder. This is achieved through the ReminderViewModel class which extends the ViewModel class and provides a function scheduleReminder(). This function takes in a duration, unit (TimeUnit), and plant name as input parameters. It will create a OneTimeWorkRequest with the ReminderWorker class as the work to be done, sets the input data for the work request using the plant name and description obtained from a list of items, and schedules the work request using the WorkManager instance. The ReminderViewModelFactory is a factory class that creates instances of the ReminderViewModel class. This approach allows for separation of concerns, making it easier to manage dependencies and testability in the application.

class ReminderViewModel(application: Application): ViewModel() {

    private val itemsList = DataSource.plants
    private val workManager = WorkManager.getInstance(application)

    internal fun scheduleReminder(
        duration: Long,
        unit: TimeUnit,
        plantName: String
    ) {
        // create a Data instance with the plantName passed to it
        val myWorkRequestBuilder = OneTimeWorkRequestBuilder<ReminderWorker>()
        for (items in itemsList.toMutableList()) {
            if (items.name == plantName) {
                myWorkRequestBuilder.setInputData(
                    workDataOf(
                        "NAME" to items.name,
                        "MESSAGE" to items.description
                    )
                )
            }
        }
        myWorkRequestBuilder.setInitialDelay(duration, unit)
        workManager.enqueue(myWorkRequestBuilder.build())
    }
}

class ReminderViewModelFactory(private val application: Application) : ViewModelProvider.Factory {
    override fun <T : ViewModel> create(modelClass: Class<T>): T {
        return if (modelClass.isAssignableFrom(ReminderViewModel::class.java)) {
            @Suppress("UNCHECKED_CAST")
            ReminderViewModel(application) as T
        } else {
            throw IllegalArgumentException("Unknown ViewModel class")
        }
    }
}

Before creating our ReminderWorker, we will create our BaseApplication class which is a custom implementation of the Application class that we will used to create and register a notification channel for displaying reminders. The onCreate() method is overridden to create a notification channel with the specified name, description, and importance level. The NotificationManager.IMPORTANCE_DEFAULT indicates that the notifications from this channel will have medium importance and will make a sound. The channel is registered with the system by calling the createNotificationChannel() method of the NotificationManager class. The CHANNEL_ID constant is used to uniquely identify the notification channel and is made available through the companion object of the class.

class BaseApplication : Application() {

    override fun onCreate() {
        super.onCreate()
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            val name = getString(R.string.channel_name)
            val descriptionText = getString(R.string.channel_description)
            val importance = NotificationManager.IMPORTANCE_DEFAULT
            val channel = NotificationChannel(CHANNEL_ID, name, importance).apply {
                description = descriptionText
            }
            // Register the channel with the system
            val notificationManager: NotificationManager =
                getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
            notificationManager.createNotificationChannel(channel)
        }
    }

    companion object {
        const val CHANNEL_ID = "reminder_id"
    }
}

Manifest.

<uses-permission android:name="android.permission.ACCESS_NOTIFICATION_POLICY" />

<application
        android:name=".base.BaseApplication">
</application>

We will build our ReminderWorker class, which extends the Worker class and overrides the doWork method responsible for creating and displaying notifications to the user. The notification content will include the name of the plant and a reminder message. It will also set up a pending intent to launch the app's MainActivity when the user clicks on the notification.
The BaseApplication.CHANNEL_ID constant is used to identify the notification channel, and the notificationId field will assign a unique ID number to each notification. Finally, the notification will be displayed to the user by calling the notify method from NotificationManagerCompat.

class ReminderWorker(
    context: Context,
    workerParams: WorkerParameters
) : Worker(context, workerParams) {

    // Arbitrary id number
    private val notificationId = 17

    @SuppressLint("MissingPermission")
    override fun doWork(): Result {
        val intent = Intent(applicationContext, MainActivity::class.java).apply {
            flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
        }

        val pendingIntent: PendingIntent = PendingIntent.getActivity(
            applicationContext, 0, intent, PendingIntent.FLAG_IMMUTABLE
        )

        val plantName = inputData.getString(nameKey)

        val body = "Hello, It's time to water your $plantName and spray pesticides to avoid powdery mildew."
        val builder = NotificationCompat.Builder(applicationContext, BaseApplication.CHANNEL_ID)
            .setSmallIcon(R.drawable.ic_android_black_24dp)
            .setContentTitle("Reminder App.")
            .setContentText(body)
            .setStyle(NotificationCompat.BigTextStyle().bigText(body))
            .setPriority(NotificationCompat.PRIORITY_HIGH)
            .setContentIntent(pendingIntent)
            .setAutoCancel(true)

        with(NotificationManagerCompat.from(applicationContext)) {
            notify(notificationId, builder.build())
        }

        return Result.success()
    }

    companion object {
        const val nameKey = "NAME"
    }
}

To link our ReminderViewModel with our ReminderDialog, we use the viewModel function to create an instance of ReminderViewModel. We also pass an instance of ReminderViewModelFactory to create the view model. Then, we set up a clickable modifier on the composable element, which calls the scheduleReminder method on the viewModel instance when the user clicks on a specific item in the dialog. The scheduleReminder method takes the delay time, time unit, and name of the plant as its parameters, and uses these to create a work request to send a notification to the system. Finally, the onDismiss callback is called to dismiss the dialog.

val viewModel: ReminderViewModel = viewModel(
        factory = ReminderViewModelFactory(
            LocalContext.current.applicationContext as Application
        )
    )
//... Our previous code...

modifier = Modifier.clickable {
    viewModel.scheduleReminder(delayMillis, TimeUnit.MILLISECONDS, name)
    onDismiss()
}

Conclusion

In this blog, we have discussed the process of creating a reminder app in Android using Kotlin and Jetpack. We started by setting up the basic UI of the app and then implemented the ViewModel and Repository classes to manage the app's data.

Next, we explored the use of WorkManager to schedule notifications for each plant in the app, and created a ReminderWorker class to handle the creation and display of notifications.

Throughout this process, we emphasized the importance of writing clean and maintainable code, and used best practices such as using dependency injection and following the single responsibility principle.

By following these steps, we were able to create a functional reminder app that can help users keep track of their plant care routines.

References.

The complete source code of this series is located in this GitHub Repository. You can fork to have your copy and create some more cooler features based on what we have learned.
Jetpack Compose documentation.
WorkManager.
Notifications.
ViewModel overview.
Compose Material 3.

Hardcore on self-realization and self-actualization.

Jones Mbindyo — Tue, 04 Feb 2020 22:14:58 +0000

Hello fellas, this week I will briefly touch on the chemistry between self-realization and self-actualization.

I've been hearing many talks on how to become intelligent, being a better coder, being the smartest in your class, or being the next Guido Van Rossum and for someone to become successful in their tasks, smart, or an innovator they starts at a certain individual level with or without attaining skills required. These levels include; self-realization, and self-actualization in alignment with someone's passion and goals.

Self-realization.

Self-realization simply means fulfillment of one's own potential. Many will agree with me that this is the hardest thing to understand about one's self because it is highly provoked by influence from others e.g. mentors, friends, teacher/lectures etc., imitating others, and it's accompanied by confusion. To be in a self-realization zone one has to exploit 6 keys to unlock the door to one's potential which are, creativity, morality, spontaneity, acceptance, experience of purpose, and inner potential.

Creativity is connected to self-realization through personal career development that leads to decision making on the direction to take in respect to person's interests.
Morality creates someone's reputation according to the activities one engage in, how they treat themselves, and others.
Thirdly spontaneity comes to play in self-realization when someone is open to self and world-view with unconventional aspect of behavior.
Acceptance of one's self is key because it is when you know your weaknesses and strengths and at the same time you subject to your capabilities and general worth despite deficiencies and regardless of personal choices.
Experience of purpose comes in when you ask yourself the question, who am I? This takes you on a journey to reflect on discovering your purpose and by so it is experiencing the fullness of who you are.
The final key would be inner potential and ideally it is how one maximizes opportunities for personal growth and this is the call when you feel you have the right motivation and consistency to work towards your goal. These 6 keys helps you to prospect on self-improvement because I believe when someone's harness their power to their potential they make something great for themselves.

"Every choice before you represents the universe inviting you to remember who you are and what you want." - Alan Cohen

Self-actualization.

Acting on one's potential is what we call self-actualization and first this requires a desire of doing something which comes with a drive, next you have to be willing to push yourself beyond your limits because it builds you and it opens your mind to see beyond your abilities. Thirdly, you have to work hard and avoid being the kind of a person that talks too much than they can do because no one records what you claim you know but show someone something visible that you've worked on and trust me they will give you attention. Finally accept transformation in order to become your own potential, this is driven by strategies you take in order to undergo a change in what you do and your abilities.
At this point since you have the desire, the drive and you have accepted the transformation then consistency will come to play. Don't stop grinding when things get exciting because after every win it's a new beginning to make another plus. I've ever been a victim of this because we prone of getting comfortable when things start playing to our will and at this point it's where consistency dies. I would suggest you find something that will be reminding you to have your focus on check, and that will be finding a challenge that will keep you on toes even if it's having someone you look up to, and your loop will keep running. To me that's consistency.

“Success isn’t always about greatness. It’s about consistency. Consistent hard work leads to success. Greatness will come.” - Dwayne Johnson

Key android developer best practices to keep in mind.

Jones Mbindyo — Wed, 15 Jan 2020 10:43:00 +0000

Hello Coders!

So, today I'll be talking about best practices to adopt as an android developer. Keep in mind that it's all about simplicity, readable code, and most important other developers might end up maintaining your code. I've summarized some of the key practices as follows, I thought it would be helpful.

1. Project structure.

When starting a new project, Android Studio automatically creates some of these files for you, as shown and populates them based on realistic defaults.

2. Keep your colors.xml short and clean, just define the palette.

There should be nothing in your colors.xml other than a mapping color name to an RGBA value. This helps to avoid repetition of values thus making it easy to change or refactor colors, and also will make it explicit how many different colors are being used. Normally for a aesthetic UI, it is important to reduce the variety of colors being used.

DON'T

<resources>
    <color name="button_foreground">#FFFFFF</color>
    <color name="button_background">#2A91BD</color>
</resources>

DO:

<resources>
    <!-- grayscale -->
    <color name="white">#FFFFFF</color>

    <!-- basic colors -->
    <color name="blue">#2A91BD</color>
</resources>

3. Also keep dimens.xml clean, define generic constants.

You should define a "palette" of typical spacing and font sizes, for basically the same purposes as for colors. A good example of a dimens file:

<resources>

    <!-- font sizes -->
    <dimen name="font_larger">22sp</dimen>
    <dimen name="font_large">18sp</dimen>

    <!-- typical spacing between two views -->
    <dimen name="spacing_huge">40dp</dimen>
    <dimen name="spacing_large">24dp</dimen>

    <!-- typical sizes of views -->
    <dimen name="button_height_tall">60dp</dimen>
    <dimen name="button_height_normal">40dp</dimen>

</resources>

You should use the spacing_**** dimensions for layouting, in margins and padding, instead of hard-coded values, much like strings are normally treated. This will give a consistent look-and-feel, while making it easier to organize and change styles and layouts.

4. Do not make a deep hierarchy of ViewGroups.

Sometimes you might be tempted to just add yet another LinearLayout, to be able to accomplish an arrangement of views. Take a look at this case:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <RelativeLayout
        ...
        >

        <LinearLayout
            ...
            >

            <LinearLayout
                ...
                >

                <LinearLayout
                    ...
                    >
                </LinearLayout>

            </LinearLayout>

        </LinearLayout>

    </RelativeLayout>

</LinearLayout>

A couple of problems may occur. You might experience performance problems, because there is a complex UI tree that the processor needs to handle. Another more serious issue is a possibility of errors because of too many nested layouts.

Therefore, try to keep your views hierarchy as flat as possible: learn how to use ConstraintLayout, how to optimize your layouts and to use the tag.

5. User Experience.

It's the context of satisfaction of a user’s interaction with your app. Some notes to improving the experience of your apps:

1. Excellent UI.

To have a a excellent feel and experience of an app starts with a good design that matches the Google material design principles.
- Consistency in color combinations. For this case use Material Design Color Tool
- Use of proper icons to portray functionality. Use Material Design Tool
2. Configuration Change Handling.

This is the most annoying scenarios android developers face. When you rotate your device and the screen changes orientation, Android usually destroys your application’s existing Activities and Fragments and recreates them. This is done so that the application can reload resources based on the new configuration and this is basically like starting afresh. Improper handling of this scenario is an instance of bad user experience. Below are some solutions to this:
- With the ViewModel as part of the architecture components released by Google. Below, is an image that shows the life-cycle of an Activity as compared to that of a ViewModel.
- consider is persisting your data in the database after it has been fetched from a remote source so that when the phone is rotated, data can quickly be gotten from the database instead of having to fetch again.

6. Compatibility.

There are two types of compatibility: device compatibility and app compatibility.

Device compatibility. Because Android is an open source project, any hardware manufacturer can build a device that runs the Android operating system.
App compatibility. Because Android runs on a wide range of device configurations, some features are not available on all devices.

7. Understand build process.

The build process involves tools and processes that convert your project into an Android Application Package (APK) so it's important to understand.

The compilers convert your source code into DEX (Dalvik Executable) files, which include the bytecode that runs on Android devices, and everything else into compiled resources.
The APK Packager combines the DEX files and compiled resources into a single APK. Before your app can be installed and deployed onto an Android device, however, the APK must be signed.
Before generating your final APK, the packager uses the zipalign tool to optimize your app to use less memory when running on a device.

8. Security & Privacy.

Security is one of the most neglected areas when building apps because it is large in scope and it's almost impossible to perfect. Google has released features that significantly reduce the frequency of security issues. Some of which include:

Google play protect: this is built into every device with Google Play to automatically take action to keep data and device safe.
Encryption from Android M to protect user data.
SafetyNet attestation: evaluates if an Android device is a certified secure .
reCAPTCHA for Android: This ensures that an app is not automated i.e handled by a robot.

However, notice that some security vulnerabilities are out of their control like:

Communicate Securely with a Server.

At some point our apps needs to communicate with an APIs and back-end services to fetch data or send data which should be done in a securely. On that note, Network security configuration was introduced to ensure adequate validation of the servers our apps intend to communicate with.
If you are building a social app or anything related that requires authentication and user management, you could use the service provided to us by Auth0 to manage our identities while you focus on other functionalities which uses a secure protocol.

Below is a generic workflow of the protocol.

9. Keep the Long Running Tasks Away.

Use a background thread for all long running tasks. Doing this counts for a better performance and better user experience in the long run.
Android Studio provides us with the profiler to check the performance of our app while still in development. The profiler helps us gauge the device’s resource usage of our app during execution. It is usually located at the bottom of your screen and only shows up when the app is running.