Layouts in Compose (Row, Column, Box)

Most Compose screens are built from three layout primitives: Column, Row, and Box.

Use Column for vertical layouts, Row for horizontal layouts, and Box for stacking or alignment.

Column

Column places children from top to bottom.

Copy code@Composable
fun ProfileHeader() {
    Column {
        Text("Akshay")
        Text("Android Developer")
    }
}

Add spacing with modifiers.

Copy codeColumn(
    modifier = Modifier.padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("Junior Android Developer")
    Text("4 modules")
}

Row

Row places children from left to right.

Copy codeRow(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(12.dp)
) {
    Icon(Icons.Default.Check, contentDescription = null)
    Text("Lesson completed")
}

Rows are useful for list items, buttons with icons, chips, and toolbars.

Box

Box lets you align or stack content.

Copy codeBox(
    modifier = Modifier.size(80.dp),
    contentAlignment = Alignment.Center
) {
    CircularProgressIndicator()
    Text("75%")
}

Modifiers

Modifiers change size, padding, background, click behavior, and alignment.

Copy codeModifier
    .fillMaxWidth()
    .padding(16.dp)
    .background(Color.White)

Modifier order matters. Padding before background is different from background before padding.

Practice

Create a course card with:

• a title
• a subtitle
• a progress percentage
• a button

Use Column for the card, Row for the progress line, and Box to center the percentage.

Summary

Column, Row, and Box are enough to build many real screens. Learn them deeply before reaching for advanced layouts.