Animation with MotionLayout
MotionLayout is a ConstraintLayout subtype that lets you easily add animation to your user interface. See how to set up a MotionLayout with a MotionScene and ConstraintSets that transition your layout between start and end states. You'll also get a preview of the Android Studio 4.0 Motion Editor. By Joe Howard.
Learning path
This is part of the Android UI & UX: Beyond the Basics learning path. View path.
Who is this for?
Android developers that are familiar with ConstraintLayout and want to use its MotionLayout variant to add animation to their apps.
Covered concepts
- MotionLayout
- MotionScene, ConstraintSet, and Transition
- OnClick and OnSwipe
- KeyFrameSet, KeyPosition, and KeyAttribute
- CustomAttribute
- Android Studio 4.0 Motion Editor
Part 1: Animation with MotionLayout
Learn about the pieces that go into a MotionLayout animation, including MotionScene, ConstraintSet, and Transition, and use them to create a basic animation.
See how to use animation key frames to insert intermediary positions for the moving views in between the start and end states.
See how to use the Transition OnSwipe tag to switch from using a view click to trigger the animation to instead use a swipe gesture.
Learn how to use KeyAttribute to change view properties such as alpha and rotation during the animation.
Utilize the capability of MotionLayout to update custom properties of views such as background color and a color filter.
Put together all that you've learned so far on MotionLayout to animate multiple views within your MotionScene.
Create a more practical example of user interface animation, a custom menu that animates open to show buttons that your user can interact with.
See the use of the Android Studio 4.0 Canary 1 Motion Editor, which lets you build your animation states visually and preview them in Android Studio.