(or Command + Mouse click) Delete ⌦

(or Ctrl + Mouse click) Select All Components Ctrl A Command A Select Multiple Components Shift + Mouse Click Shift + Mouse Click Zoom In Ctrl + Command + Zoom Out Ctrl – Command– Zoom to 100% Ctrl / Command / Zoom to fit Ctrl 0 Command 0 Pan Hold Space bar & drag w/ mouse Hold Space bar & drag w mouse Toggle Error Panel E E Go to XML Ctrl B Command B ]]> Description Windows/Linux Mac Group into Nested Graph Ctrl G Command G Cycle through Destinations Tab (Shift + Tab) Tab (Shift + Tab) Select all Destinations Ctrl A Command A Select Multiple Destinations Shift + Mouse click Shift + Mouse click Zoom In Ctrl + Command + Zoom Out Ctrl – Command – Zoom to 100% Ctrl / Command / Zoom to fit Ctrl 0 Command 0 Pan Hold Space bar & drag w/ mouse Hold Space bar & drag w mouse Toggle Error Panel E E Go to XML Ctrl B Command B ]]> What is it?

ConstraintLayout is a viewgroup that allows you to position and size widgets in flexible ways using constraints.

Relative Positioning

Widgets can be positioned relative to one another, or to the ConstraintLayout viewgroup itself. Position Constraints start from a given side of the widget (start/left, end/right, top, bottom, baseline), and connect to another widget’s side (a target widget). A margin can also be applied as well. You can think of a target as the ideal position of the constrained side, taking into account eventual margins.

For example, we can position a widget A at a distance of 16dp from the parent’s right side and a distance of 24 dp from the parent’s bottom side by creating two constraints (one on the end side and one on the bottom side). The corresponding XML will be:

Center Positioning

Another useful way of positioning widgets with ConstraintLayout is centering them between targets. For example, to center a widget horizontally in the parent, we only have to connect the start and end sides (or left and right) to the corresponding parent’s sides:

You can center a widget not only in the parent, but between any targets:

It is also possible to be centered on a single widget:

And even on the same side:

You can create constraints in multiple ways. The simplest is to drag from a widget’s anchor (the circle representing a side of the widget) and connect it to a target, like in this example where we connect to the parent container:

If you need a margin, there are several things you can do at creation. The first method is to hold the command key (control key on windows), while creating the constraint -- the distance to the target will be set as the margin:

Another approach is to change the default margin used when creating constraints by hand:

The default margin will then be used when creating the constraint:

You can also drag a widget away from the target to create a margin:

Finally, you can also create constraints and set margins by using the attribute panel, by selecting the widget you want to constrain.

Centering constraints

If two opposite constraints (for example, top and bottom) are set on a widget, the widget will be centered in the available space between the two targets. You can create opposite constraints several ways: manually (one after the other), by using the + action in the attribute panel, or via the centering actions available either from the contextual menu (right-click on the widget) and the toolbar.

Once a widget has been constrained via opposite constraint, its applied bias can also be changed (the default is 50%, hence the centering behavior).

The attribute panel lets you manipulate the bias value directly by showing you sliders:

By moving the horizontal slider here we’ll affect the bias:

Resulting in the following layout:

Motion Editor is a visual design editor for the MotionLayout layout type, making it easier to create and preview animations. This guide covers the high level components of the Motion Editor and gives you an overview of how to build animations with MotionLayout

MotionLayout is a is a layout type that helps you manage motion and widget animation in your app. MotionLayout is a subclass of ConstraintLayout and builds upon its rich layout capabilities. MotionLayout helps you animate layout changes which you specify as transitions between ConstraintSets.

Overview Panel

The Motion Editor supports editing ConstraintSets and Transitions, which can be visualized in the Overview Panel, shown below. To edit constraints in a ConstraintSet, click on the corresponding box in the overview panel. You can then edit constraints the same way you would edit a ConstraintLayout.

MotionLayout Scene with two ConstraintSets, start and end, and a Transition between them

If you want to build more elements to your graph, you can use the creation icons to quickly add a ConstraintSet, Transition, or OnClick/OnSwipe gestures.

Selection Panel

The Selection Panel provides detailed controls based on the state of the Overview Panel. It has 3 modes:

• Motion Layout selected
• ConstraintSet selected
• Transition selected

MotionLayout selected

The Motion Editor supports editing of the base Motion Layout. When MotionLayout is selected in the Overview Pane, use this panel to select components and view if they are properly constrained.

ConstraintSet selected

When a ConstraintSet is selected, the selection panel will display the list of components and a checkmark to indicate if the component is constrained in this ConstraintSet.

Transition selected

When a transition is selected, you can control the playback of the animation with the animation toolbar. When an animation is selected, click Play above the timeline to preview the animation.

Keyframes

Keyframes are placed on the timeline for easy viewing and editing. To create a new keyframe, click on the new keyframe icon in the top right of the selection panel. This action opens a dialog where you can set attributes for the keyframe. To edit a keyframe, click on the diamond icon to open the KeyFrame attribute panel.