Learn MotionLayout step by step — Part 1 : layoutDescription, KeyFrameSet, KeyAttribute, framePosition, motionTarget

This is an introductory article for MotionLayouts in Android development. We will explore the MotionLayout with code samples step by step.

At the end of this article, you will learn the usage of keywords i mentioned in the title :

• layoutDescription,
• KeyFrameSet and KeyAttribute,
• framePosition,
• motionTarget

Dependency

MotionLayout is a subclass of ConstraintLayout. The below dependency works for both ConstraintLayout and MotionLayout:

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

Backwards compatible to API level 14

MotionLayout is available as a part of the ConstraintLayout library, MotionLayout is available as a support library and is backwards-compatible to API level 14.

MotionLayouts are really simple. Lets write our first MotionLayout example step by step.

Example 1

In this example, we will implement an animation as the following :

Scale of textView increases from 1 to 3 and from 3 to 1 gradually.

Firstly, we write a very simple activity using constraintLayout. There is no new thing yet.

Secondly, change your root view from constraintLayout to MotionLayout. When i do that, MotionLayout has red color. Android studio suggests me to generate MotionScene file.

Thirdly, click “Generate MotionScene file”, and activity_1_scene.xml file is created under res/xml/ directory, automatically by Android Studio. You may need to create xml directory manually.

Now, my project has the following files. When i run the project, i get the same output with the example above. Only a textView is shown. No new thing has come in my application.

Please be aware that, in my activity layout xml file, i will refer to my activity_1_scene file which is generated by Android Studio automatically.

Fourthly, i will make a small change in activity_scene.xml file and i will achieve an animation. That’s it! The final code looks like as the following :

The key points in this example are the followings:

• My animation duration is 10000 miliseconds(10 seconds).
• framePosition can be a number only in the range [0,100], with 1 being 1% through the animation, and 99 being 99% through the animation. It means that animations contain 100 frames. In our example, our animation duration is 10 second so 50th frame is displayed in 5th second.
• Only the view with the id “textView1” animates in this example. In the 50th frame, the scaleX and scaleY of textView1 is 3. I didn’t write KeyAttributes for 0th and 100th frame because in the initial(0th) and final(100th) frame, the scaleX and scaleY of textView1 is 1 by default. If you want, you can write 0th and 100th frame explicity as the following. It works but makes no difference in our animation.

To sum up,

• while the animation plays from 0th to 50th frame, size of textView1 increases from its original size to the size of 3 times of its original size gradually.
• while the animation plays from 50th to 100th frame, size of textView1 decreases from the size of 3 times of its original size to its original size gradually.

Example 2

Example 2 is similar to the example 1. Check the codes :

The resulting animation :

Alpha of textView changes from 1 to 0, and from 0 to 1 gradually.

This is the end of this article. If you like it, please do not forget clapping.

In the next article, we will learn the use of ConstraintSet and Constraint. Before jumping to the next article, please fully grasp the two examples in this article.

Happy coding !