Introduction to MotionLayout Editor with Android Studio 4.0

Introduction

It was first revealed a few years back at the Google I/O 2018, that Android Studio (AS 3.x) will have a MotionLayout editor. Last year it was a disappointment for many people to see it wasn’t in there. Fortunately the work hasn’t been abandoned, only deprioritized.

MotionLayout Editor is now available in AS 4.0 (in beta1 while I’m writing these lines). And surely, we will see some announcements around that at Google I/O 2020 (if 👑 🦠 didn’t cancel this event as well).

The MotionLayout Editor allows you to create animations of Layout components of any View or ViewGroup. It is possible to move the element around (x and y axis), to scale them, to rotate them, to make then follow bezier lines, change colour, alpha... This allows developers (and designers) to create eye candy transitions and animations and enrich the user experience.

The MotionLayout is based on ConstraintLayout, so make sure you are up-to-date on this topic.

In this article I will only talk about the basics, but you should see more article about MotionLayout Editor in the future.

Get Set up

First of all, you are going to need the latest Android Studio 4.0, I would recommend the 4.0 (and avoid 4.1 for now).

Download and install it, it can live next to your current Android Studio without causing any collateral damages.

Open AS4.0 and create a new Empty Activity. This will come with a ConstraintLayout by default.

Open build.gradle because we want to add a dependency to the lastest version of ConstraintLayout:

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'

You can now open the layout: activity_main.xml in res

Creating your first MotionLayout

We first need to replace the ConstraintLayout with MotionLayout:

<androidx.constraintlayout.motion.widget.MotionLayout app:layoutDescription="@xml/scene01"
...>
<TextView
    android:id="@id/text_to_animate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>

Android Studio is going to tell you, that you have to add app:layoutDescription

The layoutDescription is a reference to an XML file that describe the animation, also called a Scene.

To create that scene file, you have to introduce a new folder xml in the res.

Then add a new Scene file by right clicking the xml folder and New XML Resource file. Give a name such as scene01. We are going to replace the content immediately.

In this Scene file we want to add a MotionScene. Which is a container for the actual scene description/configuration.

<?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">
...
</MotionScene>

We can now create the ConstraintSet, which is contraintLayout-like parameters to configure your screen at a point in time. In this exemple we are going to create Start and End. Each constraint set represent how we want the screen to be, respectively at Start and End. MotionLayout engine will then interpolates from Start to End automatically.

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

The Constraint into a ConstraintSet is directly related to a view in the MotionLayout, that we are about to animate.

In order to define which View you want to target, the Constraint have the attribute id, it is a one-to-one relationship.

<ConstraintSet android:id="@+id/start">
    <Constraint
        android:id="@+id/text_to_animate"
        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" />
</ConstraintSet>

So we are defineing what Constraints we want to apply for the text_to_animate View at start state. It can be size, placement, margins…

For now we only add one constraint, but if we had other views, we could create other constraints in linked to those views.

We can repeat this operation for the End state.

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:id="@+id/text_to_animate"
        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" />
</ConstraintSet>

Last but not least, we need to set the Transition section that is going to tell, what constraint set to start with and end with, as well as the duration.
We are also defining on which event the transition should play, here, OnClick.

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

Using the MotionLayout Editor

We can now jump back to the activity_main.xml and click the new button Split (top right).

That is going to reveal the MotionLayout Editor.

See the normal constraints (in activity_main.xml), then start when Start constraints are enabled, and end when End constraints are enabled. We can also edit the Transition (arrow at the top)

At the top left you can see three icons, allowing you to create ConstraintSet, Transition and Handler (click/swipe)

Exploring Transition

By clicking on the arrow above start and end, we can see the transition editor.

Click in the time line and put the cursor on 50, then Click on the Clock icon, and click Add KeyAttribute, then selection TranslationY.

This is going to create a Key Frame represented by a white rhombus, you can see it in the time line, as well as in on the screen preview on the left (when you select the view).

Creating a Key Frame is like adding an extra step between Start and End. On this step you can define specific informations. Because we have chosen KeyAttribute, translationY, this Key frame allow us to change the position of the View at 50% of the time for the Y axis.

If we play the animation, we can see the text going slightly down.

Let’s jump to the Scene01 file. We can see that a new section has been added to the transition, the KeyFrameSet, with the KeyAttribute we have just added.

<KeyFrameSet >
    <KeyAttribute
        motion:motionTarget="@+id/text_to_animate"
        motion:framePosition="50"
        android:translationY="30dp" />
</KeyFrameSet>

It is possible to combine multiple KeyFrame, so you can translate and rotate a View at the same time, change the alpha and many others parameters.

Bonus Tip

It is possible to introduce CustomAttribute in order to manipulate colour, textSize, backgroundColour and any other view-specific attribute.

Conclusion

In this introduction to MotionLayout Editor, we have seen how to create a very simple animation. Use your creativity to realise dynamic screens that encourage your users to come back to the app. Given I’ve just scratched the surface, I leave you with a couple of Reference.

Download Canary: https://developer.android.com/studio/preview

Reference: https://medium.com/google-developers/defining-motion-paths-in-motionlayout-6095b874d37