Jetpack Compose Cheat Sheet

Updated 2026-05-25

Next Topic: Kotlin Multiplatform for Mobile Cheat Sheet

🧠Study flashcards on this topic180 cards · spaced repetition→

Jetpack Compose is Google's modern declarative UI toolkit for Android that transforms how developers build native interfaces using pure Kotlin code instead of XML layouts. As the production standard for Android development — and declared Compose-first by Google in May 2026 — Compose enables reactive UIs where changes to state automatically trigger recomposition, updating only the necessary parts of the screen. The composable function paradigm (marked with @Composable) treats UI components as functions of state, making interfaces predictable, testable, and significantly easier to maintain. Understanding recomposition, state management, and modifier chains is essential — these concepts form the foundation of every Compose application and directly impact both developer productivity and runtime performance. The current stable BOM is 2026.04.01 (Compose 1.11).

What This Cheat Sheet Covers

This topic spans 25 focused tables and 198 indexed concepts, 180 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Composable FundamentalsTable 2: State ManagementTable 3: Layout ComposablesTable 4: Modifier SystemTable 5: Material Design 3 ComponentsTable 6: Theming and StylingTable 7: Text HandlingTable 8: Images and IconsTable 9: NavigationTable 10: Side EffectsTable 11: Gestures and TouchTable 12: AnimationTable 13: Dialogs and PopupsTable 14: Performance and OptimizationTable 15: Custom LayoutsTable 16: Drawing and GraphicsTable 17: TestingTable 18: InteroperabilityTable 19: AccessibilityTable 20: Advanced State PatternsTable 21: Window, Display, and Adaptive LayoutsTable 22: Preview and ToolingTable 23: Dependency InjectionTable 24: Pager and CarouselsTable 25: Permissions

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

Table 1: Composable Fundamentals

The composable function model and recomposition lifecycle are the core mental models every Compose developer must internalize first — everything else builds on these foundations.

Concept	Example	Description
@Composable annotation	`@Composable` `fun Greeting(name: String) {` `Text("Hello $name")` `}`	• Marks a function as composable, enabling it to emit UI and participate in recomposition • can only be called from other composable functions or composition contexts.
Recomposition	`var count by remember { mutableStateOf(0) }` `Text("Count: $count")`	• Process where Compose re-executes composables when state changes • skips stable composables whose inputs haven't changed for performance.
remember	`val scrollState = rememberScrollState()`	• Caches a value across recompositions • value is lost on configuration changes like rotation — use `rememberSaveable` for persistence.
mutableStateOf	`var text by remember { mutableStateOf("") }`	• Creates an observable state holder • changes to the value trigger recomposition of composables reading it.
rememberSaveable	`var input by rememberSaveable { mutableStateOf("") }`	Like `remember` but survives configuration changes and process death by serializing values to a `Bundle`.
State hoisting	`TextField(value = text,` `onValueChange = { text = it })`	• Pattern of moving state up to a caller to make composables stateless and reusable • state lives in parent, child receives value and callbacks.
mutableIntStateOf	`var count by remember { mutableIntStateOf(0) }`	Optimized observable state for `Int` values — avoids boxing overhead compared to `mutableStateOf<Int>(0)`.
key	`key(item.id) {` `ItemRow(item)` `}`	• Provides stable identity to composables • essential in lists to preserve state and avoid UI bugs when items reorder.
Composition	`setContent {` `MyApp()` `}`	• Initial process where Compose builds the UI tree by executing composables • happens once when the app starts or when entering a composition scope.
Composition phases	Composition → Layout → Drawing	• Three-phase rendering: Composition (what to show), Layout (where to place), Drawing (how to render) • understanding phases is critical for performance.
Skipping	Automatic with stable inputs	Compose skips recomposition of a composable if all its parameters are equal to the previous composition, dramatically improving performance.

Table 2: State Management

Choosing the right state tool — from remember to ViewModel — determines correctness, testability, and recomposition efficiency across the app's lifecycle.

Technique	Example	Description
collectAsStateWithLifecycle	`val items by viewModel.items.collectAsStateWithLifecycle()`	• Collects a Flow as Compose State while respecting the lifecycle — stops collection when app is backgrounded • preferred over `collectAsState` for most production use.

The rest of this section is part of the full cheat sheet

Table 3: Layout Composables

Compose's layout system favors composition over inheritance — combining Row, Column, Box, and lazy variants handles nearly every UI pattern, with ConstraintLayout for the rare cases requiring relative positioning.

Component	Example	Description
Column	`Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {` `Text("Item 1")` `Text("Item 2")` `}`	• Arranges children vertically • use `verticalArrangement` for spacing and `horizontalAlignment` for cross-axis positioning

The rest of this section is part of the full cheat sheet

Table 4: Modifier System

Modifiers are applied left-to-right and their order is semantically significant — padding before background creates outer space; after background it creates inner padding. Always apply modifiers in the order that matches the visual result you intend.

Modifier	Example	Description
Modifier.padding	`Modifier.padding(16.dp)` `Modifier.padding(horizontal = 20.dp, vertical = 8.dp)`	• Adds space around content • order matters — padding before background creates outer space, after creates inner padding.

The rest of this section is part of the full cheat sheet

Table 1: Composable Fundamentals

The composable function model and recomposition lifecycle are the core mental models every Compose developer must internalize first — everything else builds on these foundations.

Concept	Example	Description
@Composable annotation	`@Composable` `fun Greeting(name: String) {` `Text("Hello $name")` `}`	• Marks a function as composable, enabling it to emit UI and participate in recomposition • can only be called from other composable functions or composition contexts.
Recomposition	`var count by remember { mutableStateOf(0) }` `Text("Count: $count")`	• Process where Compose re-executes composables when state changes • skips stable composables whose inputs haven't changed for performance.
remember	`val scrollState = rememberScrollState()`	• Caches a value across recompositions • value is lost on configuration changes like rotation — use `rememberSaveable` for persistence.
mutableStateOf	`var text by remember { mutableStateOf("") }`	• Creates an observable state holder • changes to the value trigger recomposition of composables reading it.
rememberSaveable	`var input by rememberSaveable { mutableStateOf("") }`	Like `remember` but survives configuration changes and process death by serializing values to a `Bundle`.
State hoisting	`TextField(value = text,` `onValueChange = { text = it })`	• Pattern of moving state up to a caller to make composables stateless and reusable • state lives in parent, child receives value and callbacks.
mutableIntStateOf	`var count by remember { mutableIntStateOf(0) }`	Optimized observable state for `Int` values — avoids boxing overhead compared to `mutableStateOf<Int>(0)`.
key	`key(item.id) {` `ItemRow(item)` `}`	• Provides stable identity to composables • essential in lists to preserve state and avoid UI bugs when items reorder.
Composition	`setContent {` `MyApp()` `}`	• Initial process where Compose builds the UI tree by executing composables • happens once when the app starts or when entering a composition scope.
Composition phases	Composition → Layout → Drawing	• Three-phase rendering: Composition (what to show), Layout (where to place), Drawing (how to render) • understanding phases is critical for performance.
Skipping	Automatic with stable inputs	Compose skips recomposition of a composable if all its parameters are equal to the previous composition, dramatically improving performance.

Table 2: State Management

Choosing the right state tool — from remember to ViewModel — determines correctness, testability, and recomposition efficiency across the app's lifecycle.

Technique	Example	Description
collectAsStateWithLifecycle	`val items by viewModel.items.collectAsStateWithLifecycle()`	• Collects a Flow as Compose State while respecting the lifecycle — stops collection when app is backgrounded • preferred over `collectAsState` for most production use.

Table 3: Layout Composables

Component	Example	Description
Column	`Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {` `Text("Item 1")` `Text("Item 2")` `}`	• Arranges children vertically • use `verticalArrangement` for spacing and `horizontalAlignment` for cross-axis positioning

Table 4: Modifier System

Modifier	Example	Description
Modifier.padding	`Modifier.padding(16.dp)` `Modifier.padding(horizontal = 20.dp, vertical = 8.dp)`	• Adds space around content • order matters — padding before background creates outer space, after creates inner padding.