Motion Layout in Android

Motion Layout is a layout that helps to create an animation and motion in your app. It is a subclass of Constraint Layout. This layout has complete declarative attributes in the XML, and that’s all — no complicated math for creating animations.

TL: DR;

The fundamental idea behind this is an object moving from one point to another in the given flow of time can be a source of animation which means the object must have some starting and endpoints.
We can see some of the critical features of the Motion Editor, which are similar to “Adobe After Effects”.

Requirements

Firstly and most importantly, the constraint layout which are used right now in the beta version, can’t be used for production use. Still, you can download the latest developer preview of Android Studio 4.0 Canary for this purpose with loads of several updates. You can always have the option to install two Android Studio for keeping your production and beta install separately. You can download it from here and follow the installation in a different folder and change the name of the folder “Android Studio Preview.” Check out this link for keeping multiple versions of Android Studio.

Create an Empty Project.

Importing the constraint layout 2.0 version to your build.gradle file.

dependencies {
 implementation      ‘androidx.constraintlayout:constraintlayout:2.0.0-beta3’
}

To create an animation, we must have a start and end layout XML with a Motion Scene XML.

Add the following code in the layout XML file activity_main_start.xml

Layout for the starting position.

and activity_main_end.xml

Layout for ending position.

Lastly, create an XML directory and inside it create a layout for your Motion Scene, activity_main_motion_scene.xml

Basic motion scene.

Well, we just created a Basic Motion Layout.

A basic animation with Motion Layout.

Motion Scene consists of Transition, Constraint Sets, Constraint, and Custom Attributes of the layout.

Transitions carry the basic motion properties like start and end constraint set. The duration is in milliseconds.

The Motion Scene has OnSwipe and OnClick events to control the event by swipe or click.

At a more advanced level, when we want a path alteration between the start and endpoints, then we can use the Key Frame attribute with the positioning of keys. The keyframes are also identical to that of After Effects.

You can find out more in the Motion Layout Examples with XML files.

Some of the GIFs.

Custom Attribute in Motion Layout

Changing the keyframe position.

Keyframe position

This example uses <KeyFrameSet> to alter the Y position of view during motion.

Chris Banes created this fantastic animation.

This includes:

1. RecyclerView shifting up/down.
2. Poster image hides animation.
3. Backdrop image shifting.
4. Backdrop image scrim (darkening).
5. FAB show/hide.

Let’s hope to get its stable version soon so we can include it in our production-based projects. Want a stable release, Report issues to the android team if found ❤