Lesson 9: Modifiers: Styling and Spacing in Compose

Modifiers: Styling and Spacing in Compose

Every composable accepts a modifier parameter — it's how you control padding, size, background color, click behavior, and much more, all without any XML.

Basic modifiers

Text(
    text = "Hello!",
    modifier = Modifier
        .padding(16.dp)
        .fillMaxWidth()
)

• .padding(16.dp) — adds 16dp of space around the content
• .fillMaxWidth() — makes the element take up all available horizontal space
• .size(48.dp) — sets a fixed width and height
• .background(Color.Gray) — fills the background with a color

Order matters — a lot

// Padding THEN background: padding is outside the colored area
Modifier.padding(16.dp).background(Color.Red)

// Background THEN padding: the whole box (including padding) is red
Modifier.background(Color.Red).padding(16.dp)

Modifiers apply in the order you chain them, top to bottom. This trips up almost every beginner at least once — if your spacing looks wrong, check the modifier order before anything else.

Clickable — your first interaction modifier

Text(
    text = "Tap me",
    modifier = Modifier.clickable { println("Tapped!") }
)

This is the same trailing-lambda pattern from lesson 4 — whatever code you put inside { } runs when the user taps.

Practice

Take your Column from lesson 8 and add: 16dp of padding around the whole column, and make one of the Text elements clickable, printing a message when tapped. Run it and check Logcat (Android Studio's log viewer) for your printed message.

Next: Lesson 10 — displaying images alongside text.