This page is deprecated. Redirecting to https://developer.android.com/studio/write/layout-editor.html

Android Studio 2.2 Preview includes a new layout editor that's specially-built for a new layout called ConstraintLayout. Although you can edit a ConstraintLayout in XML, you never have to. ConstraintLayout was built from the ground up alongside the new layout editor that makes it easier than ever to build an Android UI.

Once you drag-and-drop a view into ConstraintLayout, you can add constraints to define the view's position by dragging an anchor line to other elements in the layout. The layout editor can also intelligently infer the constraints for all views with a single click.

ConstraintLayout is available in a new Support Library that's compatible with Android 2.3 (Gingerbread) and higher, but the new layout editor is available only in Android Studio 2.2 Preview.

Note: For the initial release of ConstraintLayout, there is no API reference documentation. Once we reach a more stable version of the API, we'll make the API documentation available, but everything you need to build a ConstraintLayout is available through the layout editor in Android Studio 2.2 Preview.

Figure 1. The new layout editor showing a ConstraintLayout with both the Design and Blueprint view.

For a walkthrough of basic and advanced layout techniques with the new layout editor, see the ConstraintLayout Codelab.

Constraints Overview

A constraint is a description of how that view should be positioned on the screen relative to other elements in the layout. You can define a constraint for one or more sides of the view by connecting the view to any of the following:

• An anchor point on another view.

• An edge of the layout.

• An invisible guideline.

Because the layout of each view is defined by associations to other elements in the layout, you can create a complex layout with a flat view hierarchy. Although it's conceptually similar to RelativeLayout, ConstraintLayout is more flexible and is designed for use entirely from the new layout editor.

The different types of constraints you can define are as follows:

• Side connection with the layout: Connect the side of a view to the corresponding side of the layout. For example, connect the top side of a view to the top edge of the ConstraintLayout.

• Side connection with a view: Connect the side of a view to the opposite side of another view. For example, connect the top side of a view A to the bottom side of view B so that A is always below B .

• Side alignment with a view: Align the edge of a view to the same edge of another view. For example, align the left side of view A to the left side of view B such that they are vertically stacked and left-aligned.

• Baseline alignment with a view: Align the text baseline of a view to the text baseline of another view. Use this to align views horizontally when it's more important that the text within the views align than it is that the view edges align.

Once you add a constraint to the view in the layout editor, you can drag to reposition the view and add other constraints to ensure your layout responds to different screen sizes appropriately.

You can also ensure that all views are spaced evenly by defining default margins for all views with the Android Studio layout editor.

Add ConstraintLayout to your project

The New Project templates in Android Studio 2.2 have been updated to use ConstraintLayout for most layouts, so you can begin using it when you start a new project. If you're updating an existing project, proceed as follows:

1. Ensure you have the latest Android Support Repository (version 32 or higher):

1. Click Tools > Android > SDK Manager.

2. Click the SDK Tools tab.

3. Select Android Support Repository, then click OK.

2. Add the Constraint Layout library as a dependency in your build.gradle file:
   dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha5'
   }

3. In the toolbar or sync notification, click Sync Project with Gradle Files.

To add a new constraint layout to your project:

1. Right-click on your module's layout directory, then click New > XML > Layout XML.

2. Enter a name for the layout and enter "android.support.constraint.ConstraintLayout" for the Root Tag.

3. Click Finish.

To convert an existing layout to a constraint layout:

1. Open your existing layout in Android Studio and select the Design tab at the bottom of the editor window.

2. In the Component Tree window, right-click the layout and click Convert <layout> to ConstraintLayout.

Figure 2. The menu to convert a layout to ConstraintLayout.

Add Constraints with the Layout Editor

By default, a feature called Autoconnect is enabled in the layout editor. This feature automatically creates one or more constraints for each view you drop into the layout.

Figure 3. Autoconnect in action.

Autoconnect might not always connect things the way you want them, but it's easy to adjust or remove each constraint. Although you can disable Autoconnect by clicking Turn off Autoconnect , beware that any views you place in the layout without constraints will, by default, contain no layout information. Although the layout editor shows each view where you dropped it using absolute coordinates, the actual layout manager does not apply those coordinates---if you do not add constraints to the view, then it appears in the top-left corner when running on Android.

At any point while editing your layout, you can request that the layout editor automatically create constraints for all views in the layout by clicking Infer constraints . You should try this with each layout you create to be sure you haven't missed a constraint, which could leave the view floating in the top-left corner.

To create a constraint between a view and the parent ConstraintLayout, click and hold on the view's round handle and drag it to the layout edge. Once the anchor is green, release the mouse to create the constraint.

Figure 4. Adding a constraint to the layout edge.

To create a constraint between two views, click and hold on a handle, then drag it to another widget's constraint handle (figure 5).  To create a constraint using the text baseline between two views, hover your cursor on the elongated anchor below the text until the anchor glows, then click and drag the connection to the baseline of another view (figure 6).

You can also add a vertical or horizontal guideline that's invisible to the user but available for constraint connections, similar to the layout edges. To create a guideline, right-click anywhere in the layout and click Add Vertical Guideline or Add Horizontal Guideline. Now you can create constraints between your views and the guideline.

If you add opposing constraints on a view, then the connection lines become squiggly to indicate the opposing forces. For example, if you add a constraint for the left and right side of a view to the left and right side of the layout, then the view becomes centered by default.

Figure 7. Centering a view by adding a constraint on both sides.

To edit a view's constraints and margins, select the view in the layout editor and click Properties on the right side of the editor. The Properties window includes a layout inspector at the top and fields for other view properties such as a button's text and background.

Figure 8. The Properties window.

When you create connections on opposite sides (as shown in figure 6), you can adjust the relative position in either direction in the Properties window by dragging the slider for either Horizontal bias or Vertical bias.

To remove a constraint, click either end of the connection.

For a walkthrough of basic and advanced layout techniques with the new layout editor, see the ConstraintLayout Codelab.