Polish your Jetpack Compose dev experience

Writing Jetpack Compose apps undoubtedly is fun. However, like most modern UI frameworks, Compose requires a fair amount of integration into the IDE. You certainly can write Compose code with any editor, but for quite a few things you need additional support, for example

• previewing and (semantically) testing composable functions
• code completion and automatic imports
• code templates

Android Studio does as great job in helping you in these areas, at least most of the time. However, sometimes things just don't work as expected. You surely ran into this, too:

The by keyword is very handy if you want remember something and access only the value, not the property holder. Under the hood, the getValue() function will be called, so Android Studio quite correctly suggests to import it. However, doing so may not be enough:

The somewhat cryptic error Type 'MutableState<Int>' has no method 'setValue(Nothing?, KProperty<*>, Int)' appears, because I started the declaration with var, meaning that I may want to change the value of the property holder. This, however, is no error at all, the only thing missing is an import of androidx.compose.runtime.setValue. You certainly can do that manually.

File and code templates

You can also add some imports to the file and code template in the Android Studio settings:

I added one line, import androidx.compose.runtime.*. Whenever you create a new Kotlin file, you will automatically get this import.

As this will add the import to any new Kotlin file, you may want to create a new custom file template instead:

You can then create Compose files this way:

There are certainly more clever use cases for Compose-specific custom file templates. Please share your thoughts in the comments.

Code templates

Jetpack Compose is code-centric. Therefore, code templates help you speed up development significantly. Let's take a look.

Typing comp applies a so-called live template:

import androidx.compose.runtime.Composable

@Composable
fun () {

}

The cursor is placed before the empty parameter list, so you can immediately complete the code by inserting the function name. To examine existing templates, navigate to Editor > Live Templates in the Android Studio settings.

You can add custom templates by clicking the Plus icon at the right hand side of the template list:

Currently you can't add unrelated imports, so in order to avoid the issues I mentioned earlier, you need to add imports to getValue and setValue somehow else.

Conclusion

Templates can speed up development of Compose apps significantly. I hope this short article triggers more creative solutions. Please share your thoughts in the comments.