| <html devsite> | |
| <head> | |
| <title>Build a Responsive UI with ConstraintLayout</title> | |
| <meta name="book_path" value="/training/_book.yaml" /> | |
| <meta name="top_category" value="develop" /> | |
| <meta name="subcategory" value="training" /> | |
| </head> | |
| <body> | |
| <div id="tb-wrapper"> | |
| <div id="tb"> | |
| <h2>In this document</h2> | |
| <ol> | |
| <li><a href="#constraints-overview">Constraints overview</a></li> | |
| <li><a href="#add-constraintlayout-to-your-project">Add ConstraintLayout to your project</a></li> | |
| <li><a href="#add-a-constraint">Add a constraint</a></li> | |
| <li><a href="#use-autoconnect-and-infer-constraints">Use Autoconnect and Infer Constraints</a></li> | |
| <li><a href="#adjust-the-view-size">Adjust the view size</a></li> | |
| <li><a href="#adjust-the-constraint-bias">Adjust the constraint bias</a></li> | |
| <li><a href="#adjust-the-view-margins">Adjust the view margins</a></li> | |
| </ol> | |
| </div> | |
| </div> | |
| <p><code>ConstraintLayout</code> allows you to create large and complex layouts with a flat view | |
| hierarchy (no nested view groups). It's similar to <code>RelativeLayout</code> in that all views are | |
| layed out according to relationships between sibling views and the parent layout, but it's more | |
| flexible than <code>RelativeLayout</code> and easier to use with Android Studio's Layout Editor. | |
| </p> | |
| <p>Everything you can do with <code>ConstraintLayout</code> 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 <code>ConstraintLayout</code> entirely by drag-and-dropping instead of editing the XML. | |
| </p> | |
| <img src="/training/constraint-layout/images/layout-editor_2-2_2x.png" alt="" | |
| width="640"/> | |
| <p class="img-caption"><b>Figure 1.</b> A <code>ConstraintLayout</code> in the Layout Editor</p> | |
| <p> | |
| <code>ConstraintLayout</code> 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. | |
| </p> | |
| <p> | |
| This page provides a guide to building a layout with <code>ConstraintLayout</code> in Android | |
| Studio. If you'd like more information about the Layout Editor itself, see the | |
| Android Studio guide to <a href="/studio/write/layout-editor.html">Build a UI with | |
| Layout Editor</a>. | |
| </p> | |
| <h2 id="constraints-overview">Constraints overview</h2> | |
| <p> | |
| To define a view's position in <code>ConstraintLayout</code>, you must add two | |
| or more <em>constraints</em> 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. | |
| </p> | |
| <p> | |
| 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).</p> | |
| <p>In figure 2, the layout looks good in the | |
| editor, but there's no vertical constraint on <code>TextView B</code>. When this | |
| layout draws on a device, <code>TextView B</code> horizontally aligns with the left and | |
| right edges of the <code>ImageView</code>, but appears at the top of the screen because | |
| it has no vertical constraint. | |
| </p> | |
| <div class="cols"> | |
| <div class="col-1of2"> | |
| <img src="/training/constraint-layout/images/constraint-fail_2x.png" width="100%" alt="" /> | |
| <p class="img-caption"><strong>Figure 2.</strong> <code>TextView B</code> is missing a | |
| vertical constraint</p> | |
| </div> | |
| <div class="col-1of2"> | |
| <img src="/training/constraint-layout/images/constraint-fail-fixed_2x.png" width="100%" alt="" /> | |
| <p class="img-caption"><strong>Figure 3.</strong> <code>TextView B</code> is now vertically | |
| constrained to the <code>ImageView</code></p> | |
| </div> | |
| </div> | |
| <p> | |
| 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 <strong>Show Warnings and Errors</strong> | |
| <img src="/studio/images/buttons/layout-editor-errors.png" class="inline-icon" alt="" />. | |
| To help you avoid missing constraints, the Layout Editor can automatically add | |
| constraints for you with the <a | |
| href="#use-autoconnect-and-infer-constraints">Autoconnect and infer | |
| constraints</a> features. | |
| </p> | |
| <h2 id="add-constraintlayout-to-your-project">Add ConstraintLayout to your project</h2> | |
| <p> | |
| To use <code>ConstraintLayout</code> in your project, proceed as follows: | |
| </p> | |
| <ol> | |
| <li>Ensure you have the latest Constraint Layout library: | |
| <ol> | |
| <li>Click <strong>Tools > Android > SDK Manager</strong>. | |
| <li>Click the <strong>SDK Tools</strong> tab. | |
| <li>Expand <strong>Support Repository</strong> and then check | |
| <b>ConstraintLayout for Android</b> and <b>Solver for ConstraintLayout</b>. | |
| Check <b>Show Package Details</b> and take note of the version you're downloading | |
| (you'll need this below).</p> | |
| <li>Click <strong>OK</strong>. | |
| <li>Add the ConstraintLayout library as a dependency in your module-level | |
| <code>build.gradle</code> file: | |
| <pre> | |
| dependencies { | |
| compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8' | |
| } | |
| </pre> | |
| <p>The library version you download may be higher, so be sure the value you specify | |
| here matches the version from step 3.</p> | |
| </li> | |
| <li>In the toolbar or sync notification, click <strong>Sync Project with Gradle | |
| Files</strong>.</li> | |
| </ol> | |
| </li> | |
| </ol> | |
| <p>Now you're ready to build your layout with <code>ConstraintLayout</code>.</p> | |
| <h3 id="convert">Convert a layout</h3> | |
| <div class="figure" style="width:415px"> | |
| <img src="/training/constraint-layout/images/layout-editor-convert-to-constraint_2x.png" | |
| width="415" alt="" /> | |
| <p class="img-caption"> | |
| <b>Figure 4.</b> The menu to convert a layout to <code>ConstraintLayout</code></p> | |
| </div> | |
| <p>To convert an existing layout to a constraint layout, follow these steps:</p> | |
| <ol> | |
| <li>Open your layout in Android Studio and click the <strong>Design</strong> tab | |
| at the bottom of the editor window. | |
| <li>In the <strong>Component Tree</strong> window, right-click the layout and | |
| click <strong>Convert <em>layout</em> to ConstraintLayout</strong>.</li> | |
| </ol> | |
| <h3 id="createNew">Create a new layout</h3> | |
| <p>To start a new constraint layout file, follow these steps:</p> | |
| <ol> | |
| <li>Click anywhere in the <strong>Project</strong> window and then select | |
| <strong>File > New > XML > Layout XML</strong>. | |
| <li>Enter a name for the layout file and enter | |
| "android.support.constraint.ConstraintLayout" for the <b>Root Tag</b>. | |
| <li>Click <strong>Finish</strong>.</li> | |
| </ol> | |
| <h2 id="add-a-constraint">Add a constraint</h2> | |
| <p>Start by dragging a view from the <b>Palette</b> window into the editor. | |
| When you add a view in a <code>ConstraintLayout</code>, it displays a bounding box with square | |
| resizing handles on each corner and circular constraint handles on each side. | |
| </p> | |
| <div class="figure" style="width:460px"> | |
| <div class="video-wrapper"> | |
| <video controls poster="/training/constraint-layout/images/thumbnail-studio-constraint-first.png" | |
| onclick="this.play()" width="460"> | |
| <source src="https://storage.googleapis.com/androiddevelopers/videos/studio/studio-constraint-first.mp4" type="video/mp4"> | |
| <img src="/training/constraint-layout/images/thumbnail-studio-constraint-first" alt="" /> | |
| </video> | |
| </div> | |
| <p class="img-caption"> | |
| <strong>Video 1. </strong>The left side of a view is constrained to the left side of the parent | |
| </p> | |
| </div> | |
| <p> | |
| 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 href="#adjust-the-view-margins">a default margin</a> | |
| separating the two views. | |
| </p> | |
| <p>When creating constraints, remember the following rules:</p> | |
| <ul> | |
| <li>Every view must have at least two constraints: one horizontal and one | |
| vertical. | |
| <li>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. | |
| <li>Each constraint handle can be used for just one constraint, but you can | |
| create multiple constraints (from different views) to the same anchor | |
| point.</li> | |
| </ul> | |
| <div class="figure" style="width:460px"> | |
| <div class="video-wrapper"> | |
| <video controls poster="/training/constraint-layout/images/thumbnail-studio-constraint-second.png" | |
| onclick="this.play()" width="460"> | |
| <source src="https://storage.googleapis.com/androiddevelopers/videos/studio/studio-constraint-second.mp4" type="video/mp4"> | |
| <img src="/training/constraint-layout/images/thumbnail-studio-constraint-second.png" alt="" /> | |
| </video> | |
| </div> | |
| <p class="img-caption"> | |
| <strong>Video 2. </strong>Adding a constraint that opposes an existing one | |
| </p> | |
| </div> | |
| <p> | |
| To remove a constraint, select the view and then click the constraint handle. | |
| </p> | |
| <p>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, <a | |
| href="#adjust-the-view-size">switch the size to "any size"</a>; or if you want | |
| to keep the current size but move the view so that it is not centered, <a | |
| href="#adjust-the-constraint-bias">adjust the constraint bias</a>. | |
| </p> | |
| <p> | |
| There are many ways to constrain a view, but the following constraint types | |
| provide the basic building blocks. | |
| </p> | |
| <h3>Parent constraint</h3> | |
| <div class="cols"> | |
| <div class="col-2of3"> | |
| <p> | |
| Connect the side of a view to the corresponding edge of the layout. | |
| <p> | |
| In figure 5, the left side of a view is connected to the left edge of the | |
| parent layout. | |
| <p> | |
| </div> | |
| <div class="col-1of3"> | |
| <img src="/training/constraint-layout/images/parent-constraint_2x.png" width="100%" alt=""> | |
| <p class="img-caption"><strong>Figure 5. </strong>A horizontal constraint to the parent</p> | |
| </div> | |
| </div> | |
| <h3>Position constraint</h3> | |
| <div class="cols"> | |
| <div class="col-2of3"> | |
| <p>Define the order of appearance for two views, either vertically or horizontally.</p> | |
| <p>In figure 6, a <code>Button</code> is constrained below an <code>ImageView</code> with a 24dp | |
| margin.</p> | |
| </div> | |
| <div class="col-1of3"> | |
| <img src="/training/constraint-layout/images/position-constraint_2x.png" width="100%" alt=""> | |
| <p class="img-caption"><strong>Figure 6.</strong> A vertical position constraint</p> | |
| </div> | |
| </div> | |
| <h3>Alignment constraint</h3> | |
| <div class="cols"> | |
| <div class="col-1of3"> | |
| <p>Align the edge of a view to the same edge of another view.<p> | |
| <p>In figure 7, the left side of a <code>Button</code> is aligned to the left side of an | |
| <code>ImageView</code>.</p> | |
| <p>You can offset the alignment by dragging the view | |
| inward from the constraint. For example, figure 8 shows the same | |
| <code>Button</code> with a 24dp offset alignment. | |
| The offset is defined by the constrained view's margin.</p> | |
| </div> | |
| <div class="col-1of3"> | |
| <img src="/training/constraint-layout/images/alignment-constraint_2x.png" width="100%" alt=""> | |
| <p class="img-caption"><strong>Figure 7.</strong> A horizontal alignment constraint</p> | |
| </div> | |
| <div class="col-1of3"> | |
| <img src="/training/constraint-layout/images/alignment-constraint-offset_2x.png" width="100%" | |
| alt=""> | |
| <p class="img-caption"><strong>Figure 8.</strong> An offset horizontal alignment constraint</p> | |
| </div> | |
| </div> | |
| <h3>Baseline alignment constraint</h3> | |
| <div class="cols"> | |
| <div class="col-2of3"> | |
| <p>Align the text baseline of a view to the text baseline of another view.</p> | |
| <p>In figure 9, the first line of a <code>TextView</code> is aligned with the text in a | |
| <code>Button</code>.</p> | |
| <p>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.</p> | |
| </div> | |
| <div class="col-1of3"> | |
| <img src="/training/constraint-layout/images/baseline-constraint_2x.png" width="100%" alt=""> | |
| <p class="img-caption"><strong>Figure 9.</strong> A baseline alignment constraint</p> | |
| </div> | |
| </div> | |
| <h3 id="constrain-to-a-guideline">Constrain to a guideline</h3> | |
| <div class="cols"> | |
| <div class="col-1of2"> | |
| <p> | |
| 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. | |
| </p> | |
| <p> | |
| To create a guideline, click <strong>Guidelines</strong> | |
| <img src="/studio/images/buttons/layout-editor-guidelines.png" class="inline-icon" alt="" /> | |
| in the toolbar, and then click either <strong>Add Vertical Guideline</strong> | |
| or <strong>Add Horizontal Guideline</strong>. | |
| </p> | |
| <p> | |
| 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). | |
| </p> | |
| <p> | |
| Guidelines are not visible to your users. | |
| </p> | |
| </div> | |
| <div class="col-1of2"> | |
| <div class="video-wrapper"> | |
| <video controls poster="/training/constraint-layout/images/thumbnail-add-layout-guideline_2-2.png" | |
| onclick="this.play()" width="100%"> | |
| <source src="https://storage.googleapis.com/androiddevelopers/videos/studio/add-layout-guideline_2-2.mp4" type="video/mp4"> | |
| <img src="/training/constraint-layout/images/thumbnail-add-layout-guideline_2-2.png" alt="" /> | |
| </video> | |
| </div> | |
| <p class="img-caption"><strong>Video 3.</strong> Adding a constraint to a guideline</p> | |
| </div> | |
| </div> | |
| <h2 id="use-autoconnect-and-infer-constraints">Use Autoconnect and Infer Constraints</h2> | |
| <div class="figure" style="width:460px"> | |
| <div class="video-wrapper"> | |
| <video controls poster="" | |
| onclick="this.play()" width="460"> | |
| <source src="https://storage.googleapis.com/androiddevelopers/videos/studio/constraint-autoconnect_2-2.mp4" type="video/mp4"> | |
| </video> | |
| </div> | |
| <p class="img-caption"><b>Video 4.</b> Adding a view with Autoconnect enabled</p> | |
| </div> | |
| <p> | |
| 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 <strong>Turn on Autoconnect</strong> | |
| <img src="/studio/images/buttons/layout-editor-autoconnect-on.png" class="inline-icon" alt="" /> | |
| in the Layout Editor toolbar. | |
| </p> | |
| <p>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.</p> | |
| <p>Alternatively, you can click <strong>Infer Constraints</strong> | |
| <img src="/studio/images/buttons/layout-editor-infer.png" class="inline-icon" alt="" /> | |
| to create constraints for all views in the layout. | |
| </p> | |
| <p>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.</p> | |
| <h2 id="adjust-the-view-size">Adjust the view size</h2> | |
| <p> | |
| 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 <strong>Properties</strong> | |
| <img src="/studio/images/buttons/window-properties.png" class="inline-icon" alt="" /> | |
| window on the right side of the editor. At the top of the window is the view | |
| inspector, as shown in figure 10. | |
| </p> | |
| <div class="figure" style="width:287px" > | |
| <img src="/training/constraint-layout/images/layout-editor-properties-callouts_2-2_2x.png" alt="" | |
| width="287" /> | |
| <p class="img-caption"><strong>Figure 10.</strong> The <b>Properties</b> window includes controls for | |
| <strong>(1)</strong> view size, <strong>(2)</strong> margins, and | |
| <strong>(3)</strong> constraint bias.</p> | |
| </div> | |
| <p> | |
| The grey square represents the selected view. The symbols inside the square | |
| represent the height and width settings as follows: | |
| </p> | |
| <ul> | |
| <li> | |
| <img src="/studio/images/buttons/layout-width-wrap.png" class="inline-icon" alt="" /> | |
| <strong>Wrap Content</strong>: The view expands exactly as needed to fit its | |
| contents. | |
| <li> | |
| <img src="/studio/images/buttons/layout-width-match.png" class="inline-icon" alt="" /> | |
| <strong>Any Size</strong>: 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 <code>match_parent</code>) because it | |
| expands the view as much as possible after accounting for the limits of each | |
| constraint and its margins. | |
| <li> | |
| <img src="/studio/images/buttons/layout-width-fixed.png" class="inline-icon" alt="" /> | |
| <strong>Fixed</strong>: You specify the dimension in the text box below or by | |
| resizing the view in the editor.</li> | |
| </ul> | |
| <p>To toggle between these settings, click the symbols.</p> | |
| <p class="note"><strong>Note</strong>: You should not use <code>match_parent</code> for any view | |
| in a <code>ConstraintLayout</code>. Instead use "Any Size" (<code>0dp</code>). | |
| </p> | |
| <h2 id="adjust-the-constraint-bias">Adjust the constraint bias</h2> | |
| <p>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 <b>Properties</b> window or by dragging the view, as shown in video 5.</p> | |
| <div class="video-wrapper" style="max-width:740px"> | |
| <video controls poster="/training/constraint-layout/images/thumbnail-adjust-constraint-bias.png" | |
| onclick="this.play();$(this.parentElement).addClass('playing');"> | |
| <source src="https://storage.googleapis.com/androiddevelopers/videos/studio/adjust-constraint-bias.mp4" type="video/mp4"> | |
| <img src="/training/constraint-layout/images/thumbnail-adjust-constraint-bias.png" alt="" /> | |
| </video> | |
| </div> | |
| <p class="img-caption"><b>Video 5.</b> Adjusting the constraint bias</p> | |
| <p>If you instead want the view to stretch its size to meet the constraints, <a href="#adjust-the- | |
| view-size">switch the size to "any size"</a>.</p> | |
| <h2 id="adjust-the-view-margins">Adjust the view margins</h2> | |
| <p> To ensure that all your views are evenly spaced, click <strong>Margin</strong> <img | |
| src="/studio/images/buttons/layout-editor-margin.png" class="inline-icon" alt="" /> 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. </p> | |
| <img src="/training/constraint-layout/images/layout-editor-margin-callout_2-2_2x.png" | |
| alt="" width="232"/> | |
| <p class="img-caption"><strong>Figure 11.</strong> The toolbar's <b>Margin</b> button. | |
| Click to adjust the default margin. | |
| </p> | |
| <p> You can control the margin for each view in the <strong>Properties</strong> window by clicking | |
| the number on the line that represents each constraint (in figure 10, the margins are each set to | |
| 16dp). </p> | |
| <p> All margins offered by the tool are factors of 8dp to help your views align to Material Design's | |
| <a href="https://material.google.com/layout/metrics-keylines.html">8dp square grid | |
| recommendations</a>. </p> | |
| </body> | |
| </html> |