How to perfect android animations using MotionLayout

Animations are fantastic.

They make our apps feel interactive, increase engagement, and make our designers happy.

But until recently, animations were a real pain point, which made it hard to deliver good looking animations, especially if we had a tight deadline.

Thankfully, no more.

Google introduced a tool called MotionLayout, which makes it easy to create beautiful animations with a high level of flexibility.

So how can we use MotionLayout?

MotionLayout inherits from ConstraintLayout, which means we have all the power of constraints to define our states.

MotionLayout calculates the difference between our layout at the beginning and at the end to create our animation.

But just like any useful tool, we have the power to decide how things morph in between, and we can define what the trigger to our animation is.

Now, I don’t know what about you; I find the best way to learn something is with examples, so let’s create one.

That’s what we’ll achieve — created using Android Studio 4.0 canary 7, with the new MotionEditor.

What are we seeing?

Our layout holds a few views:

• Toolbar with a title.
• Navigation and Menu icons.
• SearchView
• RecyclerView

What changes are we seeing?

1. The height of the toolbar and the color of the icons adjust based on our scroll.
2. The size of our SearchView alter to fit the new constraints between the icons.
3. The title moves up and goes out of the screen.

Let’s begin by creating our layout file.

I’ll name our layout file sample_collapsing_animation We use MotionLayout as our root tag. Yours should look similar to this:

The attribute app:layoutDescription is used to attach our motion scene file, which we will create later.

Inside our layout, I want to define a Guideline . This will help us by acting as a natural singular point to change the height of our views.

To build our Toolbar, we’re not going to use the component of Toolbar.
We are substituting it with a View to form the illusion of a Toolbar.

Doing that will result in a flat layout with all of the views exposed. Thus providing us with the option to gain access to our title and morph it out of the screen, and the SearchView, later on, can use the icons as constraints.

Our SearchView has nothing special going on with it.

Our final piece of the puzzle is our RecyclerView; it will act as a trigger for the animation.
Every time we scroll, the animation will update accordingly.

The entire layout looks like this:

MotionScene

Cool. Now that we have the layout file ready, we can start work on our animation or our MotionScene file.

To do that, we create an XML file and place it within the res/xml folder.

I’ll call mine sample_collapsing_animation_scene.xml.

We use MotionScene as our root tag.

Inside the file, we define three things.
1. “constraintSetStart” which means how the animation looks at the initial (0%).

2. “constraintSetEnd” which means how the animation looks at the end
(100%).

3. Trigger or duration.

When we define the start/end states, we probably want to change how views look or how they are positioned.

To do that we create a ConstraintSet which will hold all of our views.

For us to define how a view will behave in a ConstraintSet, we use the Constraint tag.

Start state

In our start constraint, we want the SearchView to be positioned below the icons and have a 16dp margin from both sides.

The title should look like a regular Toolbar title:

The icons should look like navigation and menu icons and we’ll define their color to black.

Currently, we need to create a CustomAttribute with the name of ColorFilter to change the tint of an image. It might change in the future, but for now, that’s how we do it.

The entire start ConstraintSet:

End state

In the end constraint, the SearchView should now be:

• Side constrained to our icons.
• Top constrained to the top of the screen

The title moves above the toolbar and outside of view.

Due to the fact that the Toolbar, SearchView, and RecyclerView are all constrained to aGuideline , the entire height animation can be produced by modifying thelayout_constraintGuide_begin attribute of theGuideline.

The only thing we change in the icons is the color from black to white.

The entire end ConstraintSet:

Binding it all together

Okay. Up to this moment, we defined how the layout looks, how we want the start to look, and how we want to end the animation.

The last step of the puzzle is to create the transition. In other words, how the states will morph from one to the other.

To do that we use the Transition tag.

We configure it to use the start, endconstraintSet and we tell it that we want the overall interpolation to ease in and out.

We want to set our RecyclerView’s scroll as our trigger, which means that the animation will progress as the user scrolls.

To do that we add the tag OnSwipe to our now defined Transition.

We construe it with two attributes:

1. motion:dragDirection which means what side to swipe from: dragUp, dragDown, dragLeft, dragRight.
2. motion:touchAnchorId which allows us to attach the event onto a certain view. In our case; we assign this job to our RecyclerView.

The complete MotionScene file looks as follows:

To make the sample work, I’ve filled the RecyclerView with some dummy list data, and this is the final result.

To summarize

MotionLayout is an excellent tool. It gives us the power to create great experiences, beautiful animations, and enjoy the process thanks to the Android Studio team that created the MotionEditor.

Big thanks Sivakumar Chellamuthu for letting me use your creation as an example.

You can check the code for the sample on my GitHub.
While you’re there, you can look at some of my other projects.

Thanks for reading.

gilgoldzweig/MotionLayoutExample