MotionLayout

At last, I am so proud to present you the last part of my ConstraintLayout series 🤘🏻. This one will be the longest and the most intensive👊🏻. We will dive into the deepest parts of the ocean and find out the true potential of ConstraintLayout. You can check out the first two parts of the series in the links below:

Constraint Layout

Constraint Layout 2.0

After this article, I believe you’ll have enough background to start using MotionLayout. Please seat your belt when you are ready, we are about to take off 🚀🚀

What is MotionLayout?

MotionLayout is a subclass of ConstraintLayout with additional ways to animate views.

MotionLayout can be considered as a ConstraintLayout with lots of cool properties to obtain complex view animations driven by interactions (pressing a button, dragging on a Recyclerview, etc.). You can keep using all ConstraintLayout basic functionalities (chains, barriers, groups, etc.) while using MotionLayout. One of the most powerful features of the MotionLayout is that it allows you for midway seeking of animations . What I mean by that, you don’t have to wait for the animation to finish, you can manipulate it while it’s still in action!

You can use MotionLayout with API Level 14 or higher.

Now, since we know what MotionLayout is basically, let’s see it in action and what it’s capable of!

You don’t have to do any additional steps to start using it. We just need to add the proper version of the ConstraintLayout dependency to our app/build.gradle file.

dependencies {
implementation'androidx.constraintlayout:constraintlayout:2.0.0beta'
}

As I mentioned earlier, since MotionLayout is a subclass of ConstraintLayout you can directly replace ConstraintLayout tags with MotionLayout tags.

<!-- before: ConstraintLayout -->
<androidx.constraintlayout.widget.ConstraintLayout .../>
<!-- after: MotionLayout -->
<androidx.constraintlayout.motion.widget.MotionLayout .../>

You can directly use the Android Studio Design tool to convert ConstraintLayout to MotionLayout.

This is what an ordinary MotionLayout XML file looks like:

MotionLayout XML

Now, let’s investigate the core concepts of the MotionLayout one by one. First of all, you may notice above app:layoutDescription="@xml/activity_main_scene" . What the heck is that??? It is called MotionScene.

Motion Scene is nothing but an XML file that defines all animation behaviors for the layout. In other words, we declare what kind of animations we are going to use there. The most basic MotionScene file would look like this:

MotionScene XML

Let’s investigate these tags one by one.

ConstraintSet

As its name suggests, it’s nothing but a set of Constraints 😑. The main difference between ConstraintLayout and MotionLayout is that you can specify your constraints in your MotionScene file in MotionLayout. In other words, you can separate your constraints into another file. But why would I do that 🤔?

You can specify multiple ConstraintSets for views and use them to animate!

When you create your MotionScene you might have noticed this diagram in the Design tool.

Motion Editor

What is this exactly??? This one is called “Motion Editor” and it represents the motion flow. It’s a great tool to build, modify or preview animations. By default, it brings you the start and end ConstraintSets. You can define different constraints between these two and make your first animation!

layout.xml

activity_motion_scene.xml

ConstraintSet Animation

Once you get used to it, you may create complex animations by defining different ConstraintSets🚀🚀.

Transition

Transition is basically the connection between two ConstraintSets.

Every MotionScene must have at least one Transition. It simply decides the motion sequence to be performed between ConstraintSets. MotionScene may contain more than one Transition. If so, MotionLayout is smart enough to choose the most appropriate one according to user interaction ( swipe left, swipe right, click events, etc.).

Transition Tags

Now let’s make a quick example with onSwipe tag. When the user swipes the view, it will slide from top to bottom.

First, define your MotionLayout.

layout.xml

Then, after setting start and end ConstraintSets, define your onSwipe functionality in your Transition tag. You can define any direction according to your need.

activity_motion_scene.xml

You can drag your view in the desired direction 😎.

onSwipe Transition

KeyFrameSet

KeyFrameSet can be considered as a checkpoint through the animation.

Above I mentioned that you can have more than 2 ConstraintSets for view transactions. KeyFrameSet can be considered as lightweight ConstraintSet. You can change your view attributes via KeyFrameSet. Enough talk, let’s see it in action!

This time we will use more than one attribute together. Our layout file remains the same.

We will only change the MotionScene layout.

Firstly, let’s change the color of the view when it’s swiped. To do that, we can use CustomAttribute tag in ConstraintSet.

<CustomAttribute
        motion:attributeName="backgroundColor"
        motion:customColorValue="#1A7FCF"/>
</Constraint>

Now, let’s play a bit with our path. Instead of a linear path, we’ll make it sinuous. We can use KeyPosition tag in KeyFrameSet for that. You can play with values for different results.

<KeyPosition
    motion:keyPositionType="parentRelative"
    motion:percentX="0.25"
    motion:framePosition="50"
    motion:motionTarget="@+id/first_view"/>

Lastly, I want to change the size of the view when it’s moving. To do that, we can use KeyAttribute tag in KeyFrameSet.

<KeyAttribute
    android:scaleX="2"
    android:scaleY="2"
    android:rotation="-45"
    motion:framePosition="50"
    motion:motionTarget="@+id/first_view"/>

With all these our MotionScene would look like this:

activity_motion_scene.xml

And ta daa!

That’s all folks. Congratulations 🥳 . You can start using MotionLayout 😎. Of course, there are still tons of stuff that should be covered. But I dare say that you’ve made a good entrance 💪🏻👊🏻.

See you in the next one 👋🏻.