Why modifier order matters

Jetpack Compose Junior Kotlin 2.0+ API 24+ Reviewed 31 Oct 2026 By Best Latest Apps

Predict the output

Which area turns red?

@Composable
fun Tag() {
    Text("New",
        Modifier
            .padding(16.dp)
            .background(Color.Red))
}

OptionsOnly the text area, inside the 16 dp paddingThe text plus the 16 dp paddingNothing; background needs a shapeThe whole screen

Hint 1 of 1

Which modifier is the outer layer?

Choose an answer, then open Show answer below to check it.

Show answer

Answer: A Only the text area, inside the 16 dp padding

Correct. Padding is applied first (outside), then background paints what's inside it.

Why not the others?

B The text plus the 16 dp padding. That's background before padding.
C Nothing; background needs a shape. A rectangle is the default shape.
D The whole screen. Nothing here fills the parent.

30-second answer

Each modifier wraps the ones after it, so they apply from the outside in. Modifier.padding(16.dp).background(Color.Red) adds space and then paints the smaller area red; reversed, the red fills the padding too. The same applies to clickable: placed before padding, the touch area includes the padding.

Practise saying it · 30 s. No recording, just a timer

Explain why modifier order matters.

Say your answer out loud, then check which of these points you covered:

Modifiers wrap from outside in
padding then background vs reverse
clickable position sets the touch area
Apply the caller's modifier first

Deep dive

Think of modifiers as layers: the first one is the outermost.

size after padding sets the inner content size; before it, the total size.

Accept a modifier: Modifier = Modifier parameter and apply it first, on the root, so callers control outer layout.

Chains are cheap, but don't rebuild complex ones per frame; hoist constants.

Common mistakes

Putting clickable after padding and getting a small touch target.
Applying the caller's modifier to an inner element.
Expecting background to ignore padding order.

Senior take & follow-ups

Draw the layers. Then give the touch-target example, since it affects accessibility.

Follow-up questions

Think of your answer first, then open the hint.

Where should a composable apply the modifier parameter?
Show hint
On its root element, first in the chain.
How do you get a 48 dp touch target with small visuals?
Show hint
clickable first, then padding, or minimumInteractiveComponentSize.

Similar on iOS: ViewModifier vs AnyView SwiftUI modifiers also apply in order, but each wraps the view before it, so .padding().background() colours the padding too, the opposite of Compose's Modifier.padding().background().

Suggest a fix if something here is wrong or out of date.