Android Academy · Lesson

Spacing with Padding

Use Modifier for spacing.

Spacing with Padding is a free Android Academy lesson on CoddyKit — lesson 3 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 Padding?

Padding is empty space added around a composable's content. It pushes content away from the edges so things do not feel cramped.

In Compose you add padding through a Modifier.

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

The dp Unit

Padding sizes use dp, short for density-independent pixels. dp looks the same physical size on every screen.

Write a number then .dp, such as 8.dp or 24.dp.

Modifier.padding(8.dp)

What Is a Modifier?

A Modifier describes how a composable looks and behaves: its size, padding, background, and more.

You build modifiers by chaining functions together with dots.

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

Padding on All Sides

Calling padding(16.dp) with one value adds the same space on all four sides: top, bottom, start, and end.

This is the quickest way to give content breathing room.

Box(
    modifier = Modifier.padding(16.dp)
) {
    Text("Inside")
}

Horizontal and Vertical Padding

You can set sides separately with horizontal and vertical parameters.

Horizontal covers start and end; vertical covers top and bottom.

Modifier.padding(
    horizontal = 24.dp,
    vertical = 8.dp
)

Padding One Side

To target a single edge, name it: start, top, end, or bottom.

This lets you fine-tune spacing exactly where you need it.

Modifier.padding(
    start = 16.dp,
    top = 4.dp
)

Order Matters

Modifier order changes the result. Putting padding before a background leaves the padded area unpainted; after it, the background fills the padding.

Read modifiers top to bottom, like layers.

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

Spacing Between Items

Inside a Column or Row, use Arrangement.spacedBy to add equal gaps between children automatically.

This is cleaner than padding each child by hand.

Column(
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    Text("One")
    Text("Two")
}

Spacer for Gaps

A Spacer is an empty composable used to push items apart. Give it a size with a Modifier.

It is handy for a fixed gap between two elements.

Column {
    Text("Top")
    Spacer(Modifier.height(16.dp))
    Text("Bottom")
}

Padding vs Margin

Compose has no separate margin. You create outer space by placing padding earlier in the modifier chain, before size or background.

So a single tool, padding, handles both inner and outer spacing depending on order.

Modifier
    .padding(16.dp)
    .background(Color.LightGray)
    .padding(8.dp)

Consistent Spacing

Good apps use a few repeated values, like 4, 8, 16, and 24 dp. This keeps layouts neat and predictable.

Avoid random numbers; pick from a small scale.

Modifier.padding(16.dp)

Quick Check

Test your padding knowledge.

Recap

Padding adds space around content using Modifier.padding with dp values. You can pad all sides, horizontal/vertical, or single edges.

Modifier order matters, and Arrangement.spacedBy or Spacer handle gaps between items.

Next, you'll explore colors and MaterialTheme.

Frequently asked questions

Is the “Spacing with Padding” lesson free?

Yes — the full text of “Spacing with Padding” 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 “Spacing with Padding”?

Use Modifier for spacing. 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 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Spacing with Padding” 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