Blog Infos
Author
Published
Topics
Published
Topics

With the introduction to Compose Google changed the way we wrote UIs in android. This lead to a bit of learning curve for developer meaning not all would start at the same page. Which is what happened here at SuperShare. So how do we manage to keep code in check? We’ll these are some of the checks we make for composable’s.

Always provide a modifier.

Any composable that provides a layout should always have a modifier as one of its parameters. This is so that who ever is consuming the composable can then modify the size, padding, background, etc… to match the rest of the screen.

//
@Composable
fun HelloWorld() {
Column {
Text("Hello")
Text("World")
}
}
//
@Composable
fun HelloWorld(modifier: Modifier = Modifier) {
Column(modifier = modifier) {
Text("Hello")
Text("World")
}
}
view raw Modifier.kt hosted with ❤ by GitHub
Don’t emit to parent.

Make sure your composable layout are always packed inside a layout like column, row, box, etc… This is to prevent the recomposition of the whole parent layout.

//
@Composable
fun HelloWorld() {
Text("Hello")
Text("World")
}
//
@Composable
fun HelloWorld(modifier: Modifier = Modifier) {
Column(modifier = modifier) {
Text("Hello")
Text("World")
}
}
//
@Composable
fun ColumnScope.HelloWorld() {
Text("Hello")
Text("World")
}
Don’t emit and return result.

Your composable should always have a single responsibility. Meaning it should either render a layout or return a value but should not do both at the same time.

//
@Composable
fun HelloWorld(): String {
Text("Hello")
Text("World")
return remember { "HelloWorld" }
}
//
@Composable
fun HelloWorld(modifier: Modifier = Modifier) {
Column(modifier = modifier) {
Text("Hello")
Text("World")
}
}
//
@Composable
fun rememberHelloWorld(): String {
return remember { "Hello World" }
}
Say No MutableState as parameter.

Avoid passing mutable types as parameters because that MutableState could also be listened upon by other composable and changing the value in one place to cascade into multiple composable re-rendering. Instead use Generic types.

//
@Composable
fun HelloWorld(modifier: Modifier = Modifier, sayHi: MutableState<String>) {
Column(modifier = modifier) {
Text(sayHi.value)
}
}
//
@Composable
fun HelloWorld(modifier: Modifier = Modifier, sayHi: String) {
Column(modifier = modifier) {
Text(sayHi)
}
}
Always use remember in your composable’s.

Recomposition can trigger anytime due to a bunch or reasons. If we have a value that was supposed to survive a recomposition then remember helps you retain it across recomposition.

//
@Composable
fun HelloWorld(modifier: Modifier = Modifier) {
val message = "Hello World"
Column(modifier = modifier) {
Text(message)
}
}
//
@Composable
fun HelloWorld(modifier: Modifier = Modifier) {
val message by remember { mutableStateOf("Hello World") }
Column(modifier = modifier) {
Text(message)
}
}
view raw Remember.kt hosted with ❤ by GitHub
Don’t reuse modifier instance.

The modifier that was passed as a parameter to the composable should only be used on the top level layout of the composition. We can add properties to it but we should not reuse them internally for other components the layout contains. This could break your code.

//
@Composable
fun HelloWorld(modifier: Modifier = Modifier) {
Column(modifier = modifier) {
Text("Hello World", modifier = modifier.padding(8.dp))
}
}
//
@Composable
fun HelloWorld(modifier: Modifier = Modifier) {
Column(modifier = modifier) {
Text("Hello World", modifier = Modifier.padding(8.dp))
}
}

Job Offers

Job Offers


    Senior Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Mobile Engineer

    OLX Group
    Remote, Portugal, Spain, Romania, Poland
    • Full Time
    apply now

OUR VIDEO RECOMMENDATION

,

Take a look at Jetpack Glance

Jetpack Glance is the new shiny library in the Jetpack family for creating widgets. At first glance, it resembles a Jetpack Compose, but in many cases, it is really different. Learn those differences and create…
Watch Video

Take a look at Jetpack Glance

Piotr Prus
Android developer

Take a look at Jetpack Glance

Piotr Prus
Android developer

Take a look at Jetpack Glance

Piotr Prus
Android developer

Jobs

Don’t use AndroidView for composable views.

If a view already has a composable view. There is no point in rendering it via AndroidView. The AndroidView is only to be used in case of view not having a composable implementation (3rd party libs and custom views for the most part right now).

//
@Composable
fun HelloWorld(modifier: Modifier = Modifier) {
Column(modifier = modifier) {
AndroidView(::TextView){ ... }
}
}
//
@Composable
fun HelloWorld(modifier: Modifier = Modifier) {
Column(modifier = modifier) {
Text(...)
}
}
view raw AndroidView.kt hosted with ❤ by GitHub
Bonus: No ViewModel in the composable.

We prefer not passing ViewModel into the composable as we want them to be as dumb as possible and broken down to the smallest of organism as possible.

//
@Composable
fun HelloWorld(modifier: Modifier = Modifier, viewModel: HelloWorldViewModel) {
Column(modifier = modifier) {
Text(viewModel.sayHi)
}
}
//
@Composable
fun HelloWorld(modifier: Modifier = Modifier, sayHi: String) {
Column(modifier = modifier) {
Text(sayHi)
}
}
Feel free to drop a clap or comment or reach out to me on LinkedIn, Twitter, Website.

This article was originally published on proandroiddev.com on May 02, 2022

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
I have been playing around with Compose and recently implemented video playback in a…
READ MORE
blog
Hi everyone! We (Kaspresso Team and AvitoTech) are back with more about automated Android testing. Previously…
READ MORE
blog
I paired Glance Widget with Work Manager API to create a feature for my…
READ MORE
blog

Loading images for Jetpack Compose using Glide, Coil, and Fresco

A new modern UI toolkit Jetpack Compose has been announced by Google over a…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu