Skip to content

Motion Layout Basics

Animation in Android has always been something that intrigued me. When done right, it can really bolster the perceived quality of an app. In fact, well-used animation alone can make an app stand out from its competitors.

While animation was never the hardest thing to do in Android, it was never the easiest as well. That is, before motion layout came out at least.

Now, animation is easier than ever. By using a class that extends the well-known Constraint Layout, we can have a layout that uses XML defined motion scenes to create animations that both look amazing and are easy to use.

Import the Dependencies Wait what?

I thought I’d mention this because the official documentation tells you to import a beta dependency of Motion Layout in order to use it (at the time of this writing).

The Gradle dependency for Constraint Layout 2.0.0+ already comes packaged with Constraint Layout. If you need access to the individual motion layout dependency without being able to use the aforementioned constraint layout dependency, head to the docs for that one.

Add the Motion Layout XML

activity_main.xml

<androidx.constraintlayout.motion.widget.MotionLayout
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_01"
    app:motionProgress="0.6"
    app:motionDebug="SHOW_ALL"
    tools:paths="true">

    <View
        android:id="@+id/button"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="#FF0000"
        android:text="Button" />

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

Motion Layout is a subclass of Constraint Layout so it has all its functionality, plus the motions, should you define them. The ID of the view inside the layout will be important later, so take note.

What defines the animation is app:layoutDescription. If you copy the code above, you’ll have an error because you haven’t defined scene_01. So let’s do that.

Create the Scene

scene_01.xml

<?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:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="1000">
        <OnSwipe
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="right"
            motion:dragDirection="dragRight" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#D81B60" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#9999FF" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

Motion scenes are the meat and schmeat of Motion Layout animations. They are in fact, the animations themselves.

You start by defining ConstraintSets, which act as keyframes for a view (referenced by id), using ConstraintLayout-style positioning as you can see above. You can also define CustomAttributes to change other properties of the view such as their backgroundColor. This just needs to match an object with getter and setter methods, as backgroundColor does for View.

Finally, you create a Transition which uses these ConstraintSets for the start and end keyframes of the animation, set a duration, and a trigger (usually click or swipe). You can also set a motion to start immediately with motion:autoTransition.

You can also do other things like add an interpolator or a motion arc but more on that another time.

You can define multiple sets of these constraint sets and transitions for multiple views in your motion layout.

With that, you should have an animated square. Congratulations.

Conclusion (and Github)

This is only the bare basics of Motion Layout. There is plenty of room to discover cool things when it comes to animation in Android, both in the theory of how it should be used and in the application of it using Motion Layout.

Opening into 2021, I’ll be exploring a bit deeper into the topic. If you’ve been keeping up with the website or my YouTube channel, you’ll also know that I’ll be exploring Python Android Development as well opening into the year so look forward to that.

In any case, here’s the project on Github. Happy coding ༼ つ ◕_◕ ༽つ

 

 

Tags: