Lesson 7 of 8

Your First Android Screen

Build a simple counter app with Jetpack Compose, Android's UI toolkit. You describe the screen with Kotlin and it redraws when state changes.

Kotlin

// In Android Studio: New Project -> Empty Activity (Compose)
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CounterScreen()
        }
    }
}

@Composable
fun CounterScreen() {
    // remember + mutableStateOf = state that survives redraws.
    // When 'count' changes, Compose re-runs this function.
    var count by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text("Count: $count", fontSize = 32.sp)
        Spacer(Modifier.height(16.dp))
        Button(onClick = { count++ }) {
            Text("Tap me")
        }
    }
}

This is declarative UI: you never say 'find the text view and update it' — you describe what the screen looks like for a given state, change the state, and the framework handles the rest. Same mental model as React, in pure Kotlin.

Kotlin

// Lists — the RecyclerView replacement:
@Composable
fun StudentList(students: List<Student>) {
    LazyColumn {
        items(students) { student ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
            ) {
                Text(student.name)
                Text("${student.grade}%")
            }
        }
    }
}

// LazyColumn only composes the rows on screen —
// a 10,000-item list scrolls smoothly.

Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.