0Pricing
Android Academy · Lesson

The Modifier System

Size, pad, and style with modifiers.

The Modifier System is a free Android Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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)?

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.

Frequently asked questions

Is the “The Modifier System” lesson free?

Yes — the full text of “The Modifier System” is free to read here on the web, and the Android Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Android Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

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

  1. Column, Row, and Box
  2. The Modifier System
  3. Alignment and Arrangement
  4. Lists with LazyColumn
← Back to Android Academy