Lesson 13: Building a Simple Interactive Screen (Counter App)

Building a Simple Interactive Screen (Counter App)

Let's combine everything from lessons 6–12 into one complete, working screen.

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "$count",
            fontSize = 48.sp,
            fontWeight = FontWeight.Bold
        )

        Spacer(modifier = Modifier.height(16.dp))

        Row {
            Button(onClick = { count-- }) {
                Text("−")
            }
            Spacer(modifier = Modifier.width(16.dp))
            Button(onClick = { count++ }) {
                Text("+")
            }
        }
    }
}

What's new here

• Spacer — an invisible element used purely for adding fixed space between other elements, instead of relying only on padding.
• horizontalAlignment = Alignment.CenterHorizontally — centers everything inside the Column.
• fillMaxSize() — makes the Column take up the entire screen, not just as much space as its content needs.

Wire it up

Replace the content of your setContent { } block in MainActivity with CounterScreen() and run it. Tap + and − and watch the number update instantly — this is recomposition happening in real time, exactly as described in lesson 12.

Try it yourself

Add a "Reset" button that sets count back to 0. Then try making the number turn red when it goes negative — you'll need an if expression inside the color parameter of Text.

Next: Lesson 14 — displaying scrollable lists with LazyColumn.