DEV Community: Piotr Chmielowski

My approach to solve the problem of first and last item padding with Jetpack Compose

Piotr Chmielowski — Sun, 06 Feb 2022 17:43:15 +0000

Edit: sorry for stretched screenshots. Please click on each to see it with correct ratio.

In this post I'll share my approach to solve the problem I encounter quite often: a list of elements with equal spacing between items themselves as well as parent boundaries.

Here is an example of the view we are going to build:

To better visualize what I mean by equal spacing, I've highlighted these spaces:

First I'd like to explain why the simplest approach will not work. Here is the code of something I'd consider the simplest approach:



@Composable
fun ItemList() {
    Column(modifier = Modifier.padding(vertical = 8.dp)) {
        Item("Item 1")
        Item("Item 2")
        Item("Item 3")
        Item("Item 4")
    }
}

@Composable
fun Item(text: String) {
    Text(
        text = text,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp, vertical = 8.dp)
    )
}

As you can see, Item has horizontal padding of 16.dp. Vertical padding of Item and Column is 8.dp. Vertical paddings are added so, as an result we get 16.dp space everywhere.

This approach, however, has one big problem: doesn't look pretty when clickable. Let's modify Item function:



@Composable
fun Item(text: String) {
    Text(
        text = text,
        modifier = Modifier
            .fillMaxWidth()
            .clickable {  } // Add this line
            .padding(horizontal = 16.dp, vertical = 8.dp)
    )
}

Now, try to click on first item:

As you can see, there is a white space above the clicked item. It is ugly. To fix it, we have to migrate from the padding of parent (Column) to the padding of child (Item).

This mean that first and last items should have different vertical padding than central ones. top padding of first item should be 16.dp, the same apply for bottom padding of the last item. Other paddings stay unchanged with the value of 8.dp.

There are several possible approaches. We can pass index as an argument to Item function. We can pass isFirst and isLast flags. We can pass padding value directly. All these approach are valid, however my personal sense of taste consider them not elegant.

Therefore I'd suggest another approach: pass the Modifier as an argument.

Here is the final solution:




@Composable
fun ItemList() {
    Column {
        Item("Item 1", modifier = Modifier.padding(top = 16.dp, bottom = 8.dp))
        Item("Item 2")
        Item("Item 3")
        Item("Item 4", modifier = Modifier.padding(top = 8.dp, bottom = 16.dp))
    }
}

@Composable
fun Item(text: String, modifier: Modifier = Modifier.padding(vertical = 8.dp)) {
    Text(
        text = text,
        modifier = Modifier
            .fillMaxWidth()
            .clickable {  }
            .padding(horizontal = 16.dp)
            .then(modifier)
    )
}

And the result (with first item clicked) looks like the following:

What is important here, I've used .then(modifier) option. I encourage you to try out what happen if instead of using then, modifier is injected in this way:



modifier = modifier
    .fillMaxWidth()
    .clickable {  }
    .padding(horizontal = 16.dp)

Spoiler: because vertical padding would be applied before applying clickable, the on-click highlighted area will not cover padding.
That is why the order of modifiers is so important and why then function is useful.

(Optional) further refactoring

I believe it is very important not to mix abstraction levels in the code. The following code is an example of mixing abstractions:



// Padding size is set in the parent function:
Item("Item 1", modifier = Modifier.padding(top = 16.dp, bottom = 8.dp))
// Padding size is set in the child function:
Item("Item 2")

Therefore I suggest the following steps of refactoring:

First, pull the padding values to the parent:



@Composable
fun ItemList() {
    Column {
        Item("Item 1", modifier = Modifier.padding(top = 16.dp, bottom = 8.dp))
        Item("Item 2", modifier = Modifier.padding(vertical = 8.dp))
        Item("Item 3", modifier = Modifier.padding(vertical = 8.dp))
        Item("Item 4", modifier = Modifier.padding(top = 8.dp, bottom = 16.dp))
    }
}

Then create helper functions to increase readability and remove code duplication:



@Stable
private fun Modifier.firstElementPadding(padding: Dp) =
    padding(top = padding, bottom = padding / 2)

@Stable
private fun Modifier.middleElementPadding(padding: Dp) =
    padding(vertical = padding / 2)

@Stable
private fun Modifier.lastElementPadding(padding: Dp) =
    padding(top = padding / 2, bottom = padding)



Item("Item 1", modifier = Modifier.firstElementPadding(16.dp))
Item("Item 2", modifier = Modifier.middleElementPadding(16.dp))
Item("Item 3", modifier = Modifier.middleElementPadding(16.dp))
Item("Item 4", modifier = Modifier.lastElementPadding(16.dp))

Automate taking screenshots of Android app with Jetpack Compose

Piotr Chmielowski — Fri, 04 Feb 2022 13:23:17 +0000

In the article I'll show how to automate taking screenshots of the Android application written in Jetpack Compose.

1. Create test

Start with setting up instrumented test. This test will not check anything, it will only perform actions such clicking button and take screenshots of the application.

First, set up testing in app/build.gradle:

android {
    // other properties
    defaultConfig {
           // other properties
           testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" // Add this line
    }
}
// ...

dependencies {
    // other dependencies
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version" // Add this line
}

Now, let's suppose this is the Activity we want to take screenshots of:

package com.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Scaffold {
                Column(
                    verticalArrangement = Arrangement.spacedBy(16.dp),
                    modifier = Modifier.padding(16.dp),
                ) {
                    var greetingVisible by remember { mutableStateOf(false) }
                    if (greetingVisible) {
                        Text("Hello!")
                    }
                    Button(onClick = { greetingVisible = true }) {
                        Text("Show greeting")
                    }
                }
            }
        }
    }
}

Create the test in androidTest directory:

package com.example

import androidx.compose.ui.test.junit4.createAndroidComposeRule
import androidx.compose.ui.test.onNodeWithText
import androidx.compose.ui.test.performClick
import androidx.test.ext.junit.runners.AndroidJUnit4
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith

@RunWith(AndroidJUnit4::class)
class ScreenshotTest {

    @get:Rule
    val rule = createAndroidComposeRule<MainActivity>()

    @Test
    fun makeScreenshot() {
        // TODO: Take screenshot before clicking button
        rule
            .onNodeWithText("Show greeting")
            .performClick()
        // TODO: Take screenshot after clicking button
    }
}

2. Take the screenshot

In order to take screenshot and save it as an image, use the following functions:

private fun ComposeContentTestRule.takeScreenshot(file: String) {
    onRoot()
        .captureToImage()
        .asAndroidBitmap()
        .save(file)
}

private fun Bitmap.save(file: String) {
    val path = InstrumentationRegistry.getInstrumentation().targetContext.filesDir.canonicalPath
    FileOutputStream("$path/$file").use { out ->
        compress(Bitmap.CompressFormat.PNG, 100, out)
    }
}

Here is the full test which takes screenshots of the app:

package com.example

import android.graphics.Bitmap
import androidx.compose.ui.graphics.asAndroidBitmap
import androidx.compose.ui.test.captureToImage
import androidx.compose.ui.test.junit4.ComposeContentTestRule
import androidx.compose.ui.test.junit4.createAndroidComposeRule
import androidx.compose.ui.test.onNodeWithText
import androidx.compose.ui.test.onRoot
import androidx.compose.ui.test.performClick
import androidx.test.ext.junit.runners.AndroidJUnit4
import androidx.test.platform.app.InstrumentationRegistry
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith
import java.io.FileOutputStream

@RunWith(AndroidJUnit4::class)
class ScreenshotTest {

    @get:Rule
    val rule = createAndroidComposeRule<MainActivity>()

    @Test
    fun makeScreenshot() {
        rule.takeScreenshot("before-click.png")
        rule
            .onNodeWithText("Show greeting")
            .performClick()
        rule.takeScreenshot("after-click.png")
    }
}


private fun ComposeContentTestRule.takeScreenshot(file: String) {
    onRoot()
        .captureToImage()
        .asAndroidBitmap()
        .save(file)
}

private fun Bitmap.save(file: String) {
    val path = InstrumentationRegistry.getInstrumentation().targetContext.filesDir.canonicalPath
    FileOutputStream("$path/$file").use { out ->
        compress(Bitmap.CompressFormat.PNG, 100, out)
    }
}

3. Save screenshots on the host PC

All screenshots taken by the code are stored in the emulator or phone.

To fetch them manually you can use Device File Explorer, which is build in Android Studio. Screenshots can be found in the following directory:
/data/data/$applicationId/files/

This process can be automated by ADB command:

adb root
adb pull /data/data/com.example/files/ screenshots

Extra information

Turn off animations

In some cases turning off animations is needed to run tests. To do it, use these commands:

adb shell settings put global window_animation_scale 0
adb shell settings put global animator_duration_scale 0
adb shell settings put global transition_animation_scale 0

Some users have reported that their devices need to be reboot to apply these settings. If that's your case, you can use the following command:

adb shell "su 0 am start -a android.intent.action.REBOOT"

Turn off keyboard

Soft keyboard can affect screenshots by cropping them. To disable it use the following commands:

# Show all keyboards (-a for all, -s for short summary).
adb shell ime list -s -a

# Disable keyboards:
adb shell ime disable <<keyboard id>>
# Example: adb shell ime disable com.android.inputmethod.latin

Opening Google Translate from your Android application

Piotr Chmielowski — Wed, 24 Nov 2021 16:34:45 +0000

In this post I'll demonstrate how to programatically open Google Translate from another Android application and pass text to translate.

As an example I'll use a screen which displays some text and provides a "translate" button:

Here is the source code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TranslateTestTheme {
                MainScreen(
                    title = "Dog",
                    body = dogDescription,
                    onTranslateClick = { openGoogleTranslate(dogDescription) },
                )
            }
        }
    }
}

@Composable
private fun MainScreen(
    title: String,
    body: String,
    onTranslateClick: () -> Unit,
) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = title) },
                actions = {
                    IconButton(onClick = onTranslateClick) {
                        Icon(Icons.Default.GTranslate, contentDescription = "Translate")
                    }
                }
            )
        },
        content = {
            Text(
                text = body,
                style = MaterialTheme.typography.body2,
                modifier = Modifier.padding(16.dp),
            )
        },
    )
}

The key part is following callback: onTranslateClick = { openGoogleTranslate(dogDescription) }.

Launching Google Translate with `Intent.ACTION_PROCESS_TEXT`

Let's take a look at the openGoogleTranslate method:

fun Context.openGoogleTranslate(text: String) {
    val intent = Intent()
        .setAction(Intent.ACTION_PROCESS_TEXT)
        .setType("text/plain")
        .putExtra(Intent.EXTRA_PROCESS_TEXT, text)
        .putExtra(Intent.EXTRA_PROCESS_TEXT_READONLY, true)
    startActivity(intent)
}

It opens any Activity which is registered with Intent.ACTION_PROCESS_TEXT intent filter. As Google Translate app provides such Activity, it is one of the candidates to be opened when mentioned method is called.

It is important to remember, however, that some users have no Google Translate application installed. Some users also have on their devices more applications that handle Intent.ACTION_PROCESS_TEXT.

In the second case, Android prompts the following dialog:

In case of no application to handle the intent installed, ActivityNotFoundException will be thrown on startActivity invocation. This case can be handled by try/catch block:

try {
    startActivity(intent)
} catch (e: ActivityNotFoundException) {
    // TODO: Show error
}

Checking if Google Translate is installed

It would be nice to display the "translate" button only if Google Translate is installed. Following code can be use to check its existence:

fun Context.queryProcessTextActivities(): List<ResolveInfo> {
    val intent = Intent()
        .setAction(Intent.ACTION_PROCESS_TEXT)
        .setType("text/plain")
    return packageManager.queryIntentActivities(intent, 0)
}

fun Context.isGoogleTranslateInstalled() = queryProcessTextActivities()
    .any { it.activityInfo.packageName == "com.google.android.apps.translate" }

In order to make queryIntentActivities work correctly on all Android versions, the following fragment should be added to AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <application ...>
        ...
    </application>
    <queries>
        <intent>
            <action android:name="android.intent.action.PROCESS_TEXT" />
            <data android:mimeType="text/plain" />
        </intent>
    </queries>
</manifest>

Launching Google Translate directly

We can also make sure that - if it is installed - Google Translate will be launched, regardless if there are other applications to handle intent or not.

To do so, the following code can be used:

fun Context.queryProcessTextActivities(): List<ResolveInfo> {
    val intent = Intent()
        .setAction(Intent.ACTION_PROCESS_TEXT)
        .setType("text/plain")
    return packageManager.queryIntentActivities(intent, 0)
}

fun Context.googleTranslateActivityInfo() = queryProcessTextActivities()
    .firstOrNull { it.activityInfo.packageName == "com.google.android.apps.translate" }
    ?.activityInfo

fun Context.openGoogleTranslate(activity: ActivityInfo, text: String) {
    val intent = Intent()
        .setAction(Intent.ACTION_PROCESS_TEXT)
        .setType("text/plain")
        .putExtra(Intent.EXTRA_PROCESS_TEXT, text)
        .putExtra(Intent.EXTRA_PROCESS_TEXT_READONLY, true)
        // Following line makes sure only Google Translate app will be launched
        .setClassName(activity.packageName, activity.name)
    try {
        startActivity(intent)
    } catch (e: ActivityNotFoundException) {
        // TODO: Show error
    }
}

You can find complete Kotlin code under this link: https://gist.github.com/pchmielowski/d236f06f168c05efa3f5b26f1e2f0af9

Testing Jetpack Compose without emulator or device

Piotr Chmielowski — Wed, 17 Nov 2021 17:31:43 +0000

How to verify code which uses Jetpack Compose with pure JVM tests running on the developer's PC - without emulator or physical Android device.

Gradle setup

First requirement is to add Jetpack Compose testing artifacts:

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

We need also JUnit library:

testImplementation 'junit:junit:4.13.2'

And Robolectric. Robolectric is a test runner which provides Android SDK dependencies for pure JVM tests:

testImplementation 'org.robolectric:robolectric:4.7'

Robolectric also requires the following line in the Gradle configuration:

testOptions {
    unitTests {
        includeAndroidResources = true
    }
}

Here is a final app/build.gradle file:

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}
android {
    compileSdk 31
    defaultConfig {
        applicationId "net.chmielowski.testingcompose"
        minSdk 28
        targetSdk 31
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
    }
    testOptions {
        unitTests {
            includeAndroidResources = true
        }
    }
}
dependencies {
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"

    testImplementation 'junit:junit:4.13.2'
    testImplementation 'org.robolectric:robolectric:4.7'
    testImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
}

And project level build.gradle file:

buildscript {
    ext {
        compose_version = '1.0.5'
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:7.0.3"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31"
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Writing test

To use Robolectric, we need to add the following annotation to the test class:

@RunWith(RobolectricTestRunner::class)

To test composables we need to add the following test rule:

@get:Rule
val rule = createComposeRule()

There is also an issue with Robolectric which can be worked around by adding @Config(instrumentedPackages = ["androidx.loader.content"]) annotation to the test class.

Putting it all together, the basic test could look like the following:

package net.chmielowski.testingcompose

import androidx.compose.material.Text
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithText
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith
import org.robolectric.RobolectricTestRunner
import org.robolectric.annotation.Config

@RunWith(RobolectricTestRunner::class)
@Config(instrumentedPackages = ["androidx.loader.content"])
class ExampleUnitTest {

    @get:Rule
    val rule = createComposeRule()

    @Test
    fun basicTestCase() {
        rule.setContent { Text("Hello, World!") }
        rule
            .onNodeWithText("Hello, World!")
            .assertExists()
    }
}

More advanced test

Here is an example of the slightly more advanced test:

package net.chmielowski.testingcompose

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.test.assertTextEquals
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.test.onNodeWithText
import androidx.compose.ui.test.performClick
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith
import org.robolectric.RobolectricTestRunner
import org.robolectric.annotation.Config

@RunWith(RobolectricTestRunner::class)
@Config(instrumentedPackages = ["androidx.loader.content"])
class ExampleUnitTest {

    @get:Rule
    val rule = createComposeRule()

    @Test
    fun basicTestCase() {
        rule.setContent {
            var number by remember { mutableStateOf(0) }
            Text(
                text = number.toString(),
                modifier = Modifier.testTag("Counter"),
            )
            Button(onClick = { number++ }) {
                Text("Increment")
            }
        }
        rule
            .onNodeWithTag("Counter")
            .assertTextEquals("0")
        rule
            .onNodeWithText("Increment")
            .performClick()
        rule
            .onNodeWithTag("Counter")
            .assertTextEquals("1")

    }
}

Jetpack Compose TextField which accepts and emits value other than String

Piotr Chmielowski — Sun, 14 Nov 2021 20:28:24 +0000

How to create a TextField composable which - as opposed to the default one - works not on String but on other types, such as Int.

In this post, we will build a composable for entering user's age with the following signature:

@Composable
private fun AgeTextField(
    age: Int,
    onAgeChange: (Int) -> Unit,
)

Let's code

To start, let's create the screen with age input and a button:

@Composable
fun AppContent(model: MyViewModel = viewModel()) {
    Column {
        AgeTextField(
            age = model.age,
            onAgeChange = model::onAgeChange,
        )
        Button(onClick = model::onUpdateClick) {
            Text("Update")
        }
    }
}
@Composable
private fun AgeTextField(
    age: String,
    onAgeChange: (String) -> Unit,
) {
    TextField(
        value = age,
        onValueChange = onAgeChange,
        label = { Text("Enter age") },
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Number,
        ),
    )
}

For now AgeTextField works on the String type and all conversion logic is inside view model:

class MyViewModel : ViewModel() {

    var age: String by mutableStateOf(readAgeFromDatabase().toString())
        private set

    fun onAgeChange(text: String) {
        age = text
    }

    fun onUpdateClick() {
        val parsed = age.toIntOrNull()
        if (parsed != null) {
            updateAgeInDatabase(parsed)
        }
    }

    private fun readAgeFromDatabase(): Int {
        // TODO: Real implementation
        return 0
    }

    private fun updateAgeInDatabase(age: Int) {
        // TODO: Real implementation
    }
}

The problem

age variable is of type String which has the following implications:

Code is obscured. Compare var age: Int with var age: String - first one just feels more correct.
This view model is tightly coupled to the type of UI widget (TextField in this case). Changing the UI widget to e.g. dropdown or slider could possibly force to us to modify view model.
Imagine a form with a few numeric inputs: age, height, number of pets etc. - the Int/String conversion logic will be duplicated all over view model

Solution

First, let's change age field in the view model to Int.

class MyViewModel : ViewModel() {

    var age: Int by mutableStateOf(readAgeFromDatabase())
        private set

    fun onAgeChange(newAge: Int) {
        age = newAge
    }

    fun onUpdateClick() {
        updateAgeInDatabase(age)
    }

    private fun readAgeFromDatabase(): Int {
        // TODO: Real implementation
        return 0
    }

    private fun updateAgeInDatabase(age: Int) {
        // TODO: Real implementation
    }
}

Now, we have to update AgeTextField signature by replacing String with Int:

@Composable
private fun AgeTextField(
    age: Int,
    onAgeChange: (Int) -> Unit,
) {
    TextField(
        value = age, // Error here
        onValueChange = onAgeChange, // Error here
        label = { Text("Enter age") },
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Number,
        ),
    )
}

Of course it doesn't compile because of type mismatch in the following lines:

value = age,
onValueChange = onAgeChange,

Here starts the tricky part. When I faced this problem, my first naive solution was to add conversion logic inside AgeTextField:

value = age.toString(),
onValueChange = { raw ->
    val parsed = raw.toIntOrNull()
    if (parsed != null) onAgeChange(parsed)
},

But this was wrong: when user tries to clear the input with Backspace, toIntOrNull() returns null so onAgeChange is not called. As a consequence, the text field value stays unchanged.

I've tried also the following logic:

value = age.toString(),
onValueChange = { raw ->
    val parsed = raw.toIntOrNull() ?: 0
    onAgeChange(parsed)
},

Also wrong: when user tries to clear the input, it isn't cleared but its value changes to "0" - still strange and simply incorrect user experience.

At this point I've realized that there is a need to keep raw user input as a String internally, independent from the value from view model:

@Composable
private fun AgeTextField(
    age: Int,
    onAgeChange: (Int) -> Unit,
) {
    var text by remember { mutableStateOf(age.toString()) }
    TextField(
        value = text,
        onValueChange = { raw ->
            text = raw
            val parsed = raw.toIntOrNull() ?: 0
            onAgeChange(parsed)
        },
        label = { Text("Enter age") },
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Number,
        ),
    )
}

Turned out I was 50% there.

There was one more problem to solve: the text field is not updated if value in view model is changed from another source.

To test it, I've added a new button to the screen:

Button(onClick = model::onAgeIncrement) {
    Text("Increment by one")
}

and a new method in MyViewModel:

fun onAgeIncrement() {
    age++
}

Age in the text field was not changed after clicking on the new button.

This was quite easy to fix:

var text by remember(age) { mutableStateOf(age.toString()) }

The age argument added to remember method forces the { mutableStateOf(age.toString()) } lambda to be executed each time age in the view model changes.

Conclusion

Here is the final version of our composable:

@Composable
private fun AgeTextField(
    age: Int,
    onAgeChange: (Int) -> Unit,
) {
    var text by remember(age) { mutableStateOf(age.toString()) }
    TextField(
        value = text,
        onValueChange = { raw ->
            text = raw
            val parsed = raw.toIntOrNull() ?: 0
            onAgeChange(parsed)
        },
        label = { Text("Enter age") },
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Number,
        ),
    )
}