Creating a Custom Compose Layout, Step-By-Step
summary
Step‑by‑step builds a schedule UI with a layout composable that measures sessions by duration, uses constraints and placeables to position items, and applies intrinsics to premeasure heights so a single pass works. Implements a custom modifier.node for per-item time ranges, swaps scroll offsets for a viewport as single source of truth to coordinate scrolling across multiple tracks, shows far fewer recompositions via phase state reads, and demos look‑ahead animations — a working, performant custom layout that solves overlapping and synced scrolling.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:05Compose phases in depth
- 3:31Custom layouts vs Row for schedules
- 8:02Performance with Layout Inspector
- 12:35Custom layout from scratch
- 14:22Measuring and placing elements
- 18:35Height constraints with intrinsics
- 20:43Overlapping data in schedules
- 23:51Scroll state versus viewport
- 26:40Custom scopes and modifiers
- 31:13Modifier.Node API
- 33:22Remembering schedule scope
- 36:10Scrolling across tracks
- 38:55Performance with phase state
- 39:39Animations with LookaheadScope
- 40:42Custom layouts in Compose
related talks
42mCreating a Custom Compose Layout, Step-by-Step
32mThinking outside the Box: Custom Compose layouts
40mComposing Creatively with Custom Layouts
44mDigging Deeper with Subcomposition + Custom Compose Layouts
35mAdaptive Layouts in Compose
40mDigging Deeper with Subcomposition + Custom Compose Layouts
37mAdvanced Layout Animations in Compose
07mBasic Layouts in Compose