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
andMenu
icons.SearchView
RecyclerView
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
SearchView
alter 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:
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:
motion:dragDirection
which means what side to swipe from:dragUp
,dragDown
,dragLeft
,dragRight
.motion:touchAnchorId
which allows us to attach the event onto a certain view. In our case; we assign this job to ourRecyclerView
.
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.