Topics we will cover:
- Motion Layout Definition
- Why Animate?
- Using Motion Layout
- Examples of Motion Layout
MotionLayout is a new class, available in the ConstraintLayout 2.0 library, that helps manage both motion and animation.
MotionLayout is a kind of
ConstraintLayout, that's why it's included in the
ConstraintLayout library. More precisely, it's a descendant of
ConstraintLayout, that extends the parent's functionality with animation capability.
Animations are a great way to enhance an app experience. You can use animations to:
- Build beautiful designs — effective motion in design makes apps look polished.
- Show changes — animating between states lets the user naturally track changes in your UI.
- Draw attention — use animations to draw attention to important UI elements.
To follow this tutorial, you’ll need:
- Android Studio 3.1.3 or higher
- a device or emulator running Android API level 14 or higher
- a basic understanding of the
MotionLayout is a subclass of ConstraintLayout — as such, you can treat it like a normal layout. To transform an existing ConstraintLayout into a MotionLayout is as easy as replacing the class name from:
Every MotionLayout animation consists of:
- MotionLayout widget: MotionLayout only supplies capabilities to its direct children, so you’ll typically use MotionLayout as the root of your layout resource file.
- MotionScene: Animation for MotionLayout widget are specified in MotionScene(xml file). All the animation properties and effects for MotionLayout view are defined in MotionScene
Let’s see some examples of implementing Motion Layout
First of all we will create a MotionLayout Widget
Example-2 (Collapsing Toolbar with Motion Layout):
Creating Motion Layout :
Motion Scene for the layout:
Motion Layout enhance the app experience with ease of implementation. We can build simple to complex animations using Motion Layout. Using Motion Layout improves your code and makes it easy to understand.
I hope you enjoyed the post. Don’t forget to clap your hands.