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:
Toolbarwith a title.
What changes are we seeing?
- The height of the toolbar and the color of the icons adjust based on our scroll.
- The size of our
SearchViewalter to fit the new constraints between the icons.
- 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:
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
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.
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:
Cool. Now that we have the layout file ready, we can start work on our animation or our
To do that, we create an XML file and place it within the
I’ll call mine
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
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
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
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
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
RecyclerView are all constrained to a
Guideline , the entire height animation can be produced by modifying the
layout_constraintGuide_begin attribute of the
The only thing we change in the icons is the color from black to white.
The entire end
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
We configure it to use the start, end
constraintSet 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
We construe it with two attributes:
motion:dragDirectionwhich means what side to swipe from:
motion:touchAnchorIdwhich allows us to attach the event onto a certain view. In our case; we assign this job to our
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.
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
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.