Jetpack Compose Tutorial

Introduction to Jetpack Compose Composable Functions & Preview Key Concepts State & remember Introduction Layouts: Column, Row & Box Modifiers Lists with LazyColumn State Hoisting & ViewModel Navigation in Compose Material 3 & Theming Side Effects (LaunchedEffect & more) Networking & Loading State in Compose Animations in Compose

Composable Functions & Preview

June 02, 2026 • 1 min read

You build screens by combining small composable functions — each one a reusable piece of UI. The @Preview annotation lets you see them in Android Studio without running the app.

Composing functions together

@Composable
fun ProfileCard(name: String, role: String) {
    Column {
        Text(name, style = MaterialTheme.typography.titleMedium)
        Text(role, style = MaterialTheme.typography.bodyMedium)
    }
}

@Composable
fun Screen() {
    Column {
        ProfileCard("Anand", "Mobile Lead")
        ProfileCard("Asha", "Designer")
    }
}

Instant previews

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    MaterialTheme { ProfileCard("Anand", "Mobile Lead") }
}
  • Preview functions take no parameters and are only for the IDE.
  • You can preview light/dark, different font sizes and device sizes.
  • Keep composables small and focused — they're easier to preview, reuse and test.
Tip: Pass data into composables as parameters and keep them "dumb" — this makes them reusable and previewable.

Summary

Build UI from small composables and use @Preview to iterate instantly inside Android Studio without launching the app.