Jetpack Compose Tutorial

Introduction to Jetpack Compose Composable Functions & Preview Key Concepts State & remember Introduction Layouts: Column, Row & Box Modifiers Lists with LazyColumn State Hoisting & ViewModel Navigation in Compose Material 3 & Theming Side Effects (LaunchedEffect & more) Networking & Loading State in Compose Animations in Compose

Layouts: Column, Row & Box

June 02, 2026 • 1 min read

Compose has three core layout composables: Column (vertical), Row (horizontal) and Box (overlapping/stacked).

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalAlignment = Alignment.Start
) {
    Text("Title", style = MaterialTheme.typography.titleLarge)
    Row(verticalAlignment = Alignment.CenterVertically) {
        Icon(Icons.Default.Star, contentDescription = null)
        Spacer(Modifier.width(4.dp))
        Text("4.8")
        Spacer(Modifier.weight(1f))   // pushes price to the end
        Text("\u20B9499")
    }
}
  • Arrangement controls spacing along the main axis.
  • Alignment controls the cross axis.
  • Spacer(Modifier.weight(1f)) fills leftover space.
  • Box stacks children; use Modifier.align() to position them.
Tip: Most screens are just nested Columns and Rows — combine them freely.

Summary

Column, Row and Box are the building blocks of Compose layout. Control spacing with Arrangement/Alignment and fill space with weight.