Jetpack Compose – Order of Modifiers

by

There’s Layouts in Jetpack Compose codelab containing Layout modifiers under the hood step which explains the modifier order, see “Order matters” section.

order matters when chaining modifiers as they’re applied to the composable they modify from earlier to later, meaning that the measurement and layout of the modifiers on the left will affect the modifier on the right. The final size of the composable depends on all modifiers passed as a parameter. First, modifiers will update the constraints from left to right, and then, they return back the size from right to left.

To understand it better I’d recommend to figure out how layouts work in Compose. In short, padding() is a LayoutModifer, it takes in some constraints, measures its child size based on a projection of that constraints and places the child at some coordinates.

Let’s see an example:

Box(
  modifier = Modifier
    .border(1.dp, Color.Red)
    .size(32.dp)
    .padding(8.dp)
    .border(1.dp, Color.Blue)
)

And the result:

enter image description here

But let’s swap the .size() and the .padding()

Box(
  modifier = Modifier
    .border(1.dp, Color.Red)
    .padding(8.dp)
    .size(32.dp)
    .border(1.dp, Color.Blue)
)

Now we have a different result:

enter image description here

I hope this sample helps you to figure out how the modifiers are applied.

One can expect that the red border should be the closest to the box since it was added first, so the order might seem reversed, but such an order has pros too. Let’s take a look at this composable:

@Composable
fun MyFancyButton(modifier: Modifier = Modifier) {
  Text(
    text = "Ok",
    modifier = modifier
      .clickable(onClick = { /*do something*/ })
      .background(Color.Blue, RoundedCornerShape(4.dp))
      .padding(8.dp)
  )
}

Just by moving the modifier to the arguments the composable allows its parents to add additional modifiers such as extra margin. Because the lastly added modifiers are the closest to the button, the border and the inner padding won’t be affected.

More Related Contents:

  1. Jetpack Compose collapsing toolbar
  2. Android Jetpack Compose width / height / size modifier vs requiredWidth / requiredHeight / requiredSize
  3. Different types of width in jetpack compose
  4. When should I use Android Jetpack Compose Surface composable?
  5. Show custom alert dialog in Jetpack Compose
  6. Android. Is WorkManager running when app is closed?
  7. Can I use library that used android support with Androidx projects.
  8. Fragments destroyed / recreated with Jetpack’s Android Navigation components
  9. Why the view keeps flashing when using jetpack navigation with Compose?
  10. How are Android activities handled with Jetpack Compose and Compose Navigation?
  11. How to handle one-shot operations in Jetpack Compose?
  12. Pass Parcelable argument with compose navigation
  13. Jetpack Compose Text hyperlink some section of the text
  14. Jetpack Compose how does SubcomposeLayout work?
  15. How to clear TextField focus when closing the keyboard and prevent two back presses needed to exit app in Jetpack Compose?
  16. Scoping States in Jetpack Compose
  17. What is the equivalent of [NestedScrollView + RecyclerView] or [Nested RecyclerView (Recycler inside another recycler) in Jetpack compose
  18. How to get preview in composable functions that depend on a view model?
  19. Jetpack compose – how do I refresh a screen when app returns to foreground
  20. AppCompatActivity instead of ComponentActivity in Jetpack compose
  21. Jetpack Compose lazy column all items recomposes when a single item update
  22. Proguard causing runtime exception with Android Navigation Component
  23. ViewTreeLifecycleOwner not found from DecorView@2da7146[MyActivity]
  24. Passing URL as a parameter to Jetpack Compose Navigation
  25. How to disable and enable scrolling in LazyColumn/LazyRow in Jetpack Compose?
  26. How to show animate an item view in LazyColumn on Jetpack Compose Android
  27. fillMaxSize modifier not working when combined with VerticalScroll in Jetpack Compose
  28. How to pass id and application to a viewModel/viewModelFactory in Jetpack Compose?
  29. Jetpack Compose Navigation loads screen infinitely
  30. What does Jetpack Compose remember actually do, how does it work under the hood?

Leave a Comment