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

Material 3 & Theming

June 02, 2026 • 1 min read

Compose ships with Material 3 components (Button, Card, TopAppBar, Scaffold...) and a theming system for colors, typography and shapes.

Scaffold — the screen skeleton

@Composable
fun HomeScreen() {
    Scaffold(
        topBar = { TopAppBar(title = { Text("Home") }) },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) { Icon(Icons.Default.Add, null) }
        }
    ) { padding ->
        Column(Modifier.padding(padding)) { /* content */ }
    }
}

Theming

MaterialTheme(
    colorScheme = lightColorScheme(primary = Color(0xFF0D6EFD)),
    typography = Typography()
) {
    // your app — components read these values automatically
}
Tip: Always pull colors from MaterialTheme.colorScheme and text styles from MaterialTheme.typography so dark mode and theming work everywhere.

Summary

Material 3 gives ready components and a theme. Use Scaffold for screen structure and read colors/typography from MaterialTheme for consistency.