Detailed usage of Motion Editor in Android Studio

In our communication with the Android developer community, we know that adding animation effects is crucial to the UI. It can make the UI look more intuitive and help users understand the intention. However, developers have a lot of work to add complex animation effects to Android applications. To solve this problem, we use Motion Layout to build a set of powerful APIs and provide Motion Editor tools for them. When used in combination, you can easily build pixel-perfect animation effects. This article will take you quickly to understand the new Motion Editor tool and how to use its latest features in the development process. In addition, we have also specially produced a series of videos to guide you on a series of APIs including Motion Layout.

[[356068]]

Motion Editor is a visual editor built specifically for MotionLayout layout types, which allows you to easily create and preview animation effects. Since Android Studio 4.0, we have released a stable version of Motion Editor, and many developers have been using it to create animation effects.

Motion Editor is an extension of Android Studio Layout Editor. When you select Design or Split view in an XML file containing MotionLayout, Motion Editor will be automatically opened. You can edit layout and Motion Scene files using the interactive methods you are familiar with in Layout Editor, and preview the animation effects directly in the Android Studio preview interface.

Motion Editor

The Motion Editor interface consists of several panels, which we will introduce one by one in this article. The most important areas are: Overview panel, Selection panel, Attribute panel and Preview panel.

Overview Panel

MotionLayout can animate layout changes, which can be specified as Transition effects in ConstraintSets in the editor. Motion Editor can visualize these state transitions through the Overview panel. To edit the constraints in a ConstraintSet, click the corresponding option in the Overview panel.

The MotionLayout Scene in the figure has two ConstraintSets, start and end, and a Transition effect between them.

ConstraintSets

https://developer.android.google.cn/reference/androidx/constraintlayout/widget/ConstraintSet

Selection Panel

The Selection panel displays the corresponding control information according to the status in the Overview panel. It has three display modes:

• Mode when Motion Layout is selected in the Overview panel
• Mode when a ConstraintSet is selected in the Overview panel
• Mode when Transition is selected in the Overview panel

Mode when Motion Layout is selected in the Overview panel

The Motion Editor supports editing basic Motion Layout. When a Motion Layout is selected in the Overview panel, you can select the corresponding component to see if its constraints are configured correctly.

Check whether the constraints of the component are configured correctly through the Selection panel

Mode when a ConstraintSet is selected in the Overview panel When a ConstraintSet is selected in the Overview panel, the Selection panel lists all components in a list. The check icon next to the component means that the component is constrained by the current ConstraintSet.

Mode when Transition is selected in the Overview panel

When you select a transition in the Overview panel, you can control the animation playback through the animation toolbar. When an animation is selected, click the Play ▶️ button on the timeline to preview the animation effect.

Keyframes

Sometimes you need to modify the path of a view during an animation, and you can use MotionLayout's keyframes to achieve this. We have integrated keyframe editing into the editor so you can easily adjust animations. You can create a new keyframe by clicking the icon in the upper right corner of the Selection panel, which will open a dialog box where you can set various properties for the keyframe. To edit a keyframe, you can click the diamond icon to open the properties panel for editing.

Attributes panel

Creating animations in MotionLayout requires editing many view parameters, so we introduced an Attribute panel in the Motion Editor that is similar to the Layout Editor. In the Attribute panel, you can not only preview the visual effects of the Constraint, but also preview all the attribute effects of the view in the Motion Scene file.

When you want to add animation effects to a view attribute that does not belong to the ConstraintLayout or MotionLayout API (such as background color), you can create a custom attribute in the Attribute panel. We have also added automatic filling and input validation functions for custom view attributes to facilitate your operation.

Preview Panel

The addition of the Preview panel allows you to quickly edit and get immediate feedback when working with animation effects. After you make minor adjustments to the animation, you can directly preview the final animation effect without having to recompile and deploy it.

We've also added some new features to the Preview panel to make it easier for developers to understand how the animations they create work. You can preview animations using the Design view and the Blueprint view to get a clearer understanding of how the view moves without a lot of visual noise.

We’ve also added visualization capabilities for the paths views take on screen, including keyframe markers. We hope these features will make it easier for the compiler to parse complex transitions and simplify the creation experience.

Motion Editor is now available in Android Studio 4.0. We welcome everyone to use it and give us feedback. We are very eager to see the community build products using MotionLayout and Motion Editor. The Android Studio team will also continue to collect feedback to improve its user experience.