Build UI with composable functions.

Compose UI is written as Kotlin functions. A composable function describes what the UI should look like for the current data.

Think in a UI tree

If UI feels confusing, draw the tree. Ask: what contains what?

First composable

@Composable
fun HabitScreen() {
    Column {
        Text(text = "Today's habits")
        Button(onClick = { }) {
            Text(text = "Add habit")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun HabitScreenPreview() {
    HabitScreen()
}

Preview functions let you inspect UI without launching the full app every time. Use them constantly while learning.

Practice task

• Create a composable named ProfileCard.
• Show a name, role, and one button.
• Add a Preview function.
• Change text values and refresh the preview.

Reference: the official Compose tutorial introduces composable functions, Text, Preview, and layout hierarchy early.