Move my app with MotionLayout Part 1
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. : coordinatorLayout).
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 layoutDescription attribute.
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.
Simple drag
Let’s create a simple MotionLayout with an ImageView.
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 Transition.
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.
The 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 (percentY="0.25").
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 (scaleX="2" and scaleY="2").
Rotation during the motion
In a similar fashion, our View’s rotation can be animated : (rotation="-45").
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 ConstraintSet. The attributeName attribute points to the layout attribute we want to change; customColorValue defines a value for the color.
Image morphing
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 altSrcattribute.
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.
Complex path
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.
