Layouts: Column, Row & Box

The three core layouts

• Column — stacks children top to bottom.
• Row — places children left to right.
• Box — stacks children on top of each other (for overlays).

Column

Column(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),   // gap between children
    horizontalAlignment = Alignment.CenterHorizontally  // center each child
) {
    Text("Title", style = MaterialTheme.typography.titleLarge)
    Text("Subtitle")
    Button(onClick = {}) { Text("Continue") }
}

verticalArrangement controls spacing along the main axis; horizontalAlignment controls the cross axis.

Row

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier.fillMaxWidth()
) {
    Text("Price")
    Text("$49")
}

Box for layering

Box {
    Image(painter = bannerPainter, contentDescription = null)
    Text(
        "NEW",
        modifier = Modifier
            .align(Alignment.BottomEnd)
            .padding(8.dp)
            .background(Color.Black.copy(alpha = 0.6f))
            .padding(horizontal = 6.dp),
        color = Color.White
    )
}

Sharing space with weight

Row {
    Box(Modifier.weight(2f)) { /* takes 2/3 */ }
    Box(Modifier.weight(1f)) { /* takes 1/3 */ }
}

Use Spacer(Modifier.weight(1f)) to push items apart, or Spacer(Modifier.height(8.dp)) for fixed gaps.

Common mistakes

• Forgetting fillMaxWidth()/fillMaxSize() when a layout should fill the screen.
• Confusing arrangement (spacing along the main axis) with alignment (the cross axis).
• Nesting deeply when weight or Arrangement.spacedBy would be cleaner.

Summary: Column stacks vertically, Row horizontally, Box layers. Control the main axis with Arrangement, the cross axis with Alignment, and share space with weight.