Stage 2 · Lesson 4 of 10
Row, Column and Box
A stacks children from top to bottom, a Row places them side by side and a Box layers them, like a badge on an avatar. verticalArrangement and horizontalArrangement control spacing along the main direction, including Arrangement.spacedBy(8.dp).
Alignment controls the other direction. Modifier.weight(1f) inside a Row or Column makes a child take the remaining space. That is how a title fills the space between an icon and a date.
Spacer adds fixed gaps. Use the Modifier.fillMaxWidth rather than fixed widths so the layout adapts.
Common trapputting a scrolling Column with verticalScroll around hundreds of items; long content belongs in a , covered next.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with
- CourseFreeAndroid Basics with Compose
Google · Beginner
Units 2 and 3: Compose layouts, state, scrollable lists and Material theming