Move my app with MotionLayout Part 1

Alexandre Genet
Jul 9, 2019 · 5 min read
Image for post
Image for post

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).

Image for post
Image for post

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

Image for post
Image for post

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.

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

In a similar fashion, our View’s rotation can be animated : (rotation="-45").

Animating the background

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

We can also play with saturation, our image goes from black and white to fully colored.

Complex path

Image for post
Image for post

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.

Publicis Sapient Engineering

Publicis Sapient Engineering (anciennement Xebia) est la…

Alexandre Genet

Written by

Publicis Sapient Engineering

Publicis Sapient Engineering (anciennement Xebia) est la communauté Tech de Publicis Sapient, la branche de transformation numérique du groupe Publicis.

Alexandre Genet

Written by

Publicis Sapient Engineering

Publicis Sapient Engineering (anciennement Xebia) est la communauté Tech de Publicis Sapient, la branche de transformation numérique du groupe Publicis.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store