Android Academy · Lesson

The Modifier System

Size, pad, and style with modifiers.

Lesson 2 of 413 steps

The Modifier System is a free Android Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, and your progress syncs across the web and the CoddyKit app. The Android Academy course includes 4 lessons in total.

What Is a Modifier?

A Modifier decorates or configures a composable: its size, padding, background, click behavior, and more. Almost every composable accepts a modifier parameter.

Chaining

Modifiers are chained: each function returns a new modifier, so you call one after another.

Modifier
    .padding(16.dp)
    .size(100.dp)
    .background(Color.LightGray)

Passing a Modifier

You pass the chain to the composable's modifier parameter.

Text(
    text = "Hello",
    modifier = Modifier
        .padding(8.dp)
        .background(Color.Yellow)
)

Order Matters!

The order of modifiers changes the result. Modifiers apply left to right, wrapping each other like layers.

padding then background

Here padding is applied first, so the background fills only the inner area — leaving the padded space transparent.

Modifier
    .padding(16.dp)
    .background(Color.Red)

background then padding

Swap them and the background now covers the full area, with padding pushing content inward. Same modifiers, different look — because order matters.

Modifier
    .background(Color.Red)
    .padding(16.dp)

Common Size Modifiers

Frequently used sizing modifiers:

size(100.dp) — fixed width and height.
fillMaxWidth() — take all horizontal space.
fillMaxSize() — take all available space.
width() / height() — set one dimension.

Clickable

Modifier.clickable makes any composable respond to taps — even a plain Text or Box.

Text(
    text = "Tap me",
    modifier = Modifier.clickable { /* handle */ }
)

Reusing a Modifier Parameter

By convention, custom composables accept a modifier: Modifier = Modifier parameter and pass it to their root element. This lets callers customize layout from outside.

@Composable
fun Card(modifier: Modifier = Modifier) {
    Column(modifier = modifier) { /* ... */ }
}

Modifier Is the First Param

Convention: the modifier parameter comes first among optional parameters and defaults to the empty Modifier. This keeps your API consistent with the standard library.

Putting It Together

A styled box using a chain where order is deliberate.

Box(
    modifier = Modifier
        .size(120.dp)
        .background(Color(0xFFE86F00))
        .padding(12.dp)
) {
    Text(text = "Compose", color = Color.White)
}

Quick Check

Why does Modifier.padding(16.dp).background(Color.Red) look different from Modifier.background(Color.Red).padding(16.dp)?

Answer it in the interactive lesson

Recap

Modifiers:

Configure size, padding, background, clicks, and more.
Are chained and apply in order — order matters.
Custom composables should expose a modifier: Modifier = Modifier first param.

Free to start

Learn Kotlin with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 36
Lessons: 152

Start learning free View the full course

Frequently Asked Questions

Is the “The Modifier System” lesson free?

Yes — any 3 lessons of the Android Academy learning path, including “The Modifier System”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Android Academy course includes 4 lessons in total.

What will I learn in “The Modifier System”?

Size, pad, and style with modifiers. You practise Android Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Android Academy?

No prior experience is required. Android Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

How long does the “The Modifier System” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Android Academy lesson?

Yes. Every Android Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Android Academy