Build a Tap Counter
Wire state to a button for live updates.
Build a Tap Counter is a free Jetpack Compose Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Our Goal
Let's build a tiny tap counter: a number on screen and a button that increases it with every tap. 🙂
Start With the State
First declare the state that will change. The counter starts at zero and lives inside the Composable for now.
var count by remember { mutableStateOf(0) }Show the Count
Read the state in a Text so it always displays the current value. Reading it here subscribes the Text to changes.
Text("Count: " + count)Add the Button
A Button needs an onClick action. Inside it we will change the state, which is what makes the UI react.
Button(onClick = { }) {
Text("Tap me")
}Increment on Tap
In onClick, bump the counter. Changing the state tells Compose to recompose anything that reads count.
Button(onClick = { count++ }) {
Text("Tap me")
}Stack Them in a Column
Place the text above the button using a Column, which lays out its children vertically, top to bottom.
Column {
Text("Count: " + count)
Button(onClick = { count++ }) { Text("Tap me") }
}How the Loop Works
Tap fires onClick, count changes, Compose recomposes the Text, and you instantly see the new number. That is the full cycle.
Add a Reset Button
Want a fresh start? Add a second button whose onClick sets count back to zero. Reset is just another state change.
Button(onClick = { count = 0 }) {
Text("Reset")
}React to the Value
Because the UI is a function of state, you can style it from count, like showing a message once it passes ten taps.
if (count > 10) Text("Wow, keep going!")Wrap It in a Function
Put everything in a reusable Composable named TapCounter. Now you can drop your counter anywhere in the app.
@Composable
fun TapCounter() {
var count by remember { mutableStateOf(0) }
}You Built Interactivity
That simple loop of state to UI to event to state is the heart of every interactive Compose screen you will ever write.
Quick Check
What makes the displayed number update after a tap?
Recap
You wired state to a Text and a Button to build a live tap counter, your first truly interactive Compose screen. Great work! 🎉
Frequently asked questions
Is the “Build a Tap Counter” lesson free?
Yes — the full text of “Build a Tap Counter” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “Build a Tap Counter”?
Wire state to a button for live updates. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Build a Tap Counter” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.