diff options
17 files changed, 503 insertions, 0 deletions
diff --git a/docs/html/training/_book.yaml b/docs/html/training/_book.yaml index 891574fbc6ca..ef6b27666c23 100644 --- a/docs/html/training/_book.yaml +++ b/docs/html/training/_book.yaml @@ -898,6 +898,11 @@ toc: value: 順応性のある UI フローの実装 - name: zh-cn-lang value: 实施自适应用户界面流程 + - title: Build a Responsive UI with ConstraintLayout + path: /training/constraint-layout/index.html + path_attributes: + - name: description + value: How to build a layout using ConstraintLayout and the Android Studio Layout Editor. - title: Adding the App Bar path: /training/appbar/index.html path_attributes: diff --git a/docs/html/training/constraint-layout/images/alignment-constraint-offset_2x.png b/docs/html/training/constraint-layout/images/alignment-constraint-offset_2x.png Binary files differnew file mode 100644 index 000000000000..1e4867e6513a --- /dev/null +++ b/docs/html/training/constraint-layout/images/alignment-constraint-offset_2x.png diff --git a/docs/html/training/constraint-layout/images/alignment-constraint_2x.png b/docs/html/training/constraint-layout/images/alignment-constraint_2x.png Binary files differnew file mode 100644 index 000000000000..afe7d4aed282 --- /dev/null +++ b/docs/html/training/constraint-layout/images/alignment-constraint_2x.png diff --git a/docs/html/training/constraint-layout/images/baseline-constraint_2x.png b/docs/html/training/constraint-layout/images/baseline-constraint_2x.png Binary files differnew file mode 100644 index 000000000000..dfc35226fdb5 --- /dev/null +++ b/docs/html/training/constraint-layout/images/baseline-constraint_2x.png diff --git a/docs/html/training/constraint-layout/images/constraint-fail-fixed_2x.png b/docs/html/training/constraint-layout/images/constraint-fail-fixed_2x.png Binary files differnew file mode 100644 index 000000000000..be9d54f4fbf5 --- /dev/null +++ b/docs/html/training/constraint-layout/images/constraint-fail-fixed_2x.png diff --git a/docs/html/training/constraint-layout/images/constraint-fail_2x.png b/docs/html/training/constraint-layout/images/constraint-fail_2x.png Binary files differnew file mode 100644 index 000000000000..3f28ef7906ab --- /dev/null +++ b/docs/html/training/constraint-layout/images/constraint-fail_2x.png diff --git a/docs/html/training/constraint-layout/images/layout-editor-convert-to-constraint_2x.png b/docs/html/training/constraint-layout/images/layout-editor-convert-to-constraint_2x.png Binary files differnew file mode 100644 index 000000000000..ace31a6105d9 --- /dev/null +++ b/docs/html/training/constraint-layout/images/layout-editor-convert-to-constraint_2x.png diff --git a/docs/html/training/constraint-layout/images/layout-editor-margin-callout_2-2_2x.png b/docs/html/training/constraint-layout/images/layout-editor-margin-callout_2-2_2x.png Binary files differnew file mode 100644 index 000000000000..07680227fbb7 --- /dev/null +++ b/docs/html/training/constraint-layout/images/layout-editor-margin-callout_2-2_2x.png diff --git a/docs/html/training/constraint-layout/images/layout-editor-properties-callouts_2-2_2x.png b/docs/html/training/constraint-layout/images/layout-editor-properties-callouts_2-2_2x.png Binary files differnew file mode 100644 index 000000000000..b4ffb2cd946a --- /dev/null +++ b/docs/html/training/constraint-layout/images/layout-editor-properties-callouts_2-2_2x.png diff --git a/docs/html/training/constraint-layout/images/layout-editor_2-2_2x.png b/docs/html/training/constraint-layout/images/layout-editor_2-2_2x.png Binary files differnew file mode 100644 index 000000000000..72a4e401a05c --- /dev/null +++ b/docs/html/training/constraint-layout/images/layout-editor_2-2_2x.png diff --git a/docs/html/training/constraint-layout/images/parent-constraint_2x.png b/docs/html/training/constraint-layout/images/parent-constraint_2x.png Binary files differnew file mode 100644 index 000000000000..0414f1d5b34b --- /dev/null +++ b/docs/html/training/constraint-layout/images/parent-constraint_2x.png diff --git a/docs/html/training/constraint-layout/images/position-constraint_2x.png b/docs/html/training/constraint-layout/images/position-constraint_2x.png Binary files differnew file mode 100644 index 000000000000..9f93e72dcd4d --- /dev/null +++ b/docs/html/training/constraint-layout/images/position-constraint_2x.png diff --git a/docs/html/training/constraint-layout/images/thumbnail-add-layout-guideline_2-2.png b/docs/html/training/constraint-layout/images/thumbnail-add-layout-guideline_2-2.png Binary files differnew file mode 100644 index 000000000000..f863e5f99bd1 --- /dev/null +++ b/docs/html/training/constraint-layout/images/thumbnail-add-layout-guideline_2-2.png diff --git a/docs/html/training/constraint-layout/images/thumbnail-adjust-constraint-bias.png b/docs/html/training/constraint-layout/images/thumbnail-adjust-constraint-bias.png Binary files differnew file mode 100644 index 000000000000..d61e9b2354f1 --- /dev/null +++ b/docs/html/training/constraint-layout/images/thumbnail-adjust-constraint-bias.png diff --git a/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-first.png b/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-first.png Binary files differnew file mode 100644 index 000000000000..97471025b007 --- /dev/null +++ b/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-first.png diff --git a/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-second.png b/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-second.png Binary files differnew file mode 100644 index 000000000000..940b84955278 --- /dev/null +++ b/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-second.png diff --git a/docs/html/training/constraint-layout/index.html b/docs/html/training/constraint-layout/index.html new file mode 100644 index 000000000000..62eaf15f62a7 --- /dev/null +++ b/docs/html/training/constraint-layout/index.html @@ -0,0 +1,498 @@ +<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> |
