A MotionLayout Tutorial: Create Motions and Animations for Android
It is becoming increasingly common for apps to feature delightful animations highlighting user emotions. Let’s be honest, they look amazing! Although these characteristics are essential for a charming UX, they usually end up being relegated for being extremely time-consuming and expensive for a business. Luckily, there are tools like that exist today that can help make the process of creating animations a lot easier. In this MotionLayout tutorial, you will see this tool in action.
MotionLayout helps developers manage complex motion and coordinate animations of multiple views. By using this tool, you can now easily provide your users with a more pleasing experience and boost the level of engagement with your apps.
Follow along with this tutorial to learn about the key concepts of MotionLayout and how you can easily create rich motion and animations using the Motion editor.
A MotionLayout Tutorial
In this MotionLayout tutorial, you will be learning about MotionLayout, a subclass of ConstraintLayout, and how to implement it. This tool is fully declarative, which means you can describe complex transitions in XML. Additionally, Android Studio provides graphical tooling.
Note: MotionLayout is backward-compatible to API level 14.
The Animation
In the GIF below, you can see the animation I created to guide you through the key concepts and implementation steps.
“The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.”
Note: For simplicity, in this MotionLayout tutorial, I do not exemplify each of the steps using the whole set of assets. But don’t worry, the steps are the same for all of the remaining assets, and you can still check the source code of the full implementation.
Step 1: Adding MotionLayout
First, we need to add the ConstraintLayout 2.0.+ dependency to the build.gradle.
Step 2: Convert to MotionLayout
Right click the preview of your ConstraintLayout and select: “Convert to MotionLayout.”
This replaces the ConstraintLayout with a MotionLayout, and generates a MotionScene for the MotionLayout.
activity_main.xml
Step 3: Defining ConstraintSets
The MotionScene has two different ConstraintSets. The start describes what the view looks like before the animation, and the end describes what the view looks like when the animation finishes.
3.1 Start & End Constraints
1. Select the start | end ConstraintSet in the overview panel.
2. In the selection panel, select a view and click on the pencil icon -> “Create Constraint.”
3. From the attributes panel, define the constraints as desired.
activity_main.xml
3.2 Interpolated Attributes
ConstraintSet elements allow us to specify more attributes than the usual position and bounds. Attributes like alpha, visibility, translationX, translationY, and more can be interpolated during the transition.
Defining interpolated attributes is easy! These can be added In the attributes panel or via XML at the time we define a constraint. For example:
activity_main_scene.xml
Step 4: Previewing Animations
The MotionScene needs a Transition in order to perform the animation from the start ConstraintSet to the end ConstraintSet. When the MotionScene is auto-generated, a default transition is added.
activity_main_scene.xml
1. Select the arrow (transition) that is between the start and end states in the preview panel.
2. In the selection panel, play or drag the current position.
Step 5: Modifying a Path
By default, the path is a straight line from the start to the end position of the view. We can modify the path using a KeyPosition.
5.1 KeyPosition
1. Select the transition in the overview panel.
2. In the selection panel, select the timer icon -> KeyPosition.
3. Select the view and add the properties as needed.
activity_main_scene.xml
After adding a KeyPosition for all the remaining assets, this could look like:
Step 6: Modifying Attributes During the Transition
Using a keyAttribute, we can modify views’ attributes like alpha, size, and rotation as the animation progresses.
KeyAttribute
Creating a keyAttribute with the Motion editor requires pretty much the same steps we followed for creating a keyPosition (step 5.1) For example:
activity_main_scene.xml
In this case, I used keyAttribute(s) to rotate the Android’s icon while the animation progresses. This could look like:
Step 7: Triggering the Animation
Before testing it on a device, there is one final component to add. To trigger the animation, we’ll use an OnSwipe event.
activity_main_scene.xml
Step 8: Try it Out!
That’s it! We’ve already covered all of the steps to create our animation, now we can install it on a device.
Final Thoughts
This MotionLayout tutorial shows you how MotionLayout makes it simple to deal with what used to be a nightmare, requiring overcomplicated code, a lot of extra files, and certainly some prior animation experience. Now, we can animate our apps simply and cleanly and use graphical tooling to make it even easier.
I hope you find this MotionLayout tutorial useful! Don’t forget to check out the source code if you are further interested.
Resources:
