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 not anymore.
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 inherit 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 animations 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 with the new MotionEditor.
What changes are we seeing?
- The height of the toolbar and the color of the navigation icons adjust based on our scroll.
- The size of our SearchView change to fit the new constraints between our images.
- 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. Your's 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 us having a flat layout with all of the views exposed. Thus providing us 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.
Our entire layout looks like this:
Cool. Once we have our 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.
"constraintSetStart" which means how the animation looks at the
start (0%)"constraintSetEnd" which means how the animation looks at the end
(100%)Trigger or duration
Start state
For us to define how a view will behave in a ConstraintSet, we use the Constraint tag.
In our start constraint, we want the SearchView to have the following attributes.
Our title:
Our icons:
Currently, we need to create a CustomAttribute with the name of ColorFilter for us 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 our end constraint, our SearchView should now be.
Side constrained to our icons.
Top constrained to the top of the screen.
Our title moves above our toolbar.
For the entire movement, we change the layout_constraintGuide_begin of our Guideline.
The only thing we change in our icons is the color from black to white.
The entire end ConstraintSet:
Binding it all together
The last step of the puzzle is to create our transition.
Inside our Transition, we add the OnSwipe to set our RecyclerView's scroll as our trigger.
The entire file looks like this:
To finish our sample, I've filled the RecyclerView with some dummy list data, and this is our final result.
For conclusion,
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 out his project here
The code for the sample is on my GitHub, and you can check them out here.
While you're there, you can also take a look at some of my other projects.
Top comments (0)