Always needed to create better Android application with cool animations. Discover MotionLayout in this article
MotionLayout promises to simplify the creation and synchronisation of animations. It could be helpful when an animated transition between two states is needed, this animation could be triggered by the user by a drag on the screen or linked to the progression of another component (e.g. :
MotionLayout is part of the ContraintLayout 2.0.0 library, which was made available in Beta status since Google I/O’19 “What’s New in ConstraintLayout”.
MotionLayout is a class that extends
ConstraintLayout, offering additional features.
MotionLayout helps you describe changes in constraints between a start state and an end state. These changes should be written in a new XML file called “scene”. Then linked to your MotionLayout component in the layout file with the
MotionLayout is backward-compatible up to API 14 which is Android IceCreamSandwich.
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 capability. You can find its source code on github.
Let’s create a simple MotionLayout with an
Because MotionLayout extends
ConstraintLayout, we can position the ImageView with constraints, as usual.
This layout looks like a
ConstraintLayout with two extra attributes:
app:layoutDescription="@xml/scene_donut"this links to a different XML file that describes the animation: the scene file.
app:showPaths="true"this boolean allows you to display the path of the animation at runtime (do not forget to remove it in production 😃)
Here is scene_donut.xml:
We need to define a
ConstraintSet "start" and a
ConstraintSet "stop" in our
Here we are defining a motion that goes from the left to the right of our screen. The tag
id is used to reference the view that we modify constraints in the layout file.
OnSwipe tag defines the direction of the transition. The duration is the time of the
Transition in milliseconds, it appears to be a good practice to define it even if the motion progress is overriden by the swipe.
Animating other attributes
We can animate other attributes, for instance our View’s width and height:
Note that the code previously shown is hidden with “…”.
Adding a KeyFrame to our path
A straight line might be the shortest distance from point A to point B, but we might want something more personalized. We can add an intermediate position on our View’s path by specifying a
KeyFrameSet, which will contain a set of
KeyPositions. In this example we specify that at 50% of the transition (
framePosition="50") the Y-axis should be at 1/4 of parent (
Scale during the motion
We can also play with the scale of our View. In this example, we double its size in the middle of the animation (
Rotation during the motion
In a similar fashion, our View’s rotation can be animated : (
Animating the background
It is also possible to define custom attributes. We can, for instance, animate an
ImageView's background. To do so, let's define a
CustomAttributetag within our
attributeName attribute points to the layout attribute we want to change;
customColorValue defines a value for the color.
We can also morph a drawable into another one altogether.
We must first change our layout file. Let’s change our
ImageView for an
ImageFilterView. An alternate image can then be defined with the
Let’s now define a
CustomAttribute like we did previously, targeting the
crossfade attribute. We define a starting value of 0 and an end value of 1 for it.
Black and white transition
We can also play with saturation, our image goes from black and white to fully colored.
For more complex path, it is possible to define
pathMotionArc that will constrain the path to start vertically or horizontally. In this example three
KeyPosition are described, the first will start vertically, the second horizontally and the third vertically again. We can choose between startVertical | startHorizontal | none.
We have now seen how MotionLayout lets us create smooth user-controlled animations as simple XML declarations. Feel free to get creative and combine them, your imagination is the limit 😃!
As mentioned previously, the library is still in Beta, so keep in mind there may still be breaking changes to the API. The Google team is working on tooling as it is now complicated to visualise and debug the animation.
The code with full MotionLayout example is available on GitHub.
For further reading :
I hope you took the opportunity to enjoy the various android version logos in all their glorious deliciousness as you went through our examples. If you’re finding yourself hungry for more, stay tuned for our next post and discover the power of MotionLayout when combined with CoordinatorLayout, ViewPager and DrawerLayout.
Find all technical articles by Xebia on blog.xebia.fr.