Adaptive Layouts in Compose
summary
Explains why Compose’s composition/layout/draw phases force tradeoffs between first frame correctness and switching which composables run, and shows practical fixes: use window-level sizing (Material 3 adaptive scaffolds), accept subcomposition via SubcomposeLayout or boxWithConstraints but measure for performance, or write a custom layout using intrinsics and TextLayoutResult to measure and place exactly so the same composables are composed yet rendered differently without flicker. Code examples include two-button split, inline badge placement, and ellipsize-with-more-button implementations.
AI-written summary · about
chapters (12)
- 0:00Adaptive layouts in Compose
- 1:08Why adaptive layouts are tricky
- 3:16Four conflicting rules in Compose
- 5:43Breaking rules for adaptivity
- 7:08First frame correctness issues
- 12:35Subcomposition for adaptivity
- 14:41Window sizing solutions
- 17:04Complex layouts same composables
- 19:08Custom layout side-by-side buttons
- 23:29Custom layout inline text icon
- 28:14Conditional button placement
- 33:58Choosing the right approach
related talks
37mAdvanced Layout Animations in Compose
18mCompose: Implementing responsive UI for larger screens- 18mCompose: Implementing responsive UI for larger screens
32mThinking outside the Box: Custom Compose layouts
41mCreating a Custom Compose Layout, Step-By-Step
26mMaking Apps adaptive with Material and Compose
40mDigging Deeper with Subcomposition + Custom Compose Layouts
40mComposing Creatively with Custom Layouts