Derived state in Android Kotlin - Mini App: Build & Ship

Build: Derived State Example

This screen shows how to use derived state in Jetpack Compose to update UI based on user input.

Target UI

-------------------------
| Enter your name:       |
| [______________]       |
|                         |
| Greeting:               |
| Hello, [Name]!          |
-------------------------

Add a TextField for user to enter their name.

Use derived state to create a greeting message that updates as the user types.

Display the greeting message below the TextField.

Greeting should say 'Hello, [Name]!' or 'Hello!' if no name is entered.

Starter Code

Android Kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun DerivedStateScreen() {
    val name = remember { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "Enter your name:")
        TextField(
            value = name.value,
            onValueChange = { /* TODO: Update name state */ },
            modifier = Modifier.padding(vertical = 8.dp)
        )

        // TODO: Add derived state for greeting message

        // TODO: Display greeting message
    }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun DerivedStateScreen() {
    val name = remember { mutableStateOf("") }

    // Derived state for greeting message
    val greeting by remember {
        derivedStateOf {
            if (name.value.isNotBlank()) "Hello, ${name.value}!" else "Hello!"
        }
    }

    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "Enter your name:")
        TextField(
            value = name.value,
            onValueChange = { name.value = it },
            modifier = Modifier.padding(vertical = 8.dp)
        )

        Text(text = "Greeting:")
        Text(text = greeting, style = MaterialTheme.typography.bodyLarge)
    }
}

We use mutableStateOf to hold the user's input name. The derivedStateOf creates a new state that depends on name.value. It updates automatically when the name changes, producing a greeting message. This way, the UI updates efficiently only when the derived greeting changes. The greeting is shown below the TextField, showing 'Hello, [Name]!' if the user typed a name, or just 'Hello!' if empty.

Final Result

Completed Screen

-------------------------
| Enter your name:       |
| [John]                 |
|                         |
| Greeting:               |
| Hello, John!            |
-------------------------

User types their name in the TextField.

Greeting text updates live to say 'Hello, [Name]!'.

If TextField is empty, greeting shows 'Hello!'.

Stretch Goal

Add a clear button inside the TextField to erase the name quickly.

💡 Hint

Use the trailingIcon parameter of TextField with an IconButton that sets name.value to empty string.