Advanced Layout Animations in Compose
summary
Explains how Compose implements layout animations by adding a new lookahead pass that measures target bounds so animations chase stable layouts instead of current animated sizes, with a follow up approach pass that interpolates from current to target bounds. Shows APIs used: shared transition layout, modifier.sharedElement and modifier.sharedBounds, resize modes scaleToBounds versus remeasureToBounds, skipToLookaheadSize to avoid text reflow, overlay behavior and how predictive back on Android 15+ integrates with seekable transitions.
AI-written summary · about
chapters (15)
- 0:00Welcome
- 1:07Basic layout animations
- 2:12How layout animations work
- 4:20Look ahead for stable layouts
- 6:26Higher-level shared element APIs
- 8:53Tagging and matching shared elements
- 10:39Shared bounds vs shared elements
- 13:06Resize modes for shared elements
- 14:32Shared element overlay
- 17:23Skip intermediate sizes
- 18:26Clipping issues in transitions
- 21:35Modifier ordering
- 23:01Shared elements with predictive back
- 24:04Shared element transitions under the hood
- 36:32Summary and next steps
related talks
35mAdaptive Layouts in Compose
37mThe Layout Animations Show
41mCreating a Custom Compose Layout, Step-By-Step
42mCreating a Custom Compose Layout, Step-by-Step
45mConstraintLayout: making the transition to Compose
38mUsing ConstraintLayout in Compose
48mConstraintLayout & MotionLayout in Compose
40mComposing Creatively with Custom Layouts