Polish your Jetpack Compose dev experience
Tags: jetpackcompose, android, kotlin
Published: 2021-12-28 11:39:21

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:

![Android Studio auto import suggestion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pthfvda202adxecqfjfo.png)

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:

![Error message after the auto import](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pyouqiz3uqb3sycojqa.png)

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:

![Modify file and code template in settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp7q7si407j2b8k1p583.png)

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

![Create a new Kotlin file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxdgghntlnmjmc8iol8t.png)

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

![Create a custom template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d10b23ns2zdk59rhp7yd.png)
 
You can then create Compose files this way:

![Create a Compose file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jn04azxz9lb5pv7wo4e1.png)

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:

```kotlin
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.

![Live Templates in the Settings dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rbkj7hpqhyzizkrnk78.png)

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

![Creating a custom live template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9e520xqx28o5jlg8pk0x.png)
 
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.