Jetpack Compose Cheat Sheet

Updated 2026-05-25

Next Topic: Kotlin Multiplatform for Mobile Cheat Sheet

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. 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

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.

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.