Layouts: Column, Row & Box

What you'll learn

A single Text is a start, but real screens arrange many composables. Compose gives you three fundamental layout composables — Column, Row, and Box — and almost every screen you'll ever build is some nesting of these three.

By the end you'll be able to:

• Stack composables vertically, horizontally, and on top of each other
• Control spacing with Arrangement and Alignment
• Distribute space with weight and Spacer
• Nest layouts to build a screen

Column, Row & Box

Each layout arranges its children differently:

You nest them to build anything: a Column for a screen, a Row inside it for a button bar, and so on. Here's a small profile block combining a Column and a Row:

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.spacedBy(8.dp),
) {
    Text("Profile", fontWeight = FontWeight.Bold)
    Text("Ada Lovelace")
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
        Text("Follow")
        Text("Message")
    }
}

Box is for layering — its children stack in the order written, so you can place text over an image or a badge in a corner:

Box(contentAlignment = Alignment.Center) {
    Image(painter = avatar, contentDescription = null)
    Text("Online", color = Color.White)   // drawn on top of the image
}

Arrangement & Alignment

Two properties position children within a layout — and the naming follows the layout's direction:

• Arrangement controls spacing along the main axis — vertical for a Column, horizontal for a Row. Options include Arrangement.Center, SpaceBetween, SpaceEvenly, and spacedBy(8.dp) for even gaps.
• Alignment controls the cross axis — so a Column takes horizontalAlignment and a Row takes verticalAlignment.

Spacer & weight

Two tools distribute space. A Spacer(Modifier.height(16.dp)) inserts a fixed gap. More powerfully, Modifier.weight(1f) on a child makes it expand to fill the remaining space — give two children weight(1f) each and they split the row equally, or put weight(1f) on a Spacer to push a button to the far end (like a toolbar).

Recap & quick check

You can lay out whole screens now. Next we bring them to life visually with images, icons, and resources.