Jetpack Compose Cheat Sheet

Updated 2026-03-17

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

What This Cheat Sheet Covers

This topic spans 25 focused tables and 163 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 and DisplayTable 22: Preview and ToolingTable 23: Dependency InjectionTable 24: Pager and CarouselsTable 25: Accompanist Libraries (Legacy)

Table 1: Composable Fundamentals

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

Table 1: Composable Fundamentals

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