Move my app with MotionLayout Part 2
In this article, you will discover how MotionLayout can help you to animate CoordinatorLayout, ViewPager, Drawer.
This is the second part of a series about MotionLayout, if you haven’t read it yet, please take a look at the first part that introduces basic gestures.
MotionLayout is a class that extends ConstraintLayout, offering additional features.
MotionLayout is part of the ContraintLayout 2.0.0 library, which was made available in Beta-1 status since Google I/O’19 “What’s New in ConstraintLayout”.
MotionLayout creates a link between a layout file and a scene file that describe changes for an animation, between a start and an end state. Adding intermediate changes is possible with KeyFrame.
In order to showcase each feature of MotionLayout, I designed a sample app. We will be using it throughout this article, each example will explain a new potential. You can find its source code on GitHub.
CoordinatorLayout
A CoordinatorLayout is used to coordinate layouts and is generally used with a header that collapses when the main content of the view is scrolled up or down. In this example the “droid” changes its margins to move from the middle to the left.
First we need to intercept the progress of the coordinator, by creating a custom CollapsibleToolbar that extends MotionLayout:
Then we use it in our layout with a background and a droid image:
The scene is a basic motion the motion:layout_constraintStart_toStartOf="parent" and motion:layout_constraintEnd_toEndOf="parent" attributes are present on the start meaning that the droid is on the middle. At the end position we have motion:layout_constraintEnd_toStartOf="parent" describing that the droid is outside on the left of the background.
ViewPager
A ViewPager can be used to create horizontal navigation with tabs, in this example the header will be animated according to the ViewPager tabs.
We need to connect the progress of the motion to the page number.
And we should create a custom header with a background view and a droid icon. The component is the class we have created.
On the scene file, two elements are animated. The KeyFrame defines the transition in the middle, thus corresponding to the tab in the center:
- The icon moves from left to right with a change on position height in the middle with a
KeyPositionat 50 percent of the animation progression. - The color of the background changes from white on start, to green in the middle and brown at the end. This is done with the
CustomAttributetag.
On the activity we need to add the pages to the ViewPager adapter's and add a listener:
Drawer
When the drawer is opened or closed, items are animated.
First it is required to create a custom Drawer, that calculate the slideOffset progress and add it in the attach method.
Then create a drawer content with a TextView, ImageView and View. The first row is shown is this example :
In the scene file, we describe the following changes:
- The text color changes from black to green (aka
@color/donut). - The image rotates.
- The color and the dimension change for the view at the right.
SeekBar
We can connect MotionLayout progression with other components, as shown in this example with a SeekBar.
Toasts are displayed on start and on completion of the transition. Of course, our imagination can create nicer usages of those callbacks.
We have covered examples that connect MotionLayout to existing components.
I hope these articles give you new ideas. If you want to get started, I recommend the MotionLayout codelab.
In addition, you can read :
- Series of articles from Googlers.
- Googlers examples repository.
- MotionLayout documentation.
- Beta2 new features announcement.
New examples are coming from the community look at medium and twitter.
Find all technical articles by Xebia on blog.xebia.fr.
Join us on November 28 in Paris for the highly-anticipated event of the IT ecosystem (90 conferences and client’s feedback). All information and inscriptions on xebicon.fr.
