Jetpack Compose
Android Development
UI Design
Margins
Mobile App Development

How can I add Margin in Jetpack Compose?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

Jetpack Compose does not have a direct margin modifier like the old Android view system. In Compose, spacing is usually expressed by padding on the parent or child, by layout arrangement, or by Spacer composables depending on what kind of gap you want.

Why There Is No Margin Modifier

In the classic view system, margin was a layout parameter owned by the parent. Compose keeps layout rules more explicit and pushes spacing decisions into modifiers and container layout logic.

That means when you ask for "margin" in Compose, you usually mean one of these:

  • space around a composable relative to its parent
  • space between siblings
  • extra outer spacing inside a container

The solution depends on which one you mean.

Use Modifier.padding() For Outer Space

For most everyday cases, Modifier.padding() gives the effect people expect from margin.

kotlin
1@Composable
2fun MarginLikeCard() {
3    Text(
4        text = "Hello Compose",
5        modifier = Modifier.padding(16.dp)
6    )
7}

This adds space outside the Text relative to the parent layout's measurement. In practice, that is the Compose equivalent of a simple margin request.

You can also target individual sides:

kotlin
Modifier.padding(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp)

Use Parent Padding When The Whole Section Needs Inset

If multiple children should all be inset together, put the padding on the parent instead of repeating it on every child.

kotlin
1@Composable
2fun ScreenContent() {
3    Column(
4        modifier = Modifier
5            .fillMaxSize()
6            .padding(16.dp)
7    ) {
8        Text("Title")
9        Text("Subtitle")
10    }
11}

This is often cleaner than applying separate margin-like padding to each child.

Use Arrangement Or Spacer Between Siblings

If the real goal is space between items, use the layout container's arrangement or a Spacer.

kotlin
1@Composable
2fun SpacedColumn() {
3    Column(
4        verticalArrangement = Arrangement.spacedBy(12.dp)
5    ) {
6        Text("Name")
7        Text("Email")
8        Text("Phone")
9    }
10}

Or:

kotlin
1Column {
2    Text("Name")
3    Spacer(modifier = Modifier.height(12.dp))
4    Text("Email")
5}

This is better than faking every gap with unrelated padding when the spacing is really between siblings.

Be Careful With offset

Some developers try Modifier.offset() as a margin substitute. That usually causes confusion because offset moves the drawing position but does not reserve layout space in the same way.

kotlin
Modifier.offset(x = 16.dp)

Use offset for deliberate positional adjustments, not for ordinary layout spacing.

Compose Example With A Card

Here is a realistic pattern:

kotlin
1@Composable
2fun ProfileCard() {
3    Card(
4        modifier = Modifier
5            .fillMaxWidth()
6            .padding(horizontal = 16.dp, vertical = 8.dp)
7    ) {
8        Column(modifier = Modifier.padding(16.dp)) {
9            Text("Ada Lovelace")
10            Text("Engineer")
11        }
12    }
13}

Notice the distinction:

  • outer padding on the Card acts like margin relative to neighboring content
  • inner padding inside the Card creates content inset

That separation is one of the most useful Compose layout habits to learn.

A Good Rule Of Thumb

Ask yourself who owns the space:

  • if the child needs breathing room relative to the parent, use padding on the child
  • if the whole group needs inset, use padding on the parent
  • if siblings need uniform gaps, use Arrangement.spacedBy
  • if one-off vertical or horizontal gaps are needed, use Spacer

Once you think in those terms, the lack of a dedicated margin API stops being a problem.

Common Pitfalls

  • Looking for a literal margin modifier that does not exist in Compose.
  • Using offset when the goal is layout spacing.
  • Adding repeated child padding when parent padding would express the layout more clearly.
  • Using padding to create sibling gaps when Arrangement.spacedBy is the cleaner tool.
  • Forgetting the difference between outer spacing and inner content padding.

Summary

  • Jetpack Compose has no dedicated margin modifier.
  • 'Modifier.padding() is the usual margin-like solution for outer space around a composable.'
  • Use parent padding for section inset and Arrangement.spacedBy or Spacer for gaps between siblings.
  • Use offset only for positional adjustment, not ordinary margin behavior.
  • Think in terms of which layout element owns the spacing rather than trying to copy XML margin rules exactly.

Course illustration
Course illustration

All Rights Reserved.