Skip to content

Intermediate: Android basics · Jetpack Compose UI · topic 24 of 50 · 30 min

Layouts: Column, Row, Box and Scaffold

Explanation

Column stacks children vertically, Row places them horizontally, and Box layers them on top of each other. Arrangement controls spacing along the main direction and Alignment positions children across it. weight shares leftover space. Scaffold gives a standard screen frame with a top bar, bottom bar, floating action button and correct padding.

The three basic layouts

LayoutPlaces childrenExample use
ColumnOne below anotherA form, a profile page
RowSide by sideAn icon next to text, buttons in a line
BoxOn top of each otherA badge on an icon, text over an image
kotlin
@Composable
fun OrderSummary() {
    Column(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalAlignment = Alignment.Start,
    ) {
        Text("Order #4521", style = MaterialTheme.typography.titleLarge)
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            Text("Paneer butter masala")
            Text("Rs 240")
        }
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            Text("2 x Butter naan")
            Text("Rs 80")
        }
    }
}
Arrangement.SpaceBetween pushes the name to the left and the price to the right.

Arrangement and Alignment

Each layout has a main axis (the direction it places children) and a cross axis. For a Column, the main axis is vertical; for a Row, horizontal. Arrangement decides spacing along the main axis: Top/Start, Center, Bottom/End, SpaceBetween, SpaceEvenly, SpaceAround, or spacedBy(8.dp). Alignment decides position along the cross axis: Start, CenterHorizontally, End for a Column; Top, CenterVertically, Bottom for a Row.

Each child also decides its own size with modifiers. Without size modifiers, a child takes only the space its content needs ("wrap content"). fillMaxWidth() makes it as wide as its parent allows, and fillMaxSize() fills both directions. Most layout puzzles are solved by combining these with Arrangement and Alignment.

weight: sharing space

kotlin
Row(Modifier.fillMaxWidth()) {
    Text("Search results for chai", Modifier.weight(1f))   // takes all leftover space
    TextButton(onClick = { }) { Text("Filter") }            // keeps its natural size
}

Row(Modifier.fillMaxWidth()) {
    Button(onClick = { }, Modifier.weight(1f)) { Text("Cancel") }
    Button(onClick = { }, Modifier.weight(1f)) { Text("Pay") }   // two equal halves
}
weight is available inside Row and Column. Equal weights share space equally.

Box: layering

kotlin
Box {
    Icon(Icons.Default.ShoppingCart, contentDescription = "Cart", Modifier.size(32.dp))
    Text(
        "3",
        Modifier.align(Alignment.TopEnd)
            .background(Color.Red, CircleShape)
            .padding(horizontal = 6.dp),
        color = Color.White,
    )
}
The count badge sits on top of the cart icon, in the top-right corner. Material 3 also offers a ready BadgedBox.

Scaffold: a full screen frame

Most screens share the same frame: a top app bar, content, maybe a bottom navigation bar and a floating action button (FAB). Scaffold places these Material 3 slots correctly and gives you innerPadding so content is not hidden behind the bars.

kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun NotesScreen() {
    Scaffold(
        topBar = { TopAppBar(title = { Text("My notes") }) },
        floatingActionButton = {
            FloatingActionButton(onClick = { }) { Icon(Icons.Default.Add, contentDescription = "New note") }
        },
    ) { innerPadding ->
        Column(Modifier.padding(innerPadding).padding(16.dp)) {
            Text("No notes yet")
        }
    }
}
Always apply innerPadding to the content. Some Material 3 components may need an opt-in annotation depending on the library version.

Card and Surface are also handy containers: a Card gives a rounded, slightly raised panel for grouping related content; Surface gives a background colour and shape from the theme.

Think of it like this: Column is a stack of plates, Row is people standing in a line, and Box is a pile of photos on a table where the last one is on top. Scaffold is the frame of a shop: signboard at the top, counter in the middle, and the "call for help" bell in the corner.

Common mistakes

  • Forgetting to apply innerPadding from Scaffold: content hides under the top bar.
  • Using Spacer with fixed sizes everywhere instead of Arrangement.spacedBy.
  • Expecting weight to work in a Box. It only exists in Row and Column scopes.
  • Deep nesting worries: in Compose, nesting layouts is cheap, unlike the old View system. Prefer clear code.

Need help?

Stuck on a word or an idea? Search this course, or every course, and jump straight to the explanation or a worked question.

Try:

Watch the lesson

Layouts: Column, Row, Box and Scaffold · 1/6

Column | Row | Box

Column stacks children vertically, Row places them side by side, and Box layers them.

Prefer a video by a teacher? Find free videos on “jetpack compose layouts column row box scaffold arrangement alignment” on YouTube ↗

In real life: A bank account summary screen

A banking app's home screen uses a Scaffold with a top bar showing the bank name, a Card with the balance laid out in a Column, a Row of three quick-action buttons sharing the width equally with weight, and a FAB for "Scan & Pay". The same few layouts, combined, produce a familiar professional screen.

kotlin
@Composable
fun QuickActions() {
    Row(Modifier.fillMaxWidth().padding(16.dp), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        listOf("Send", "Pay bills", "Recharge").forEach { label ->
            OutlinedButton(onClick = { }, modifier = Modifier.weight(1f)) { Text(label) }
        }
    }
}
Three equal buttons with 8 dp between them.

Practice (0/3 done)

Task 1 · Question

Which layout puts a "3" badge on top of a cart icon?

Task 2 · Question

Two buttons in a Row each have Modifier.weight(1f). How is the width shared?

Task 3 · Practice

Build a Scaffold screen for a movie ticket: a TopAppBar with the movie name, a Card with a Column of details (cinema, time, seats), a Row with two equal buttons (Cancel, Pay Rs 400) and a Box with a small "IMAX" label on top of a poster placeholder.

Quick quiz

Question 1

1.In a Column, what does verticalArrangement control?

Question 2

2.What is Scaffold's innerPadding for?

Question 3

3.Where can Modifier.weight be used?

Question 4

4.Is nesting Rows and Columns expensive in Compose?

Read more (free)

Before this, learn

This topic builds on these. If something here feels new, open them first.

Open a question to see the answer and why. The first ones are this topic's own quiz, so try the quiz above before you peek.

In a Column, what does verticalArrangement control?

Answer: Spacing along the vertical (main) axis

Arrangement works on the main axis.

What is Scaffold's innerPadding for?

Answer: Keeping content clear of the top bar, bottom bar and system bars

Apply it to the content.

Where can Modifier.weight be used?

Answer: Inside Row and Column

weight belongs to RowScope and ColumnScope.

Is nesting Rows and Columns expensive in Compose?

Answer: No, nesting is cheap; write clear code

Compose measures each child once.

What is the main axis of a Column?Related

Answer: Vertical

Columns lay out vertically.

From Row and Column

In a row, which property centres items vertically?Related

Answer: align-items

In a row the cross axis is vertical, and align-items works on the cross axis.

From Flexbox

Which property lets children draw outside the Stack's bounds?Related

Answer: clipBehavior: Clip.none

The default clips.

From Stack, Positioned and Align

Which property holds a list of widgets in a Column?Related

Answer: children

Column has children.

From Everything is a widget

Pass the quiz (60% or more) or mark this topic as done when you are ready.

Your progress is saved on this device only.

Next: Lists and grids →

Next steps

  1. 2 more topics in “Jetpack Compose UI” before its exam: Lists and grids, Text input and forms.
  2. Module 6 exam: Jetpack Compose UI · 13 questions · 25 min, without help. 5 topics of this module still to finish first.
  3. Then the next module, Navigation and app architecture. 50 topics left in the course before the final exam.

← Previous: State and recomposition