remember and mutableStateOf in Android Kotlin - Mini App: Build & Ship

Build: Counter Screen

A simple screen that shows a number and a button to increase it. The number remembers its value even if the screen recomposes.

Target UI

-------------------
|   Counter: 0    |
|                 |
|  [ Increase ]   |
-------------------

Display a number starting at 0

Add a button labeled 'Increase'

When the button is tapped, increase the number by 1

Use remember and mutableStateOf to keep the number state

The number should update on the screen immediately after tapping

Starter Code

Android Kotlin

import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CounterScreen() {
    // TODO: Add state variable here

    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Counter: 0", style = MaterialTheme.typography.headlineMedium)
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { /* TODO: Increase counter */ }) {
            Text("Increase")
        }
    }
}

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

Task 1

Task 2

Task 3

Solution

Android Kotlin

import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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

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

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

We use remember with mutableStateOf to create a state variable counter that survives recompositions of the CounterScreen composable. The by keyword with var counter allows us to read and write the state value directly.

The Text composable shows the current value of counter. When the Button is clicked, we increase counter by 1. Because counter is a state, Compose automatically updates the UI to show the new value.

This pattern is common in Jetpack Compose to keep UI state simple and reactive.

Final Result

Completed Screen

-------------------
|   Counter: 0    |
|                 |
|  [ Increase ]   |
-------------------

Tapping the 'Increase' button increments the number shown after 'Counter:' by 1 immediately.

Stretch Goal

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

💡 Hint

Add another Button below the 'Increase' button with onClick setting counter = 0