ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are layed out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

Everything you can do with ConstraintLayout is available directly from the Layout Editor's visual tools, because the layout API and the Layout Editor were specially built for each other. So you can build your layout with ConstraintLayout entirely by drag-and-dropping instead of editing the XML.

Figure 1. A ConstraintLayout in the Layout Editor

ConstraintLayout is available in an API library that's compatible with Android 2.3 (API level 9) and higher, and the new layout editor is available in Android Studio 2.2 and higher.

This page provides a guide to building a layout with ConstraintLayout in Android Studio. If you'd like more information about the Layout Editor itself, see the Android Studio guide to Build a UI with Layout Editor.

Constraints overview

To define a view's position in ConstraintLayout, you must add two or more constraints for the view. Each constraint represents a connection or alignment to another view, the parent layout, or an invisible guideline. Each constraint defines the view's position along either the vertical or horizontal axis; so each view must have a minimum of one constraint for each axis, but often more are necessary.

When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints. However, this is only to make editing easier; if a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).

In figure 2, the layout looks good in the editor, but there's no vertical constraint on TextView B. When this layout draws on a device, TextView B horizontally aligns with the left and right edges of the ImageView, but appears at the top of the screen because it has no vertical constraint.

Figure 2. TextView B is missing a vertical constraint

Figure 3. TextView B is now vertically constrained to the ImageView

Although a missing constraint won't cause a compilation error, the Layout Editor indicates missing constraints as an error in the toolbar. To view the errors and other warnings, click Show Warnings and Errors . To help you avoid missing constraints, the Layout Editor can automatically add constraints for you with the Autoconnect and infer constraints features.

Add ConstraintLayout to your project

To use ConstraintLayout in your project, proceed as follows:

1. Ensure you have the latest Constraint Layout library:
   1. Click Tools > Android > SDK Manager.
   2. Click the SDK Tools tab.
   3. Expand Support Repository and then check ConstraintLayout for Android and Solver for ConstraintLayout. Check Show Package Details and take note of the version you're downloading (you'll need this below).

   4. Click OK.
   5. Add the ConstraintLayout library as a dependency in your module-level build.gradle file:

      dependencies {
          compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'
      }
      

      The library version you download may be higher, so be sure the value you specify here matches the version from step 3.

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

Now you're ready to build your layout with ConstraintLayout.

Convert a layout

Figure 4. The menu to convert a layout to ConstraintLayout

To convert an existing layout to a constraint layout, follow these steps:

1. Open your layout in Android Studio and click 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.

Create a new layout

To start a new constraint layout file, follow these steps:

1. Click anywhere in the Project window and then select File > New > XML > Layout XML.
2. Enter a name for the layout file and enter "android.support.constraint.ConstraintLayout" for the Root Tag.
3. Click Finish.

Add a constraint

Start by dragging a view from the Palette window into the editor. When you add a view in a ConstraintLayout, it displays a bounding box with square resizing handles on each corner and circular constraint handles on each side.

Video 1. The left side of a view is constrained to the left side of the parent

Click the view to select it. Then click-and-hold one of the constraint handles and drag the line to an available anchor point (the edge of another view, the edge of the layout, or a guideline). When you release, the constraint is made, with a default margin separating the two views.

When creating constraints, remember the following rules:

• Every view must have at least two constraints: one horizontal and one vertical.
• You can create constraints only between a constraint handle and an anchor point that share the same plane. So a vertical plane (the left and right sides) of a view can be constrained only to another vertical plane; and baselines can constrain only to other baselines.
• Each constraint handle can be used for just one constraint, but you can create multiple constraints (from different views) to the same anchor point.

Video 2. Adding a constraint that opposes an existing one

To remove a constraint, select the view and then click the constraint handle.

If you add opposing constraints on a view, the constraint lines become squiggly like a spring to indicate the opposing forces, as shown in video 2. The effect is most visible when the view size is set to "fixed" or "wrap content," in which case the view is centered between the constraints. If you instead want the view to stretch its size to meet the constraints, switch the size to "any size"; or if you want to keep the current size but move the view so that it is not centered, adjust the constraint bias.

There are many ways to constrain a view, but the following constraint types provide the basic building blocks.

Parent constraint

Connect the side of a view to the corresponding edge of the layout.

In figure 5, the left side of a view is connected to the left edge of the parent layout.

Figure 5. A horizontal constraint to the parent

Position constraint

Define the order of appearance for two views, either vertically or horizontally.

In figure 6, a Button is constrained below an ImageView with a 24dp margin.

Figure 6. A vertical position constraint

Alignment constraint

Align the edge of a view to the same edge of another view.

In figure 7, the left side of a Button is aligned to the left side of an ImageView.

You can offset the alignment by dragging the view inward from the constraint. For example, figure 8 shows the same Button with a 24dp offset alignment. The offset is defined by the constrained view's margin.

Figure 7. A horizontal alignment constraint

Figure 8. An offset horizontal alignment constraint

Baseline alignment constraint

Align the text baseline of a view to the text baseline of another view.

In figure 9, the first line of a TextView is aligned with the text in a Button.

To create a baseline constraint, hover your mouse over the baseline handle for two seconds until the handle blinks white. Then click and drag the line to another baseline.

Figure 9. A baseline alignment constraint

Constrain to a guideline

You can add a vertical or horizontal guideline to which you can attach constraints. You can position the guideline within the layout based on either dp units or percent, relative to the layout's edge.

To create a guideline, click Guidelines in the toolbar, and then click either Add Vertical Guideline or Add Horizontal Guideline.

Click the circle at the edge of the guideline to toggle the measurements used to position the guideline (either percent or dp units from the layout's edge).

Guidelines are not visible to your users.

Video 3. Adding a constraint to a guideline

Use Autoconnect and Infer Constraints

Autoconnect is a persistent mode that automatically creates two or more constraints for each view you add to the layout. Autoconnect is disabled by default. You can enable it by clicking Turn on Autoconnect in the Layout Editor toolbar.

While enabled, Autoconnect creates constraints for each view as you add them; it does not create constraints for existing views in the layout. If you drag a view once the constraints are made, the constraints do not change (though the margins do), so you must delete the constraints if you want to significantly reposition the view.

Alternatively, you can click Infer Constraints to create constraints for all views in the layout.

Infer Constraints is a one-time action that scans the entire layout to determine the most effective set of constraints for all views, so it may create constraints between elements that are far from each other. Autoconnect, however, creates constraints only for the view you are adding, and it creates constraints to only the nearest elements. In either case, you can always modify a constraint by clicking the constraint handle to delete it, and then create a new constraint.

Adjust the view size

You can use the handles on each corner of the view to resize it, but doing so hard codes the width and height values, which you should avoid for most views because hard-coded view sizes cannot adapt to different content and screen sizes. To select from one of the dynamic sizing modes or to define more specific dimensions, click a view and open the Properties window on the right side of the editor. At the top of the window is the view inspector, as shown in figure 10.

Figure 10. The Properties window includes controls for (1) view size, (2) margins, and (3) constraint bias.

The grey square represents the selected view. The symbols inside the square represent the height and width settings as follows:

• Wrap Content: The view expands exactly as needed to fit its contents.
• Any Size: The view expands exactly as needed to match the constraints. The actual value is 0dp because the view has no desired dimensions, but it resizes as needed to meet the constraints. However, if the given dimension has only one constraint, then the view expands to fit its contents. Another way to think of it is "match constraints" (instead of match_parent) because it expands the view as much as possible after accounting for the limits of each constraint and its margins.
• Fixed: You specify the dimension in the text box below or by resizing the view in the editor.

To toggle between these settings, click the symbols.

Note: You should not use match_parent for any view in a ConstraintLayout. Instead use "Any Size" (0dp).

Adjust the constraint bias

When you add a constraint to both sides of a view (and the view size for the same dimension is either "fixed" or "wrap content"), the view becomes centered between the two anchor points by default. When a view is centered, the bias is 50%. You can adjust the bias by dragging the bias slider in the Properties window or by dragging the view, as shown in video 5.

Video 5. Adjusting the constraint bias

If you instead want the view to stretch its size to meet the constraints, switch the size to "any size".

Adjust the view margins

To ensure that all your views are evenly spaced, click Margin in the toolbar to select the default margin for each view that you add to the layout. The button changes to show your current margin selection. Any change you make to the default margin applies only to the views you add from then on.

Figure 11. The toolbar's Margin button. Click to adjust the default margin.

You can control the margin for each view in the Properties window by clicking the number on the line that represents each constraint (in figure 10, the margins are each set to 16dp).

All margins offered by the tool are factors of 8dp to help your views align to Material Design's 8dp square grid recommendations.