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, visibilitytranslationXtranslationY, 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: 

Medium 

Codelabs

 

Andres Matamoros

Andres works as an Android developer at Gorilla Logic. Throughout his career he has built apps for a variety of industries, working on apps for banks, sport fishing, as well as attendance & time tracking. Most of his experience has been with Native Android, and also cross-platform development using Xamarin. In his spare time, he enjoys going to the movies, spending time with his family, and staying active (he considers himself an amateur cyclist!)

Related Articles

Ready to be Unstoppable?

Partner with Gorilla Logic, and you can be.