Why state drives UI updates in Android Kotlin - Build It to Prove It

Build: Counter Screen

A simple screen that shows a number and a button. Each time the button is pressed, the number increases by one. The number on the screen updates automatically because it depends on the state.

Target UI

-------------------
|   Counter App   |
-------------------
|                 |
|       0         |
|                 |
|   [Increase]    |
-------------------

Display a number starting at 0

Show a button labeled 'Increase'

When the button is pressed, increase the number by 1

The displayed number updates automatically to show the new value

Starter Code

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      // TODO: Add your code here
    }
  }
}

@Composable
fun CounterScreen() {
  // TODO: Add your code here
}

@Preview(showBackground = true)
@Composable
fun CounterScreenPreview() {
  CounterScreen()
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      CounterScreen()
    }
  }
}

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

  Column(
    modifier = Modifier.fillMaxSize().padding(16.dp),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
  ) {
    Text(text = "$count", style = MaterialTheme.typography.displayLarge)
    Spacer(modifier = Modifier.height(24.dp))
    Button(onClick = { count++ }) {
      Text("Increase")
    }
  }
}

@Preview(showBackground = true)
@Composable
fun CounterScreenPreview() {
  CounterScreen()
}

This app uses a count variable to hold the current number. It is a mutableStateOf, which means Compose watches it for changes. When the button is clicked, count++ increases the number. Because count is state, Compose automatically redraws the Text showing the number. This shows how state drives UI updates: changing the state triggers the UI to update without extra code.

Final Result

Completed Screen

-------------------
|   Counter App   |
-------------------
|                 |
|       0         |
|                 |
|   [Increase]    |
-------------------

User taps the 'Increase' button

The number in the center increases by 1 each tap

The displayed number updates immediately after each tap

Stretch Goal

Add a 'Reset' button that sets the count back to 0

💡 Hint

Add another Button below 'Increase' with onClick setting count = 0