According to the Maslow’s Hierarchy of Needs, after our physical and social needs are fulfilled, we feel the need to be proud of something, something that we achieved or accomplished. This need can be fulfilled by creating something of value to others. And value can be defined in many different ways. One of its definition can be extracted from aesthetics; the sense of beauty, symmetry, harmony. If a person can create something that others find beautiful, he/she just made something of value. He/she will be praised by others, fulfilling his/her need of pride.

In software development, aesthetics play an important role. User experience, along with soothing colors and balanced animations, can make a software more natural, more interactive and friendlier than its competitors, driving more users to it and ultimately increasing revenue. The case of Android is not different than this.

Getting Started

Working on animations has always been a challenging task in Android. There are multiple options available to work with, classes like Animation, AnimationUtils, AnimationSet, R.anim.fade_in to name a few, and is difficult for a learner to choose from. And there are many things to understand in order to make sense of what is going on. For instance, look the code below:

val textView = findViewById(R.id.textView)
val animation = TranslateAnimation(0.0F, 100.0F, 0.0F, 100.0F)
animation.duration = 1000
textView.startAnimation(animation)

At first, it looks very simple. We’re making an animation object that is describing how the animation will proceed, and we’re setting that animation in a text view. The text view is supposed to animate from point (0,0) to point (100,100) in one second. But if you were to execute this code, after animation is completed, the text view will jump back to its original position. The reason behind this is that in Android, translating an item doesn’t change the actual position of that item. So after animation is ended, item returns back to where it was.

Motion Layout

Point being, animating views in Android is not easy. Or should I say was not easy. Because Android has come up with something that has made animating views effortless. Motion Layout, introduced at Google I/O event in 2019, is an extension of Constraint Layout so it comes bundled inside with Constraint Layout 2.0. With motion layouts, extreme animations can be made using only XML. No Java or Kotlin code is required. One enthusiast made this using motion layout:

But don’t worry, I will keep things simple to better understand how motion layouts work and how can we make complicated animations using just the basic tools. In this article, I will only cover the basics of motion layout and how to make simple animation using it.

First thing that you need to understand is that MotionLayout extends from ConstraintLayout. In order to use MotionLayout, you must implement following dependency in your gradle file:

implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta4’

If you don’t know what ConstraintLayout is or how it works, I suggest you learn it first. If you already are familiar with it, then the following layout code will make sense:

This is our activity_main.xml file and it will create a text view and will keep it in center of the screen like this:

Let’s make the text view a little pretty:

We’ve added padding, set a background and text color to it, now it looks much better:

As we’ve established earlier, that MotionLayout is extension of ConstraintLayout, replacing ConstraintLayout with MotionLayout should work, courtesy of polymorphism. So let’s try that:

But if you run the application now, it will give an error. Not because polymorphism failed but because MotionLayout has one prerequisite. Every MotionLayout must have a MotionScene file associated with it. MotionScene file is an XML file and it contains the animations’ code. Create a folder in res directory of your Android project and create an XML file inside it. For our demo, we will be creating a folder by the name of xml and MotionScene file by the name of scene_1.xml.

Now that we’ve created our file, here is how we associate it with a MotionLayout:

By mentioning scene_1 in app:layoutDescription=”@xml/scene_1″ in MotionLayout tag, we’re specifying this MotionLayout a MotionScene. Now our motion layout is all ready for animations. Let’s dive into scene_1.xml file and write some animations.

MotionScene

MotionScene is where your animation code lives. In XML terms, MotionScene is a tag, with its children Transition, ConstraintSet and StateSet. We will be focusing on Transition and ConstraintSet because these two are responsible for animations. MotionScene can contain multiple Transition tags and ConstraintSet tags.

ConstraintSet holds the information of the resting state of view. By resting state, I mean position, rotation angle, alpha etc., the building blocks of animations, at a time when either animation is not yet started or is finished. Each ConstraintSet expresses the resting state of the views mentioned inside it. Following code describes how ConstraintSet holds that information: