Column, Row and Box
Each row in Sprout's plant list has a photo, a name, a date, and a small "thirsty" badge on the photo's corner. Almost every screen you will ever build is some nesting of three layouts: Column, Row and Box.
The rule
Column goes down, Row goes across, Box stacks on top.
Columnplaces children one below another.Rowplaces children side by side.Boxplaces children on top of each other, like layers; later children are drawn above earlier ones.
Row(modifier = Modifier.padding(16.dp)) {
Box {
Image(painter = photo, contentDescription = plant.name)
ThirstyBadge(Modifier.align(Alignment.TopEnd))
}
Spacer(Modifier.width(12.dp))
Column {
Text(plant.name)
Text("Water on ${plant.nextDate}")
}
}Modifiers adjust any composable: size (fillMaxWidth(), size(48.dp)), spacing (padding), looks (background), behaviour (clickable). They are applied in order, so the order changes the result: padding then background leaves an uncoloured gap outside the colour, while background then padding colours the gap too.
Alignment comes from the parent: Column takes horizontalAlignment, Row takes verticalAlignment, and a child in a Box uses Modifier.align(...).
The shortcut
Read the design out loud: "X beside Y" means Row, "X above Y" means Column, "X on Y" means Box. Then nest from the outside in.
Outermost relation
Photo beside the text →
Row.
Drills
Answer fast — trust the rule.
Which layout places a label directly above a date?
You want a badge drawn on top of a photo. Which layout?
Inside a Box, how do you put one child in the top-right corner?
Why do Modifier.padding(8.dp).background(Green) and Modifier.background(Green).padding(8.dp) look different?
Remember
- Column goes down, Row goes across, Box stacks on top.
- Beside → Row, above → Column, on → Box; nest from outside in.
- Modifier order matters.