Using ConstraintLayout in Compose

on YouTube ↗38m

" summary

ConstraintLayout Compose 1.0 brings view‑system ConstraintLayout and MotionLayout concepts into Compose, letting code swap declarative constraint set objects and animate between them using the MotionLayout engine; a calculator demo runs about 10 distinct states and transitions smoothly. Tooling accepts a JSON motion scene string for live edits, supports onSwipe, keyframes, generators and list generate rules, and a tiny desktop inspector (≈1MB jar) connects to a device to modify layouts live. All demos and source code are on GitHub and run successfully.

AI-written summary · about

" chapters (14)

1. 0:00Introduction to ConstraintLayout
2. 1:52Why use ConstraintLayout in Compose
3. 6:07Getting started with ConstraintLayout
4. 10:03Animating layouts with ConstraintLayout
5. 11:48Introducing MotionLayout
6. 13:12MotionLayout JSON structure
7. 16:22Debugging MotionLayout in Studio
8. 21:44Live editing with MotionLayout
9. 24:50Building custom components
10. 29:25MotionLayout for components
11. 31:38Full app demo with MotionLayout
12. 32:42Carousel animation in Compose
13. 34:28Current status and future
14. 37:24Q&A and closing

" related talks

• 45mConstraintLayout: making the transition to ComposeNicolas Roard, John Hoford · Chicago Roboto 2022
• 48mConstraintLayout & MotionLayout in ComposeJohn, Nicolas · Chicago Roboto 2021
• 45mThe Future of ConstraintLayoutNicolas Roard, John Hoford · Android Summit 2020
• 39mConstraintLayout: now and nextNicolas Roard, John Hoford · Android Makers 2020
• 41mConstraintLayout 2.0Nicolas Roard, John Hoford · Android Makers 2019
• 21mResponsive UI with Constraint and Motion layoutImran Mohammed · Fragments 2019
• 35mConstraintLayout 2.0Andrew Kelly · Mobile Era 2018
• 46mConstraintLayout 2.0 : let’s use the new things!Roard, Hoford · 360|AnDev 2018