Android Jetpack Compose: What are Modifiers and How to Use Them in Kotlin?

Highly customized car

Hello there, my fellow Kotlin enthusiasts! Today, I want to talk to you about one of the most powerful tools in Jetpack Compose: Modifiers. They’re like little magic wands that you can use to transform your UIs into something more exciting and visually appealing. And let’s face it, UIs can be pretty boring sometimes, am I right?

So what are Modifiers, exactly? Well, in Jetpack Compose, everything is a composable function, including UI elements. Modifiers are functions that you can apply to these UI elements to modify their behavior or appearance. Think of them as decorators for your UI elements.

But enough chit-chat, let’s get to the fun part: examples! Here are 10 examples of how you can use Modifiers to spice up your UIs:

Add a border to a Button:

Button(
    onClick = {},
    modifier = Modifier.border(1.dp, Color.Black)
) {
    Text("Click me!")
}

An Android device emulator screen showing the button with a border

Change the background color of a Card:

Card(
    modifier = Modifier.background(Color.Red)
) {
    Text("This card is on fire!")
}

In this case, if we only set the background modifier to the card, you will see that it will only be applied to the card, not the text. Like this:

An Android device emulator screen showing the text with the color red in the corners.

But if we apply the backgroundColor attribute to the Text as well, we’ll get a better result:

Card(
    modifier = Modifier.background(Color.Red)
) {
    Text(
        modifier = Modifier.background(Color.Red),
        text = "This card is on fire!")
}

An Android device emulator screen showing the text with a red background.

Rotate an Icon:

Icon(
    Icons.Default.ArrowForward,
    contentDescription = "Go forward",
    modifier = Modifier.rotate(45f)
)

An Android device emulator screen showing an icon rotated 45 degrees.

Change the size of an Image:

Image(
    painter = painterResource(R.drawable.my_image),
    contentDescription = "My image",
    modifier = Modifier.size(200.dp)
)

An Android device emulator screen showing an image resized.

Add a drop shadow to a Text:

Text(
    "I'm spooky",
    modifier = Modifier.shadow(10.dp, CircleShape)
)

An Android device emulator screen showing a text written "I'm spooky" with a shadow applied to it.

Align a Checkbox to the right:

Checkbox(
    checked = true,
    onCheckedChange = {},
    modifier = Modifier.align(Alignment.End)
)

An Android device emulator screen showing a checkbox aligned to the right side of the screen.

Change the padding of a Column:

Column(modifier = Modifier.background(color = Color.Red).padding(all=16.dp)) {
            Text("Android")
            Text("Some text inside")
        }

An Android device emulator screen showing a two texts with padding inside.

Add a clickable area to an Image:

Image(
    painter = painterResource(R.drawable.my_image),
    contentDescription = "My image",
    modifier = Modifier.clickable { /* do something */ }
)

Click event working in an image.

Make a Text field scrollable:

TextField(
    value = "This is a pretty big text to make it scroll so I can show you it is scrollable. This is a pretty big text to make it scroll so I can show you it is scrollable",
    onValueChange = {},
    modifier = Modifier.verticalScroll(rememberScrollState()).height(60.dp)
)

Scrollable event working.

Change the opacity of a Box:

Box(
    modifier = Modifier.alpha(0.5f)
) {
    Text("I'm half-transparent!")
}

Text half transparent.

See how easy it is to make your UIs less boring with Modifiers? The possibilities are endless! Just remember, with great power comes great responsibility. Don’t go overboard with the modifiers or you might end up with a messy UI.

Disclaimer: While Modifiers are a great tool for customizing your UIs in Jetpack Compose, it’s important to note that the order in which you apply them can have a significant impact on the final appearance and behavior of your UI.

Modifiers are applied in the order they are listed, from left to right. This means that if you apply a Modifier that affects the layout of an element before a Modifier that affects its appearance, the appearance Modifier might not have the expected effect.

Let’s check this example:

Box(
    modifier = Modifier
        .background(Color.Blue)  // Set the background color to blue
        .padding(16.dp)         // Add some padding
) {
    Text(text = "Hello, world!", color = Color.White)
}

"Hello, world" text with all the box area as blue

In this example, the Modifiers are applied in the following order: first, the background Modifier sets the background color of the Box to blue, and then the padding Modifier adds some padding around the Text element inside the Box.

But what if we change the order of the Modifiers like this:

Box(
    modifier = Modifier
        .padding(16.dp)         // Add some padding
        .background(Color.Blue)  // Set the background color to blue
) {
    Text(text = "Hello, world!", color = Color.White)
}

“Hello, world” text with only the inner part of the box area as blue

In this case, the padding Modifier is applied before the background Modifier. This means that the padding is added before the background color is set, and as a result, the blue background color doesn't extend all the way to the edge of the Box.

So you can see that the order of Modifiers matters, and it’s important to consider the order in which you apply them to achieve the desired result.

To avoid unexpected behavior, it’s important to carefully consider the order in which you apply your Modifiers. If you’re not sure about the correct order, you can refer to the documentation for each Modifier or experiment with different orders to see the effect.

Conclusion

Modifiers are a powerful and fun way to transform your UIs in Jetpack Compose. Whether you want to add some visual flair or change the behavior of your UI elements, Modifiers have got you covered. So go forth and make your UIs less boring!

Thanks for reading, and happy coding!