Jetpack Compose: Modifiers fundamentals
Tags: android, jetpackcompose, kotlin
Published: 2021-11-04 07:00:33

---
title: Jetpack Compose: Modifiers fundamentals
published: true
date: 2021-11-04 05:49:11 UTC
tags: Android,JetpackCompose,Kotlin
canonical_url: https://www.rockandnull.com/jetpack-compose-modifier/
---

 ![Jetpack Compose: Modifiers fundamentals](https://images.unsplash.com/photo-1618609377864-68609b857e90?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDJ8fHNvdW5kJTIwYm9hcmR8ZW58MHx8fHwxNjM2MDA0Mzc4&ixlib=rb-1.2.1&q=80&w=2000)

Modifiers in Jetpack Compose are great. It's a consistent way to give additional functionality and shape to your composables.

Most people compare modifiers with XML attributes in the old Android UI world. But they are quite different. In this post, I will cover the biggest differences I noticed, that makes them way more powerful and flexible than attributes.

## Repeatability

Although it looks like the `Modifier`follows the [builder pattern](https://en.wikipedia.org/wiki/Builder_pattern), it's not. You are not setting a value to a property when calling each method. You are applying operations when calling those methods. This means you can call each method multiple times and each method will be applied again and again.

Where might this be useful? One interesting example is the use of decorating modifiers to decorate your composables. For instance, in the snippet below we can create two borders around our `Text` by calling `border` multiple times.

```
    Text(
        "Hello word",
        modifier = Modifier
            .border(1.dp, Color.Black)
            .padding(16.dp)
            .border(1.dp, Color.Black)
    )
```

![Jetpack Compose: Modifiers fundamentals](https://www.rockandnull.com/content/images/2021/11/Screenshot-2021-11-03-at-22.28.18.png)

## Ordering

Ordering matters (you might have figured it out from the previous snippet already). This is interesting in the sense that dedicated XML attributes of the old Android UI world can be expressed by different ordering of `Modifier` methods.

For instance, there are no different padding and margin `Modifier` methods. You accomplish the same results using the different ordering of the `padding` method.

```
    Text(
        "Hello world",
        modifier = Modifier
            .padding(8.dp) // "Margin"
            .clip(RoundedCornerShape(4.dp))
            .background(Color.Gray)
            .padding(16.dp) // "Padding"
    )
```

![Jetpack Compose: Modifiers fundamentals](https://www.rockandnull.com/content/images/2021/11/Screenshot-2021-11-03-at-22.28.31.png)

## Consistency

The [list of built-in Compose Modifiers](https://developer.android.com/jetpack/compose/modifiers-list) can be applied to every composable that accepts a `Modifier`. This is unlike the XML attributes that had specific attributes for specific elements. It creates uniformity and it's easier to remember how to accomplish common tasks.

Such a common task is how to set a click handler. Just set the `clickable` method and you are done.

```
    Text(
        "Hello world",
        modifier = Modifier
            .clickable(
                onClick = {
                    // Do things
                })
    )
```

Hopefully, by now you have grasped some fundamentals on how `Modifer` works that will make your life navigating around Compose a bit easier.

Happy coding!