Arrange UI with layout and modifiers.

Most beginner Compose screens use a small toolkit: Column for vertical stacking, Row for horizontal layout, Box for layering, and Modifier for size, padding, background, and clicks.

Rendered screen target

Layout code

@Composable
fun HabitSummaryCard(done: Int, total: Int) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = "Progress")
            Text(text = "$done of $total habits complete")
            Button(onClick = { }) {
                Text("Add habit")
            }
        }
    }
}

Beginner rule: add one Modifier at a time and preview. Modifier chains are easier to learn when you see each effect.

Practice task

• Create a card with title, description, and button.
• Add padding around the card and inside the card.
• Use Row to place an icon placeholder next to text.
• Use Preview to compare before and after spacing.