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.
- - -