Android Academy · Lesson

Spacing with Padding

Use Modifier for spacing.

Lesson 3 of 413 steps

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

Answer it in the interactive lesson

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.

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 “Spacing with Padding” lesson free?

Yes — any 3 lessons of the Android Academy learning path, including “Spacing with Padding”, 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 “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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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