Knowledge Map
Jetpack Compose
Every keyword from zero to runtime internals — with a plain-English sentence on what each one actually does in Compose.
225
Concepts
24
Groups
86
Must-know
Fundamental
Core mental model, state, layouts, modifiers & theming@Composable
The magic label that tells Kotlin "this function draws UI" — without it, Compose won't track or render it.
Declarative UI
You describe what the screen should look like for a given state, and Compose figures out how to draw it.
Composition Tree
The invisible family tree of all your UI components that Compose builds, stores, and continuously updates.
Recomposition
When your data changes, Compose re-runs only the affected functions to refresh exactly that part of the screen.
Idempotency
Running the same composable twice with the same inputs must always produce the same UI — no surprises.
Composable Lifecycle
The three stages every composable goes through: entering the tree, staying in it, and finally leaving.
Positional Memoization
Compose remembers values by where they sit in the code tree, not just what they are — that's how remember works.
Pure Composables
Composables that only use their inputs to draw UI, with no hidden side effects like network calls or logging.
Slot API
A pattern to pass composable UI as a parameter — like a placeholder hole you fill with any content you want.
mutableStateOf()
Creates a value that, when changed, automatically tells Compose to redraw anything that reads it.
remember {}
Tells Compose to hold onto a value across recompositions instead of recreating it from scratch each time.
State<T>
A read-only wrapper around a value that Compose actively watches — you can read but not change it directly.
MutableState<T>
A read-write version of State — you can both observe the value and update it to trigger redraws.
State Hoisting
Moving state up to a parent composable so multiple children can all share and react to the same data.
UDF (Unidirectional Data Flow)
Data flows down from ViewModel to UI; user events flow back up — keeps your app predictable and testable.
collectAsState()
Converts a Kotlin Flow into Compose-readable State so the UI automatically reacts when new values stream in.
LiveData.observeAsState()
Bridges the old LiveData world with Compose's state system so existing ViewModels still work.
Box
Stacks children on top of each other like layers of paper — great for overlapping UI elements.
Row
Places children side by side horizontally — think a toolbar or a row of chips.
Column
Stacks children vertically one after another — the most common layout for screens.
Arrangement
Controls how children are spaced inside a Row or Column — start, center, space-between, etc.
Alignment
Controls where a child sits within its parent — top, center, bottom, start, or end.
Layout Phases
Compose processes your UI in three sequential steps every frame: compose, then layout, then draw.
Composition → Layout → Draw
The exact order Compose runs — functions first, sizing second, pixels last. Never goes backward.
Modifier chain
A series of decorators you dot-chain onto a composable to control its size, color, click behavior, and more.
padding
Adds empty breathing space around or inside a composable so it doesn't feel cramped against its neighbors.
fillMaxSize
Tells a composable to stretch and fill all available space given by its parent.
clip
Cuts the composable into a specific shape — rounds corners, makes circles, or any custom shape.
alpha
Controls how see-through a composable appears — 0 is invisible, 1 is fully opaque.
clickable
Makes any composable respond to taps with a built-in ripple effect and an onClick lambda.
background
Paints a color or shape behind a composable — the Compose equivalent of a View's background attribute.
zIndex
Decides which composable appears on top when siblings overlap — higher number wins.
Text
The standard composable for showing any string on screen with Material styling applied automatically.
BasicText
The bare-bones text composable with no Material opinions — use it when building a custom design system.
AnnotatedString
A string that carries different visual styles (bold, color) for different character ranges — like HTML spans.
buildAnnotatedString
A builder block for constructing styled, mixed-format text programmatically in a clean DSL style.
SpanStyle
Defines character-level styling (color, font size, weight) applied to a specific range of an AnnotatedString.
ParagraphStyle
Controls paragraph-level formatting like text alignment and line height for a range of text.
TextOverflow
Decides what happens when text is too long for its space — clip it, add "…", or let it overflow visibly.
TextAlign
Sets whether text sits flush left, centered, flush right, or justified within its measured width.
SelectionContainer
Wraps text so users can long-press and drag to select characters for copying — disabled by default in Compose.
MaterialTheme
The central provider that hands your colors, typography, and shapes down to every composable in the tree.
ColorScheme
The full named palette (primary, surface, error, etc.) your app consistently uses across every screen.
Typography
The set of predefined text styles (headlineLarge, bodyMedium, etc.) so text looks consistent app-wide.
Shapes
Defines corner rounding values used for buttons, cards, and dialogs to keep your UI visually consistent.
darkColorScheme
A color palette specifically tuned for dark backgrounds — provided to MaterialTheme in dark mode.
lightColorScheme
A color palette for light backgrounds — the default scheme most apps start with.
isSystemInDarkTheme()
A composable that returns true if the user's device is currently set to dark mode — use it to swap schemes.
LocalTextStyle
The text style silently inherited from the nearest parent — Text composables read this automatically.
LocalContentColor
The content color (for icons and text) that composables inherit from their parent container automatically.
Intermediate
Side effects, navigation, animations, architecture & real-world patternsderivedStateOf()
Computes a value from other states but only triggers recomposition when the computed result actually changes.
rememberSaveable
Like remember, but your value survives screen rotation and even the app being killed by the OS.
CompositionLocal
A way to silently pass data down the whole tree without threading it through every composable's parameters.
compositionLocalOf()
Creates a CompositionLocal whose value change triggers recomposition only in composables that read it.
staticCompositionLocalOf()
Like compositionLocalOf but assumes the value rarely changes — changing it recomposes the entire subtree.
collectAsStateWithLifecycle()
Like collectAsState but smartly pauses Flow collection when the app goes to the background to save resources.
snapshotFlow {}
Converts Compose mutable state into a regular Kotlin Flow so you can apply operators like debounce or filter.
produceState {}
Converts any async data source — callbacks, coroutines, Flows — into a Compose State value.
Snapshot System
The under-the-hood engine that tracks which state objects are being read during composition for precise invalidation.
Global Snapshot
The single shared state view the whole app reads from by default unless you explicitly branch it.
LaunchedEffect
Runs a coroutine when a composable first appears (or when its key changes) — perfect for one-time data loads.
DisposableEffect
Sets something up when a composable appears and guarantees cleanup when it disappears — like registering a listener.
SideEffect
Runs a block of code after every successful recomposition to sync Compose state to non-Compose systems.
rememberCoroutineScope
Gives you a coroutine scope tied to the composable's lifetime — use it to launch coroutines from click handlers.
rememberUpdatedState
Captures the latest value inside a long-running effect without cancelling and restarting the whole effect.
Key-based restart
When you change LaunchedEffect's key, it cancels the running coroutine and starts fresh — intentional restart.
Effect Handlers
The family of APIs (LaunchedEffect, DisposableEffect, SideEffect) for controlled, safe side operations in Compose.
LazyColumn
A scrollable vertical list that only composes and renders items currently visible — essential for performance.
LazyRow
The horizontal version of LazyColumn — renders only the chips or cards currently on screen.
LazyVerticalGrid
A lazy grid of equal-height items arranged in columns — like a photo gallery that only renders what's visible.
LazyVerticalStaggeredGrid
A lazy grid where items can have different heights — creates a Pinterest-style masonry layout efficiently.
LazyListState
An object that tracks and exposes the scroll position of a lazy list so you can read or programmatically control it.
key {} in lazy
Assigns a stable identity to each list item so Compose animates item moves and reuses compositions correctly.
contentType
Hints to Compose which lazy items share the same structure so it can reuse their compositions more aggressively.
LazyListLayoutInfo
Exposes metadata about the list: which items are visible, their offsets, and total item count.
HorizontalPager
A swipeable page viewer that loads each page lazily — perfect for onboarding flows or image carousels.
PagerState
Holds the current page index and lets you programmatically snap or animate to any page in the pager.
Paging 3 integration
Connects Jetpack Paging to Compose so large datasets from a server load incrementally as the user scrolls.
LazyPagingItems
The Compose-friendly wrapper around a paged data stream that you hand directly to LazyColumn items.
NavHost
The container that hosts your navigation graph and displays whichever destination is currently on the back stack.
NavController
The object you call to navigate — go to a screen, pop back, or pass arguments between destinations.
rememberNavController
Creates a NavController that survives recompositions and is tied to the composable's lifetime.
composable() destination
Declares a named route in your NavHost and maps it to the composable that should be shown when navigated there.
NavBackStackEntry
Represents a single entry on the back stack — it carries the route arguments and has its own ViewModel scope.
NavArgument
Defines a typed parameter a destination expects when being navigated to — like an id or a name.
NavDeepLink
Maps a URL or Android intent to a specific screen so external apps or notifications can open it directly.
BackHandler
Intercepts the device back gesture and lets you run custom logic — like prompting "do you want to exit?"
Nested Nav Graphs
Groups related screens into a sub-graph so you can modularize navigation and share routes between features.
Type-safe Navigation
Uses Kotlin serialization to pass typed objects as route arguments instead of fragile strings.
AnimatedVisibility
Shows and hides a composable with customizable enter/exit animations instead of just appearing/disappearing.
AnimatedContent
Smoothly cross-transitions between two different composables when the state they depend on changes.
animate*AsState
Animates a single value (Dp, Float, Color) smoothly to a new target whenever you change the target.
animateContentSize
Smoothly animates a composable's size change instead of snapping instantly to its new dimensions.
Crossfade
Fades the old composable out while fading the new one in during a state-driven content switch.
updateTransition
Coordinates multiple properties animating together based on a single state change — the multi-value animator.
TweenSpec
An animation that moves at a steady, eased rate from one value to another over a fixed duration.
SpringSpec
An animation that behaves like a physical spring — it can overshoot and bounce before settling.
KeyframesSpec
An animation you script frame-by-frame, specifying exact values at exact time points during playback.
Easing
A curve that controls the rhythm of an animation — whether it starts fast, ends slow, or follows a custom path.
AnimationSpec
The base type all animation configurations (Tween, Spring, Keyframes) share — the blueprint of how something animates.
pointerInput
The low-level modifier that gives you a coroutine-based API to detect any touch event on a composable.
detectTapGestures
Recognizes tap, double-tap, long-press, and press gestures within a pointerInput block.
detectDragGestures
Tracks a finger's drag movement and reports the position delta so you can move things on screen.
awaitEachGesture
A loop inside pointerInput that automatically restarts gesture detection after each complete gesture ends.
AnchoredDraggableState
Manages drag gestures that snap between fixed positions — exactly how a bottom sheet snaps open or closed.
transformable
Handles multi-finger pan, zoom, and rotate gestures on a single composable — like a map or image viewer.
MutableInteractionSource
An observable stream of user interactions (pressed, focused, hovered) you can react to for custom feedback.
Indication
Defines the visual feedback drawn on a composable when a user interacts with it — the ripple is one example.
ripple
The standard Material Design ink-spread effect shown when a user taps an interactive composable.
ViewModel + Compose
The ViewModel owns and survives state beyond recompositions; Compose just renders whatever it exposes.
UiState sealed class
A single object that captures every possible screen condition — Loading, Success, Error — in one clean type.
UiEvent / UiEffect
One-time fire-and-forget actions (show toast, navigate away) that the ViewModel sends to the UI without state.
MVI
A pattern where every user action is an Intent, producing a new immutable State — ultra-predictable and testable.
MVVM
Model holds data, ViewModel transforms and exposes it, Compose renders it — the most common Compose pattern.
Single Activity
One Activity hosts the entire app; Compose Navigation replaces all Fragments and Intent-based screen changes.
SavedStateHandle
Lets a ViewModel persist and restore its state across both rotation and OS process death.
hiltViewModel()
A composable function that asks Hilt to inject and return a ViewModel with all its dependencies already resolved.
ViewModelStoreOwner
The host (Activity, NavBackStackEntry) that keeps ViewModels alive for its entire lifetime.
ComposeView
A standard Android View you drop into an XML layout that renders a Compose UI tree inside it.
AndroidView
A composable wrapper that hosts a classic Android View inside your Compose tree for gradual migration.
AndroidViewBinding
Like AndroidView but inflates a ViewBinding XML layout directly inside a Compose tree.
AbstractComposeView
The base class for building your own custom Android View that renders Compose content internally.
ViewCompositionStrategy
Controls exactly when Compose should dispose its composition inside a ComposeView — important for Fragments.
Compose in Fragment
Using ComposeView as a Fragment's root view to migrate existing screens to Compose one at a time.
Compose in RecyclerView
Embedding composables as RecyclerView item views so you can migrate list items without touching the rest.
AlertDialog
Material 3 dialog composable with title, text, and confirm/dismiss buttons; blocks interaction with the rest of the screen.
Dialog
Lower-level composable for fully custom dialog content inside a floating window; gives you complete layout control.
ModalBottomSheet
Slides up from the bottom and dims the background; used for contextual actions or detail views without full navigation.
BottomSheet (standard)
Non-modal variant that can coexist with background content; the background remains interactive while the sheet is visible.
ModalNavigationDrawer
Side panel overlay for navigation or settings that slides in from an edge and dims the background.
Popup
Renders content in a floating layer anchored to a position on screen; lower-level primitive than Dialog.
Snackbar / SnackbarHost
Transient message shown at the bottom of the screen; requires a SnackbarHostState coordinated via Scaffold.
Tooltip
Shows a descriptive label on long-press or hover via TooltipBox; useful for icon-only buttons.
WindowSizeClass
Classifies the current window into Compact, Medium, or Expanded to drive layout decisions without hardcoding pixel thresholds.
calculateWindowSizeClass()
Computes the current WindowSizeClass from the Activity or use currentWindowAdaptiveInfo() in Compose.
ListDetailPaneScaffold
Material 3 adaptive scaffold that handles list-detail navigation, showing one or two panes depending on window size.
SupportingPaneScaffold
Three-pane adaptive layout for main content plus a supporting information panel; collapses on smaller windows.
NavigationSuiteScaffold
Automatically switches between NavigationBar, NavigationRail, and NavigationDrawer based on window size class.
Foldable support
FoldingFeature and DisplayFeature APIs detect the fold state and hinge position for fold-aware layouts.
Canonical layouts
Google's recommended adaptive patterns: List-Detail, Supporting Panel, and Feed — each optimised for different content types.
Advanced
Compiler internals, custom layouts, performance, graphics & runtimeSlot Table
Compose's internal memory where the current state of every composable in the tree is stored and tracked.
Gap Buffer
The clever data structure Compose uses to efficiently insert and remove composable nodes in the Slot Table.
Applier
The component that takes the diff from the Slot Table and applies those changes to the actual UI node tree.
Composer
The runtime object secretly passed to every @Composable that manages reading/writing to the Slot Table.
RecomposeScope
Represents a block of composable code that the runtime knows how to invalidate and re-execute independently.
ControlledComposition
An advanced API that lets you manually drive the composition process — mainly used for custom runtimes and tests.
Recomposer
The scheduler that decides when pending recompositions run and on which thread they execute.
Invalidation
The signal that tells Compose "this RecomposeScope's output may have changed — schedule it for re-execution."
@NonRestartableComposable
Marks a composable that can't restart itself — reduces overhead for simple wrappers that don't read state directly.
Stable Contract
A promise to Compose that your class's public properties won't change without notification — enables skipping recomposition.
Compose Compiler Plugin
A Kotlin compiler plugin that transforms your @Composable functions into efficient state machines at compile time.
IR Transformation
The compiler rewrites your composable code at the intermediate representation level — before it becomes bytecode.
$composer injection
The compiler secretly adds a Composer parameter to every @Composable so the runtime can track its execution.
$changed bitmask
Integer flags the compiler injects to let Compose skip recomposition when none of the inputs have actually changed.
$default flags
Compiler flags indicating which parameters are currently using their default values so Compose can skip checks.
RestartableFunction
A compiler-generated wrapper that captures a composable lambda and allows the runtime to re-invoke it on demand.
remember lowering
The compiler converts your remember {} calls into direct positional read/write operations on the Slot Table.
startRestartGroup
A compiler-inserted call that opens a named region Compose tracks so it can re-run just that group when needed.
endRestartGroup
Closes a restartable group and registers the lambda the runtime will call if it needs to re-execute that block.
startReplaceableGroup
Opens a region that can be entirely swapped out — used for if/else and when branches in composables.
startMovableGroup
Opens a region whose identity can relocate in the tree — used when you provide a key() to a composable.
CPS in Compose
Compose uses Continuation-Passing Style internally to pause, resume, and re-enter composable execution mid-run.
SubcomposeLayout
A layout that composes some children, measures them first, then uses those measurements to compose the rest.
BoxWithConstraints
A Box that exposes its own available width and height constraints to children — great for responsive UI.
Layout (custom)
The primitive composable for building any layout the built-in Row/Column/Box can't achieve.
MeasurePolicy
The interface you implement to define exactly how your custom layout measures and places its children.
MeasureScope
The context given to your layout logic where you call measure() on children and then position them.
Placeable
The result of measuring a child composable — it holds the measured size so you know where to place it.
IntrinsicSize
Lets a layout ask its children "how big would you want to be if space were unlimited?" before measuring.
ParentDataModifier
Lets a child composable pass custom data upward to its parent layout to influence how it gets placed.
LookaheadScope
Allows composables to pre-calculate their future layout position so animated moves look smooth and correct.
Modifier.Node
The new efficient API for writing custom modifiers that avoids lambda allocations and is much faster than composed{}.
ModifierNodeElement
The immutable description of a Modifier.Node — Compose diffs these to create or update the node efficiently.
DelegatingNode
A Modifier.Node that forwards its responsibilities to another node — useful for composing modifier behaviors.
DrawModifierNode
A Modifier.Node specifically for performing custom drawing operations directly on the Canvas.
LayoutModifierNode
A Modifier.Node that intercepts the measure and layout pass to apply custom sizing or positioning logic.
SemanticsModifierNode
A Modifier.Node for attaching accessibility descriptions and test metadata directly onto a composable.
PointerInputNode
A Modifier.Node for handling raw touch and pointer events with full coroutine-based gesture control.
composed {}
The old way to create stateful modifiers with remember inside — superseded by the faster Modifier.Node API.
graphicsLayer
Applies GPU-accelerated visual transforms (scale, rotation, shadow) without causing an expensive layout pass.
drawWithCache
A draw modifier that lets you create and cache expensive drawing objects so they aren't recreated every frame.
Animatable
A manually controlled animation value you can animate toward a target, snap instantly, or stop at will.
Transition
A state machine that coordinates multiple animated properties all changing together based on one state object.
rememberInfiniteTransition
Creates an animation that loops endlessly — great for loading spinners or pulse effects.
VectorizedAnimationSpec
The internal vector form of an AnimationSpec — what Compose converts your spec to when animating multi-dimensional values.
DecayAnimation
An animation that gradually decelerates to a stop — used to naturally simulate momentum after a fling gesture.
splineBasedDecay
A physics-accurate decay that exactly matches the finger velocity of a fling for a natural scrolling feel.
MutatorMutex
Ensures only one animation or gesture can own a shared value at once — the newcomer cancels the previous owner.
AnimationState
A snapshot of an animation in progress — holds current value, velocity, and elapsed time for manual control.
Motion Layout
A Compose port of MotionLayout for choreographing complex, path-based animations between two layout states.
Canvas
A composable that gives you a raw drawing surface — draw paths, shapes, text, and images pixel by pixel.
DrawScope
The context provided inside any draw block — gives you the composable's size, density, and canvas access.
drawPath / drawArc
Draw commands for rendering custom vector shapes and circular arc segments on the Canvas directly.
BlendMode
Controls how a new drawing layer visually combines with what's already been painted beneath it — like Photoshop modes.
ShaderBrush
A brush backed by a GPU shader program — enables custom gradient patterns impossible with standard brushes.
LinearGradient
A brush that smoothly transitions colors along a straight line — horizontal, vertical, or diagonal.
RadialGradient
A brush that transitions colors outward from a central point — creates glowing or spotlight effects.
RenderEffect
A GPU post-processing effect (like blur or color filter) applied to a composable's fully rendered output.
BlurMaskFilter
Applies a software blur around the edges of drawn shapes — used for drop shadows or glow effects.
ColorFilter
Transforms colors of drawn images or shapes using tint overlays or full 5x4 color matrix operations.
Picture / drawPicture
Records a set of draw commands once and replays them cheaply — great for repeated complex drawings.
Baseline Profiles
A file that pre-compiles critical code paths so app startup, first frame, and scrolling are significantly faster.
Composition Tracing
Adds composable names to Android's systrace so you can see exactly which functions are causing slow recompositions.
Compiler Metrics
Reports from the Compose compiler showing which of your classes are stable or unstable — your optimization checklist.
Compiler Reports
Detailed output files showing which composables are skippable and the exact reason any class is marked unstable.
@Stable / @Immutable
Annotations that promise Compose your class won't change unexpectedly — unlocks skipping and saves recompositions.
movableContentOf
Moves a composable with its full state to a new position in the tree without destroying and recreating it.
derivedStateOf (perf)
Stops unnecessary recompositions by only propagating a state change when the derived result actually differs.
Avoiding unstable lambdas
Lambdas capturing outer scope are unstable by default — move them to ViewModel or wrap them to allow skipping.
Recomposition Highlighter
A debug tool that visually flashes composables on screen every time they recompose — quickly reveals waste.
Layout Inspector
Android Studio's live tool that shows your Compose tree, layer hierarchy, and exact recomposition counts per node.
ComposeTestRule
The test harness that hosts your composable in an instrumented test and synchronizes all Compose state for you.
createComposeRule()
Creates the test rule so you can set composable content, interact with it, and assert its state in tests.
onNodeWithText()
Finds the first composable in the test tree that displays a specific text string so you can interact with it.
onNodeWithTag()
Finds a composable by its testTag — the safest and most stable way to locate UI elements in tests.
SemanticsMatcher
A filter condition applied to the semantics tree to find composables by any of their semantic properties.
performClick()
Simulates a user tap on the found composable node — the most common interaction in Compose UI tests.
assertIsDisplayed()
Verifies that a composable node is currently rendered and visible on screen — fails the test if it's not.
waitUntil {}
Pauses the test and keeps polling until a condition becomes true — handles asynchronous UI updates cleanly.
semantics {}
A modifier that attaches accessibility descriptions and test metadata to a composable for both tests and TalkBack.
SemanticsActions
Custom actions you declare on a node that tests or accessibility services can programmatically trigger.
contentDescription
Text describing what a UI element is — read aloud by TalkBack for visually impaired users.
mergeDescendants
Combines the semantics of all children into the parent node so accessibility tools see it as one item.
Merged Semantics Tree
The accessibility-optimised view of your UI where parent nodes absorb their children's info — what TalkBack sees.
Screenshot Testing
A test that renders a composable, captures a bitmap, and compares it to a saved golden image to catch visual regressions.
No concepts found matching your search.