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.
+
+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.
+
+To use ConstraintLayout in your project, proceed as follows:
+
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.
+Now you're ready to build your layout with ConstraintLayout.
+
+ Figure 4. The menu to convert a layout to ConstraintLayout
To convert an existing layout to a constraint layout, follow these steps:
+To start a new constraint layout file, follow these steps:
+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:
+ ++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. +
+ + + + ++ 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
+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
+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
+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
++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
+Video 4. Adding a view with Autoconnect enabled
+
+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.
+ + +
+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).
+
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".
+ + + 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.
+ + +