Do the Loco-MotionLayout: Building animations with MotionLayout
summary
Recreates a designer mockup end-to-end using MotionLayout and a referenced MotionScene: swipe-driven and click-driven transitions, constraint sets for start/middle/end, and layered transforms. Uses KeyAttributes and keyPosition to time fades, staggered moves and curved paths; CustomAttribute for card corner radius and outline shadow workarounds; transition listener with onTransitionChange to tint backgrounds. Demo compiles and runs—complex scene hits ~30fps on an older phone, ~60fps on modern hardware; code and assets are in the repo.
AI-written summary · about
chapters (22)
- 0:00Introduction
- 1:33What is MotionLayout
- 2:20Setting up MotionLayout
- 3:42Transitions
- 9:19Synopsis Card
- 11:39Text View
- 12:49Keyframes
- 14:18Key Attributes
- 15:29Liquid Backgrounds
- 16:14Book Synopsis Card
- 20:41Book Cover
- 22:24Text Fade
- 24:03Text Fade in
- 25:36Image Views
- 26:07Transition List
- 27:43Button Constraints
- 29:06Debug Paths
- 30:12Key Position
- 34:07Scrollable List
- 35:19Combining Scenes
- 38:03Considerations
- 39:58Wrap up
related talks
44mDo the Loco-MotionLayout: Building animations with MotionLayout
46mDo the Loco-MotionLayout: Building animations with MotionLayout
43mMoving to MotionLayout
19mMotionLayout: Animation made easy
39mExploring MotionLayout
39mAdvanced & Practical MotionLayout
50mDeep dive into MotionLayout
40mAdvanced & Practical MotionLayout