<p class="p1">In this tutorial,<span style="color: var(--color-text);"> </span><span style="color: var(--color-text);">you’ll learn the basics of creating Android views by using ConstraintLayout to build the UI of your application.</span></p>
<p class="p1">A great Android app not only needs to have a beautiful UI but also optimized performance. Android provides various types of layouts that use different methods to contain child views and determine their positions. Layouts all descend from the <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://developer.android.com/reference/android/view/ViewGroup"><span class="s1"><b>ViewGroup</b></span></a></span> class.</p>
<p class="p1">Some of the most common layouts to use when building your Android UI are <span style="color: #0000ff;"><strong><a style="color: #0000ff;" href="https://developer.android.com/reference/android/widget/FrameLayout">FrameLayout</a></strong>,</span> <span style="color: #0000ff;"><strong><a style="color: #0000ff;" href="https://developer.android.com/reference/android/widget/LinearLayout">LinearLayout</a></strong></span> and <span style="color: #0000ff;"><strong><a style="color: #0000ff;" href="https://developer.android.com/guide/topics/ui/layout/relative">RelativeLayout</a></strong>.</span> They are easy to use, but they each have certain limitations and performance issues when the view hierarchy becomes complex:</p>
<ul class="ul1">
<li class="li1"><strong><span style="color: #008000;">FrameLayout</span></strong> can only position child views by applying gravity relative to their parent.</li>
<li class="li1"><span style="color: #008000;"><strong>LinearLayout</strong></span> doesn’t allow views to overlap one another. But while working with complex UI we make use of multiple nested LinearLayouts which decreases performance.</li>
<li class="li1"><strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout">ConstraintLayout</a></span></strong> is similar to <span style="color: #008000;"><strong><span class="s1">RelativeLayout</span></strong></span> in that all views are laid out according to relationships between sibling views and the parent layout, but it&#8217;s more flexible than <span class="s2">RelativeLayout</span> and easier to use with Android Studio&#8217;s Layout Editor.</li>
</ul>
<h3><strong><span style="color: #000080;">What is ConstraintLayout?</span></strong></h3>
<p class="p1">A <strong><span style="color: #008000;">ConstraintLayout</span></strong> is a ViewGroup that allows you to position and size widgets in a flexible way.</p>
<p class="p1">It allows you to create large and complex layouts with a flat view hierarchy means there are no nested view groups.</p>
<p class="p1">All the power of ConstraintLayout is available directly from the Layout Editor&#8217;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.</p>
<h3 class="p2"><span style="color: #000080;"><b>Add ConstraintLayout to your project</b></span></h3>
<p class="p3">To use ConstraintLayout in your project, add the library as a dependency in the app level <span style="color: #008000;"><strong>build.gradle</strong></span> file, as shown in the example below.</p>
<p class="p3">Note that the latest version might be different than what is shown in the example:</p>
<p><span style="color: #0000ff;"><strong>build.gradle</strong></span></p>
<pre>dependencies {
 
 implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
 
}</pre>
<h3><span style="color: #000080;"><strong>Constraints</strong></span></h3>
<p><strong><span style="color: #008000;">Constraints</span></strong> are the basic building blocks of ConstraintLayout. A constraint represents a connection or alignment to another view, the parent layout, or an invisible guideline. Each constraint defines the view&#8217;s position along either the vertical or horizontal axis.</p>
<p class="p1">To define a view&#8217;s position in <span class="s1">ConstraintLayout</span>, you must add at least one horizontal and one vertical constraint for the view.</p>
<p class="p1">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>
<h4><span style="color: #0000ff;"><strong>Rules for constraints</strong></span></h4>
<ul>
<li>Every view must have at least two constraints: one horizontal and one vertical.</li>
<li>You can create constraints only between a <strong><span style="color: #008000;">constraint handle</span></strong> (<strong>circle on each side of an element</strong>) and an <strong><span style="color: #008000;">anchor point </span></strong>( <strong>this point can be the edge of another view, the edge of the layout, or a guideline</strong>) that share the same plane. That means a handle on one axis (such as horizontal) can&#8217;t be connected to a handle on another axis (such as vertical).</li>
<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>
<h3></h3>
<h3 class="p1"><span style="color: #000080;"><b>Handles</b></span></h3>
<p class="p2">A Constraint is essentially a defined rule for a view which declares it’s positioning and alignment on screen, the ConstraintLayout supports several different types of handles.</p>
<h4 class="p3"><span style="color: #0000ff;"><b>Resize Handle</b></span></h4>
<p class="p2">You can drag the square <strong><span style="color: #008000;">resizing handles</span></strong> to resize the element. While dragging, the handle changes to an angled corner.</p>
<p><img class=" size-full wp-image-1330 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-26-16.19.21.png" alt="Screenshot 2019-11-26 16.19.21" width="204" height="200" /></p>
<p class="p1"> Drag corners to resize the image. By resizing the image, the width and height are fixed to specific dimensions.</p>
<p><img class=" wp-image-1329 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Untitled.gif" alt="Untitled" width="427" height="275" /></p>
<p> ;</p>
<h4 class="p1"><span style="color: #0000ff;"><b>Constraint Handle</b></span></h4>
<p class="p2">The constraint handle can be used to specify the location of the view within the layout.</p>
<p>Click a <strong><span style="color: #008000;">constraint handle</span></strong>, shown as a circle on each side of an element, and then drag to another constraint handle or to parent boundary to create a constraint. The constraint is represented by the zigzag line.</p>
<p class="p2"><img class="aligncenter wp-image-1331" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-26-18.15.24-3551820319-1574772394908.png" alt="Screenshot 2019-11-26 18.15.24" width="232" height="173" /></p>
<p class="p2">For example, these anchors can be used to define that the selected view is always displayed to the right of another view, by a specified margin dp value.</p>
<p class="p2"><img class=" wp-image-1332 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/constraint_handle.gif" alt="constraint_handle" width="434" height="253" /></p>
<p class="p1"><span style="color: #008000;"><b>Or by setting the desired view attribute in the XML layout:</b></span></p>
<pre>app:layout_constraintRight_toRightOf="@+id/img_first"</pre>
<h4></h4>
<h4 class="p1"><span style="color: #0000ff;"><b>Baseline Constraint Handle</b></span></h4>
<p class="p2">By using a <strong><span style="color: #008000;">baseline constraint</span></strong>, you can vertically align elements that have text, such as a TextView, EditText, or Button, so that the text baselines are aligned.</p>
<p class="p2">Use baseline constraints to align elements that use different text sizes.</p>
<p class="p2">Baseline constraints are also useful for aligning the text baselines of elements of different sizes.</p>
<p><img class=" wp-image-1335 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-26-19.09.56.png" alt="Screenshot 2019-11-26 19.09.56" width="294" height="158" /></p>
<p class="p2">This can be set in the layout editor by dragging the baseline anchor of the desired TextView to the baseline of another TextView:</p>
<p><img class=" wp-image-1333 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/baseline_constraint.gif" alt="baseline_constraint" width="566" height="302" /></p>
<p>Now the above two TextViews move together and stay aligned.</p>
<p class="p1"><b>Or by setting the desired view attribute in the XML layout:</b></p>
<pre><;TextView
 android:id="@+id/small_text"
 android:layout_width="114dp"
 android:layout_height="72dp"
 android:text="TextView"
 <span style="color: #008000;"><strong>app:layout_constraintBaseline_toBaselineOf="@+id/big_text"</strong></span>
 tools:layout_editor_absoluteX="264dp" />;</pre>
<p class="p1"><span style="color: #0000ff;"><b>Note: <span style="color: #008000;">A baseline constraint handle can be connected only to another baseline.</span></b></span></p>
<h3><strong><span style="color: #000080;">Adding Constraints</span></strong></h3>
<p class="p1">To add a constraint, do the following:</p>
<p>1.Drag a view from the <span style="color: #008000;"><b>Palette</b></span> window into the editor.<br />
When you add a view in a <span class="s1">ConstraintLayout</span>, it displays a bounding box with square <span style="color: #008000;"><strong>resizing handles</strong></span> on each corner and circular <span style="color: #008000;"><strong>constraint handles</strong></span> on each side.</p>
<p><img class=" wp-image-1358 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-16.51.53-3347994767-1574867774762.png" alt="Screenshot 2019-11-27 16.51.53" width="277" height="169" /></p>
<p>2.Click the view to select it.</p>
<p>3.Do one of the following:</p>
<ul>
<li>Click a constraint handle and drag it to an available anchor point. This point can be the edge of another view, the edge of the layout, or a guideline.</li>
</ul>
<p><img class=" wp-image-1357 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/adding_constraint.gif" alt="adding_constraint" width="291" height="409" /></p>
<ul>
<li>Click one of the <span style="color: #008000;"><b>Create a connection</b></span> buttons in the <span style="color: #008000;"><b>Layout</b></span> section of the <span style="color: #0000ff;"><b>Attributes</b></span> window, as shown below:</li>
</ul>
<p><img class="aligncenter size-full wp-image-1359" src="https://i0.wp.com/c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-17.02.36-2644254892-1574867982885.png?ssl=1&;w=630" alt="Screenshot 2019-11-27 17.02.36" width="315" height="217" /></p>
<h3 id="dc2c" class="kd ke ea ba az kf kg ll ki lm kk ln km lo ko lp kq"><strong><span style="color: #000080;">Deleting Constraints</span></strong></h3>
<p id="377b" class="ip iq ea ba ir b is kr iu ks iw kt iy ku ja kv jc" data-selectable-paragraph="">Within the layout editor, you can easily remove constraints from a view. This can be done in one of two ways.</p>
<h4 id="22b2" class="lg ke ea ba az kf lq lr ls lt lu lv lw lx ly lz ma"><strong><span style="color: #0000ff;">Single Constraints</span></strong></h4>
<p id="84c7" class="ip iq ea ba ir b is kr iu ks iw kt iy ku ja kv jc" data-selectable-paragraph="">You can remove a single constraint by simply clicking on the anchor point of the constraint that you wish to delete.</p>
<ul>
<li>Click on a constraint to select it, and then press <strong><span style="color: #008000;">Delete</span></strong>.</li>
<li>Press and hold <span style="color: #008000;"><strong>Control</strong></span> (Command on macOS), and then click on a constraint anchor.</li>
</ul>
<p><img class=" wp-image-1353 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-16.35.32-3874598248-1574868411977.png" alt="Screenshot 2019-11-27 16.35.32" width="285" height="264" /></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<ul>
<li>In the <span style="color: #008000;"><b>Layout</b></span> section of the <span style="color: #008000;"><b>Attributes</b></span> window, click on a constraint anchor, as shown below:</li>
</ul>
<p><img class="aligncenter size-full wp-image-1354" src="https://i2.wp.com/c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-16.38.31-2375164943-1574868529222.png?ssl=1&;w=826" alt="Screenshot 2019-11-27 16.38.31" width="413" height="249" /></p>
<h4></h4>
<h4 id="d17d" class="lg ke ea ba az kf lq lr ls lt lu lv lw lx ly lz ma"><span style="color: #0000ff;"><strong>All Constraints</strong></span></h4>
<p id="76f7" class="ip iq ea ba ir b is kr iu ks iw kt iy ku ja kv jc" data-selectable-paragraph="">When a view is selected, right-click and select <span style="color: #008000;"><strong>Clear Constraints of Selection. </strong></span>Now it will remove <span style="color: #008000;"><strong class="ir jd">all</strong></span> of the constraints that have been set on that view.</p>
<p data-selectable-paragraph=""><img class=" wp-image-1356 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-16.42.41-525242044-1574868627109.png" alt="Screenshot 2019-11-27 16.42.41" width="396" height="255" /></p>
<h3 class="step-title"><span style="color: #000080;"><strong>The view inspector</strong></span></h3>
<p class="p1">The <span style="color: #008000;"><b>Attributes</b></span> pane shows the view inspector in a square block at the top. The view inspector shows the UI element&#8217;s constraints and margins, and sliders for adjusting the position of the element along the horizontal and vertical axis.</p>
<p><img class="aligncenter size-full wp-image-1336" src="https://i0.wp.com/c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-26-20.23.14-657605972-1574869036564.png?ssl=1&;w=756" alt="Screenshot 2019-11-26 20.23.14" width="378" height="474" /></p>
<p class="p1">In the above figure:</p>
<ol class="ol1">
<li class="li1">Margin values appear on all four sides. Change a margin by clicking the value and choosing a different value.</li>
<li class="li1">Inner lines indicate the constrained width and length.</li>
<li class="li1">Use sliders to change the horizontal and vertical constraint bias for elements with opposing constraints.</li>
</ol>
<h4><strong><span style="color: #000080;">Position elements with constraint bias</span></strong></h4>
<h5><span style="color: #0000ff;"><strong>Horizontal Bias</strong></span></h5>
<p class="p1">This allows us to position a view along the horizontal axis using a bias value, this will be relative to it’s constrained position.</p>
<p class="p1"><img class=" wp-image-1337 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/horizontal_bias.gif" alt="horizontal_bias" width="381" height="239" /></p>
<p class="p1">We can set this using the slider in the layout editor (seen above) or using the attribute in our XML like so:</p>
<pre>app:layout_constraintHorizontal_bias="0.5"</pre>
<h5><span style="color: #0000ff;"><strong>verticle Bias</strong></span></h5>
<p class="p1">This allows us to position a view along the vertical axis using a bias value, this will be relative to it’s constrained position.</p>
<p class="p1"><img class=" wp-image-1338 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/verticle-_bias.gif" alt="verticle _bias" width="355" height="268" /></p>
<p class="p1">We can set this using the slider in the layout editor (seen above) or using the attribute in our XML like so:</p>
<pre>app:layout_constraintVertical_bias="0.5"</pre>
<h4><strong><span style="color: #000080;">Change the element&#8217;s layout width and height</span></strong></h4>
<p class="p1">The inner lines within the view inspector let you change the UI element&#8217;s layout_width and layout_height values relative to constraints. Clicking an inner line cycles through the following options for vertical and horizontal constraints:</p>
<p class="p1"><span style="color: #0000ff;"><b>Fixed</b></span>: Specify the width/height of the element.</p>
<p><img class="" style="color: var(--color-text);" src="https://codelabs.developers.google.com/codelabs/constraint-layout/img/7fb5ded1aedd7246.png" alt="Screen Shot 2016-05-12 at 5.14.18 PM.png" width="105" height="42" /></p>
<p class="p1"><span style="color: #0000ff;"><b>Match Constraints</b></span>: Allow the element to occupy all available space to satisfy the constraint. (Note that this is not the same as the match_parent value for width or height, which sets the element to occupy all available space of the parent view. You shouldn&#8217;t use match_parent for any view in a ConstraintLayout.) In the XML file, the value 0dp appears in the layout_width or layout_height attribute for Match Constraints.</p>
<p><img class="" src="https://codelabs.developers.google.com/codelabs/constraint-layout/img/44fff184b08bc2e4.png" alt="Screen Shot 2016-05-12 at 5.13.12 PM.png" width="110" height="47" /></p>
<p class="p1"><span style="color: #0000ff;"><b>Wrap Content</b></span>: Expand the element as needed to fit its content.</p>
<p><img class="" src="https://codelabs.developers.google.com/codelabs/constraint-layout/img/d066cfdb50a039ba.png" alt="Screen Shot 2016-05-12 at 5.14.04 PM.png" width="106" height="41" /></p>
<h3><span style="color: #000080;"><strong>AutoConnect Tool</strong></span></h3>
<p><img class="alignnone wp-image-1349" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-13.46.25.png" alt="Screenshot 2019-11-27 13.46.25" width="473" height="71" /></p>
<p class="p1"><strong><span style="color: #008000;">Auto-connect</span></strong> allows you to place a view inside the layout editor and have it automatically calculate and set the constraints for you.</p>
<p>The Autoconnect tool <img src="https://codelabs.developers.google.com/codelabs/constraint-layout/img/dd3846009e393c48.png" alt="Screen Shot 2016-05-12 at 8.30.36 PM.png" /> is located in the toolbar. It is enabled by default. For this exercise, ensure that the tool is enabled.</p>
<p class="p1">In the blueprint or the preview, click, then drag any of the views near the corners of the parent view or towards the center of the layout until dotted guidelines appear. As you do so, Android Studio will automatically create new constraints for you.</p>
<p><img class=" wp-image-1342 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Autocontent_tool.gif" alt="Autocontent_tool" width="505" height="404" /></p>
<h3 class="p1"><span style="color: #000080;"><b>Manual Constraints</b></span></h3>
<p class="p2">It’s possible to disable auto-connect if you wish to manually set the constraints within the layout editor. Personally, this gives you much more control over the constraints and saves you time deleting the constraints you don’t need that were automatically set.</p>
<p><img class=" wp-image-1343 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/manual_constraint.gif" alt="manual_constraint" width="528" height="416" /></p>
<p class="p2">To use manual constraints you need to disable auto-connect:</p>
<p><img class="alignnone wp-image-1348" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-13.40.02.png" alt="Screenshot 2019-11-27 13.40.02" width="500" height="86" /></p>
<h3 class="p1"><span style="color: #000080;"><b>Infer Constraints</b></span></h3>
<p><img class="alignnone wp-image-1347" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-13.40.39.png" alt="Screenshot 2019-11-27 13.40.39" width="482" height="78" /></p>
<p class="p2">The Infer Constraints tool infers, or figures out, the constraints you need to match a rough layout of elements. It works by taking into account the positions and sizes of the elements. Drag elements to the layout in the positions you want them, and use the Infer Constraints tool to automatically create the constraint connections.</p>
<p>Before we click on <strong><span style="color: #008000;">infer constraints tool</span></strong> the layout look like this:</p>
<p><img class="alignnone wp-image-1344" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-13.17.48.png" alt="Screenshot 2019-11-27 13.17.48" width="625" height="496" /></p>
<p>Click the<strong><span style="color: #008000;"> Infer Constraints tool</span></strong>. The Layout Editor adds constraints to all of the unconstrained elements in the layout. The resulting layout should look like the following:</p>
<p><img class="alignnone wp-image-1345" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-13.18.59.png" alt="Screenshot 2019-11-27 13.18.59" width="630" height="502" /></p>
<p><span style="color: #000080;"><strong>What&#8217;s the difference between Inference and Autoconnect?</strong></span></p>
<p>The Infer Constraints <img src="https://codelabs.developers.google.com/codelabs/constraint-layout/img/762af6efa02c9471.png" /> tool calculates and sets constraints for all of the elements in a layout, rather than just the selected element. It bases its calculations on inferred relationships between the elements.</p>
<p>The Autoconnect <img src="https://codelabs.developers.google.com/codelabs/constraint-layout/img/dd3846009e393c48.png" alt="Screen Shot 2016-05-12 at 8.30.36 PM.png" /> tool creates constraint connections for a selected element to the element&#8217;s parent.</p>
<h3><span style="color: #000080;"><strong>Default Margin </strong></span></h3>
<p>To create vertically-distributed constraints, you simply connect constraints that have the same margins. A trick to do this quickly is to use the Default Margin tool.</p>
<p>click <span style="color: #008000;"><strong>Margin</strong></span> <img class="inline-icon" src="https://developer.android.com/images/training/constraint-layout/constraint-layout-margin-icon-2x.png" alt="" width="53" height="33" /> in the toolbar to select the default margin for each view that you add to the layout.</p>
<p><img class=" wp-image-1351 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-15.55.02.png" alt="Screenshot 2019-11-27 15.55.02" width="456" height="65" /></p>
<p>After setting the default margin to 60dp when we constrain a view with another view or with parent layout then it will be separated by 60dp.</p>
<p><img class=" wp-image-1350 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/default_margin.gif" alt="default_margin" width="548" height="437" /></p>
<h3><strong><span style="color: #000080;">Clear All Constraints</span></strong></h3>
<p><img class="alignnone wp-image-1346" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-27-13.34.37.png" alt="Screenshot 2019-11-27 13.34.37" width="484" height="94" /></p>
<p class="p1">If the constraints are messed up, you can clear all constraints and restart from scratch. To continue, clear your current constraints with the <span style="color: #008000;"><b>Clear All Constraints</b></span> button.</p>
<h3 class="step-title"><strong><span style="color: #000080;">Use ratios to size elements</span></strong></h3>
<p>You can quickly resize elements by aspect ratio if at least one of the element&#8217;s dimensions is set to match constraints.</p>
<p>By using ratios you can ensure your designs stay perfect while allowing images to be resized on different device screens.</p>
<p>You can see the entire action and result in the following animated figure:</p>
<p><img class="alignnone size-full wp-image-1352" src="https://c1ctech.com/wp-content/uploads/2019/11/using_ratio.gif" alt="using_ratio" width="714" height="376" /></p>
<p>I hope this article will help you in understanding <span style="color: #008000;"><strong>ConstraintLayout</strong></span>, it’s capabilities and how we can use it to create more efficient layouts within our applications.</p>
<p> ;</p>
<p data-selectable-paragraph="">
<p> ;</p>