Creating Animations With MotionLayout for Android

Animating different widgets in your Android app had always been a painful experience for developers. However, all that changed with the introduction of the MotionLayout subclass in Android.

You can use MotionLayout in your app to handle widget animations from one state to another. MotionLayout was added as a subclass of the ConstraintLayout class in version 2.0. Support for MotionLayout goes as far back as API level 14 with the help of a backwards-compatible support library.

Some useful and interesting features of the class include animation of different layout properties, as well as support for seekable transitions. The support for keyframes in MotionLayout is simply the cherry on top. This allows you to create your own fully customized transitions.

In this tutorial, you will learn how to create animations within your Android app using MotionLayout.

Add Dependencies

The first step before you can start using MotionLayout in your Android app involves adding ConstraintLayout as a dependency to your project. This is included by default in all Android projects now. However, you should still make sure that any project that uses MotionLayout uses a version above 2.0.0 for the ConstraintLayout as its dependency.

You can check your own project dependencies by opening the build.gradle file and looking for this line under dependencies.

1	implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

The version number at the end will change from time to time. So, don't worry about a mismatch. The important thing to remember is that it should be at least 2.0.0.

Define the App Layout

If you are creating a new app while following this tutorial, you will see that the activity_main.xml file is using ConstraintLayout for widget placement. We will have to replace all instances of ConstraintLayout in our layout file with MotionLayout.

The easiest way to do that is to switch your layout from Code view to either Split or Design View. You will find a Component Tree panel on the left side. Open the panel, and you will see the ConstraintLayout in use. Right-click on it and select Convert to MotionLayout as shown in the image below.

Converting ConstraintLayout to MotionLayout

This will result in a new pop-up window letting you know that the conversion to MotionLayout will result in the creation of a separate MotionScene file. Click the Convert button.

Your activity_main.xml file should now have the following XML code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_main_scene"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.motion.widget.MotionLayout>

Let's add a Button widget to our layout. We will design our app in such a way that a click on the button will make our TextView widget jump up a bit and increase in size. Add the following XML below the TextView widget to add a button that says Jump and stays 20sp below our TextView widget.

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Jump"
    android:textSize="18sp"
    android:layout_marginTop="20sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/textView" />

Editing the MotionScene File

Do you remember that Android Studio showed us a pop-up window which mentioned that the conversion of our ConstraintLayout to MotionLayout will result in the creation of a MotionScene file? The name of that MotionScene file is activity_main_scene.xml. You can find it under res > xml > activity_main_scene.xml in your project.

A reference to the motion scene file is also present in our activity_main.xml file under the app:layoutDescription attribute. The activity_main_scene.xml file contains the following code:

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
       <KeyFrameSet>
       </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

As you can see, the scene file contains a root MotionScene tag with other tags inside it that control the actual motion or animation of a widget.

The Transition tag inside MotionScene defines how the animation will proceed based on its start and end ConstraintSets. Each ConstrainSet can contain a Constraint tag which you can use to provide constraint and view specific attribute values.

There are three things that we want to change about our TextView with each button click. The color of the text should change from black to teal_700. These values are defined in the colors.xml file. The spacing between the TextView widget and the Button should increase to 40sp. The TextView widget should scale up to twice the original size.

Here is the XML that we can use inside our MotionScene file to make our textView jumpy.

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="200"
        motion:motionInterpolator="easeIn">
        <OnClick
            motion:targetId="@id/button"
            motion:clickAction="transitionToEnd" />
    </Transition>

    <ConstraintSet
        android:id="@+id/start">
        <Constraint
            android:id="@id/textView">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@color/black" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/end">
        <Constraint
            android:id="@id/textView"
            android:scaleX="2"
            android:scaleY="2">
            <Layout
                android:layout_marginBottom="40sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                motion:layout_constraintBottom_toTopOf="@id/button" />
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@color/teal_700" />
        </Constraint>
    </ConstraintSet>
</MotionScene>

The attributes inside Transition specify the duration of the animation in milliseconds, as well as the interpolation method used to calculate intermediate values. We also use the optional OnClick tag to specify when the transition should trigger. The targetId attribute determines which view will trigger the animation. In our case, we use our button as the trigger element. The clickAction attribute specifies what should happen once the user clicks our button. In this case, we have set its value to transitiontoEnd. Other possible values are toggle, transitionToStart, jumpToEnd, and jumpToStart.

After that, we define our ConstraintSet tags which determine what our widget will look like at the start and end of the animation. You can also consider using the Motion Editor if you don't want to write all the XML yourself. This will also give you a good idea of the way your layout looks at the start and end of the animation.

Try running your app on either the emulator or a physical device now. You should see the TextView jump up, change color, and increase in size.

Controlling the Animation Programmatically

While it was possible for us to animate our text simply by writing some XML, you will probably want more control over the animation. Executing the animation programmatically gives you the option to do other tasks based on the overall progress of the animation.

Add the following line to your Button widget XML to call a method named start(), which is defined in our MainActivity.kt file:

1	android:onClick="start"

Define a method called start() within the MainActivity class, just below onCreate(). It should have the following code:

1	fun start(v: View) {
2	val motionContainer = findViewById<MotionLayout>(R.id.motion_container)
3	motionContainer.transitionToEnd();
4	}

We begin by getting a reference to our MotionLayout. In the next line, we use the transitionToEnd() method to transition to the animation from the values in the starting ConstraintSet to the ending ConstraintSet.

You can attach a transition listener to your MotionLayout widget to monitor the progress of the animation and handle what happens at different events. The TransitionListener interface has four abstract methods. Android Studio will generate stubs for all those methods for you automatically. Your code below the call to transitionToEnd() should look like this now:

val jumpButton = findViewById<Button>(R.id.button)
val greeting = findViewById<TextView>(R.id.textView)

motionContainer.setTransitionListener(
    object: MotionLayout.TransitionListener {

        override fun onTransitionStarted(
            motionLayout: MotionLayout?,
            startId: Int,
            endId: Int
        ) {
            jumpButton.setBackgroundColor(Color.BLACK);
        }

        override fun onTransitionChange(
            motionLayout: MotionLayout?,
            startId: Int,
            endId: Int,
            progress: Float
        ) {

        }

        override fun onTransitionCompleted(
            motionLayout: MotionLayout?,
            currentId: Int) {
            if(currentId == R.id.end) {
                greeting.text = "Good Evening!";
            }
        }

        override fun onTransitionTrigger(
            motionLayout: MotionLayout?,
            triggerId: Int,
            positive: Boolean,
            progress: Float
        ) {

        }
    }
)

We begin by getting a reference to the TextView widget and the Button widget.

Inside the TransitionListener, the onTransitionStarted() method fires when the transition is about to start. It accepts the defined MotionLayout as the first parameter. The second and third parameters are the IDs of the start and end constraint sets.

We call the setBackgroundColor() method on the jumpButton to change its color to black once the transition starts.

The onTransitionCompleted() method fires when the transition is complete. It accepts two parameters. The first one is the reference to our MotionLayout. The second one is the ID of the ConstraintSet currently applicable to the layout.

We check if the currentId matches the ID of our end ConstraintSet. The greeting text changes to Good Evening! if there is a match. You could also do other things here, such as taking the transition back to the initial state by making a call to transitionToStart().

Clicking the Jump button this time will update the text and change the button color.

Final Thoughts

In this tutorial, you learned how to animate different widgets in your activity using MotionLayout. It is possible for you to animate layouts by just using XML. However, you can get granular control over the animation if you use code to do the animation. It also allows you to do other things during different stages of the animation.

Android Studio also comes with a Motion Editor that helps you quickly define complex transitions. You will also be able to see the initial and final stages of the animation when using the Motion Editor.