Converting a ConstraintLayout to MotionLayout (CCM)

Android Studio now includes a visual design editor specifically for MotionLayout types, making it easier to create and preview animations.

The Motion Editor provides a simple interface for manipulating MotionLayout library elements, which serve as the foundation for animations in Android applications. Without Android Studio, creating and modifying these elements would require manual editing of constraints in XML resource files. However, the Motion Editor can generate this XML for you, supporting initial and final states, keyframes, transitions, and timelines.

Note: Before using the Motion Editor, ensure you set the ConstraintLayout dependency in your build.gradle file to version 2.0.0-beta3, as specified in the MotionLayout documentation.

To start using the Motion Editor:

1. Create a ConstraintLayout.
2. Right-click on the preview in the Layout Editor.
3. Click "Convert to MotionLayout," as shown below.Convert ConstraintLayout ke MotionLayout

After Android Studio converts the ConstraintLayout to MotionLayout, a Motion Scene file (an XML file with _scene added to the layout file name) is also added to the directory containing your XML files.

MotionLayout then becomes your root layout and appears in the Motion Editor UI. The layout already includes an initial ConstraintSet, a final ConstraintSet, and a transition from start to end.

You can use the summary graphics to select a ConstraintSet or Transition and to choose components in the selection panel.

Then, you can edit constraints and attributes for the start or end ConstraintSet in the same way you edit ConstraintLayout.

If you want to build more elements into the graphics, you can use the creation icons to quickly add gestures like ConstraintSet, Transition, or OnClick/OnSwipe.

To add a keyframe, first click the Transition arrow:

Then, in the Transition timeline panel, click the top-right corner and select KeyPosition:

This opens a dialog where you can set attributes for the keyframe.

You can also add OnClick and OnSwipe handlers to the Transition in the attributes panel.

This action will open a dialog where you can set click attributes like the target component and drag direction.

The Motion Editor supports animation previewing in the design platform. After selecting an animation, click Play above the timeline to preview the animation.