Easing in to Material Motion transitions
summary
Material Motion on Android uses the four patterns—container transform, shared axis, fade through, fade—to make navigation meaningful and the MDC Android library provides classes for them. Implementation notes: use MDC Android 1.2.1 and AndroidX transitions, set android:transitionGroup="true" and postpone/start postponed enter transitions, tweak durations (author uses 400 ms), set scrim to transparent and target the FAB for a smooth container transform to morph FAB↔prediction bar. Dialogs require an XML fallback so the speaker recreates material fade in/out in res/anim (scale 80→100% 150 ms, alpha 0→1 in 45 ms; fade-out 75 ms) and applies via a theme overlay.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:16Material Motion design system
- 5:14MDC Android implementation
- 9:47Example app overview
- 13:18Fade through transition
- 17:09Container transform transition
- 21:46Fade transition for dialogs
- 27:31Final app experience
- 29:18Q&A session
related talks
45mAnimations in Material Design - Significance, Context and Hierarchy
39mAdvanced & Practical MotionLayout
29mBringing your app to life - Motion Animations everywhere
29mFROM 0 TO MATERIAL MOTION: CREATING ANIMATIONS AND TRANSITIONS
19mMotionLayout: Animation made easy
39mGetting Started with Material3 Expressive
39mMeaningful motion design and how to implement it
31mI like to move it, move it