<p>Android <strong><span style="color: #008000;">ConstraintLayout</span></strong> helps you to create large and complex layouts with a flat view hierarchy without nested view groups. This helps to create high performing layouts. Android Studio&#8217;s Layout Editor makes it really easy to define the constraints for the views.</p>
<p class="p1">ConstraintLayout, which is now the default layout in Android Studio, gives you many ways to place objects. You can constrain them to their container, to each other or to guidelines.</p>
<p>In this ConstraintLayout tutorial, you’ll learn various types of constraints that you can use to build a UI with constraint layout is explained in detail.</p>
<p>There are currently various types of constraints that you can use:</p>
<ul>
<li><strong><span style="color: #0000ff;">Relative Positioning</span></strong></li>
<li><strong><span style="color: #0000ff;">Center Positioning</span></strong></li>
<li><strong><span style="color: #0000ff;">Circular Positioning</span></strong></li>
<li><strong><span style="color: #0000ff;">Dimension Constraint</span></strong></li>
<li><strong><span style="color: #0000ff;">Chains</span></strong></li>
<li><strong><span style="color: #0000ff;">Virtual Helper Objects</span></strong></li>
</ul>
<h3></h3>
<h3><span style="color: #000080;"><strong>Relative Positioning</strong></span></h3>
<p><span style="color: #008000;"><strong>Relative positioning</strong></span> is to constraint a given side of the widget relative to a side of any other widget or to the parent ViewGroup either horizontally or vertically.</p>
<p>You can constrain a widget on the horizontal and vertical axis:</p>
<ul>
<li><strong><span style="color: #0000ff;">Horizontal Axis</span></strong>: left, right, start and end sides</li>
<li><strong><span style="color: #0000ff;">Vertical Axis</span></strong>: top, bottom sides and text baseline</li>
</ul>
<p>Given below is the basic format of the attribute for relative positioning:</p>
<p><strong><span style="color: #008000;">app: layout_constraint<span style="color: #0000ff;">[Source Side]</span>_to<span style="color: #0000ff;">[Target Side]</span>Of=&#8221;<span style="color: #0000ff;">[Target id or parent]</span>&#8220;</span></strong></p>
<p class="p1">Here is the list of available Relative constraints :</p>
<ul class="ul1">
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintLeft_toLeftOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintLeft_toRightOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintRight_toLeftOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintRight_toRightOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintTop_toTopOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintTop_toBottomOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintBottom_toTopOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintBottom_toBottomOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintBaseline_toBaselineOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintStart_toEndOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintStart_toStartOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintEnd_toStartOf</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintEnd_toEndOf</b></span></li>
</ul>
<p><span style="color: #008000;"><strong><span style="color: #0000ff;">For example</span>,</strong></span> in order to position button B to the right of button A we will constrain the left anchor point of button B to the right anchor point of button A with margin of 60dp.</p>
<p><img class="wp-image-1368 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/relative_positioning.gif" alt="relative_positioning" width="486" height="250" /></p>
<p>This is achieved using the attribute:</p>
<pre>app: layout_constraintLeft_toRightOf = "@+id/buttonA"</pre>
<h3></h3>
<h3><span style="color: #000080;"><strong>Center Positioning</strong></span></h3>
<p><strong><span style="color: #008000;">Center positioning</span></strong> constraint is used to achieve the same behavior that we achieve using the below attributes of RelativeLayout:</p>
<ul>
<li><strong><span style="color: #0000ff;">layout_centerInParent</span></strong></li>
<li><strong><span style="color: #0000ff;">layout_centerHorizontal</span></strong></li>
<li><strong><span style="color: #0000ff;">layout_centerVerticle</span></strong></li>
</ul>
<p>For centering horizontally or vertically we need to relatively constraint the widget between two <strong><span style="color: #000000;">targets</span></strong>.</p>
<p>The <span style="color: #008000;"><strong>Target</strong></span> can either be widget&#8217;s anchor point or the parent&#8217;s anchor point.</p>
<p><strong><span style="color: #0000ff;">For example</span></strong>, below you can see we want <span style="color: #008000;"><strong>ButtonA</strong></span> to be at the center of the parent, <strong><span style="color: #008000;">ButtonB</span></strong> to be at the left of ButtonA and horizontally-centered and <span style="color: #008000;"><strong>ButtonC</strong></span> to be below ButtonA and vertically_centered.</p>
<p><img class="wp-image-1369 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/center_positioning.gif" alt="center_positioning" width="291" height="470" /></p>
<p>You can also place a view at <span style="color: #008000;"><strong>horizontally-centered</strong></span> or <strong><span style="color: #008000;">vertically-centered</span></strong> instead of dragging an anchor point and connecting it with another anchor point as we have done above by doing this:</p>
<p><img class="wp-image-1370 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-29-11.57.20.png" alt="Screenshot 2019-11-29 11.57.20" width="464" height="391" /></p>
<p>There might be a requirement where you don&#8217;t want the element to be precisely at the center instead you want it to be some x percent to the <span style="color: #008000;"><strong>left or right/top or bottom</strong></span> from the center in that case an interesting constraint comes into play known as <span style="color: #0000ff;"><strong>bias</strong></span>.</p>
<p><strong><span style="color: #008000;">Bias</span></strong> favor one side over another using the bias attributes:</p>
<ul class="ul1">
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintHorizontal_bias</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintVertical_bias</b></span></li>
</ul>
<p><strong><span style="color: #0000ff;">For example,</span></strong> the following will make the top side with a 30% bias instead of the default 50%, such that the top side will be shorter, with the widget leaning more toward the top side :</p>
<p><img class="wp-image-1371 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/center_positioning_with_bias.gif" alt="center_positioning_with_bias" width="550" height="386" /></p>
<p>Or you can simply add the attribute in buttonA:</p>
<pre>app:layout_constraintVertical_bias="0.3"</pre>
<h3></h3>
<h3><span style="color: #000080;"><strong>Circular Positioning</strong></span></h3>
<p><strong><span style="color: #008000;">Circular Positioning</span></strong> constraint allows us to constrain the center of a widget relative to the center of another widget, at an angle and a distance.</p>
<p>Using this constraint we can align a widget on a circle.</p>
<h3> <img class="alignnone size-full wp-image-1373" src="https://c1ctech.com/wp-content/uploads/2019/11/circular_positioning1.png" alt="circular_positioning1" width="225" height="225" /><img class="alignnone size-full wp-image-1374" src="https://c1ctech.com/wp-content/uploads/2019/11/circular_positioning2.png" alt="circular_positioning2" width="225" height="225" /></h3>
<p>Following are the attributes for circular positioning constraint:</p>
<ul class="ul1">
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintCircle</b></span> =&#8221;<strong><span style="color: #008000;">[references another widget id]</span></strong>&#8220;</li>
<li class="li1"><span style="color: #0000ff;"><span class="s2"><b>layout_constraintCircleRadius</b></span> =&#8221;<strong><span style="color: #008000;">[</span></strong></span><strong><span style="color: #008000;">the distance to the other widget center in dp]</span></strong>&#8220;</li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintCircleAngle</b></span> =&#8221;<strong><span style="color: #008000;">[the angle the widget should be at (in degrees, from 0 to 360) of type int]</span></strong>&#8220;</li>
</ul>
<p><span style="color: #0000ff;"><strong>For example,</strong></span> we have <span style="color: #008000;"><strong>buttonA</strong></span>, <span style="color: #008000;"><strong>buttonB</strong></span>, <span style="color: #008000;"><strong>buttonC</strong></span>, and <span style="color: #008000;"><strong>buttonD</strong></span>. Now we want buttonB, buttonC, and buttonD to be arranged around buttonA.</p>
<p><img class="wp-image-1376 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-29-14.32.18-546521047-1575289605841.png" alt="Screenshot 2019-11-29 14.32.18" width="356" height="360" /></p>
<p>To achieve the above UI we have to write the following code in our xml file:</p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/linearLayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">;


 <;Button
 android:id="@+id/buttonA"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@drawable/bg_redcolor"
 android:text="Button A"
 android:textColor="@android:color/white"
 android:textSize="18sp"
 tools:layout_editor_absoluteX="243dp"
 tools:layout_editor_absoluteY="290dp" />;

 <;Button
 android:id="@+id/buttonB"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@drawable/bg_redcolor"
 android:text="Button B"
 android:textColor="@android:color/white"
 android:textSize="18sp"
 <strong><span style="color: #008000;">app:layout_constraintCircle="@id/buttonA"</span></strong>
<strong><span style="color: #008000;"> app:layout_constraintCircleAngle="315"</span></strong>
<strong><span style="color: #008000;"> app:layout_constraintCircleRadius="200dp"</span></strong>
 tools:layout_editor_absoluteX="252dp"
 tools:layout_editor_absoluteY="192dp" />;

 <;Button
 android:id="@+id/buttonC"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@drawable/bg_redcolor"
 android:text="Button C"
 android:textColor="@android:color/white"
 android:textSize="18sp"
 <span style="color: #008000;"><strong>app:layout_constraintCircle="@id/buttonA"</strong></span>
<span style="color: #008000;"><strong> app:layout_constraintCircleAngle="360"</strong></span>
<span style="color: #008000;"><strong> app:layout_constraintCircleRadius="200dp"</strong></span>
 tools:layout_editor_absoluteX="225dp"
 tools:layout_editor_absoluteY="341dp" />;

 <;Button
 android:id="@+id/buttonD"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@drawable/bg_redcolor"
 android:text="Button D"
 android:textColor="@android:color/white"
 android:textSize="18sp"
 <strong><span style="color: #008000;">app:layout_constraintCircle="@id/buttonA"</span></strong>
<strong><span style="color: #008000;"> app:layout_constraintCircleAngle="45"</span></strong>
<strong><span style="color: #008000;"> app:layout_constraintCircleRadius="200dp"</span></strong>
 tools:layout_editor_absoluteX="313dp"
 tools:layout_editor_absoluteY="637dp" />;
 
<;/androidx.constraintlayout.widget.ConstraintLayout>;</pre>
<h3></h3>
<h3><span style="color: #000080;"><strong>Dimension Constraints</strong></span></h3>
<p class="p1">The dimension of the widgets can be specified by setting the <span class="s1" style="color: #008000;"><b>android:layout_width</b></span> and <span class="s1" style="color: #008000;"><b>android:layout_height</b></span> attributes in 3 different ways:</p>
<ul class="ul1">
<li class="li1">Hardcode value in <span style="color: #0000ff;"><strong>dp</strong></span></li>
<li class="li1"><span class="s1" style="color: #0000ff;"><b>WRAP_CONTENT</b></span></li>
<li class="li1"><span class="s1" style="color: #0000ff;"><b>MATCH_CONSTRAINT</b></span></li>
</ul>
<p><span style="color: #800080;"><strong>Note</strong></span> : <strong>In constraintLayout use of MATCH_PARENT is discouraged because MATCH_PARENT does not take constraints applied on the widget into consideration.</strong></p>
<p><strong><span style="color: #0000ff;">WRAP_CONTENT</span></strong></p>
<p>The widget with its dimension set to WRAP_CONTENT will only take the space that is needed.</p>
<p><img class="wp-image-1380 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-29-15.29.54.png" alt="Screenshot 2019-11-29 15.29.54" width="419" height="191" /></p>
<p>But if you only set the dimension to WRAP_CONTENT then we might not get the desired result.</p>
<p><span style="color: #0000ff;"><strong>For example</strong></span>, I have a TextView whose dimension is set to WRAP_CONTENT and its right anchor point is constrained with the left anchor point of a button. Below you can see TextView is not respecting the constrained applied on it.</p>
<p><img class="size-full wp-image-1379 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-29-15.29.01.png" alt="Screenshot 2019-11-29 15.29.01" width="460" height="180" /></p>
<p>This was the issue encounters in the earlier version of ConstrainLayout ie. before 1.1. In 1.1 a new constraint was introduced to handle this issue. The attributes are:</p>
<ul class="ul1">
<li class="li1"><span class="s2" style="color: #0000ff;"><b>app:layout_constrainedWidth=”true|false”</b></span></li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>app:layout_constrainedHeight=”true|false”</b></span></li>
</ul>
<p>Now after setting the below attribute in the TextView, you can see the expected output:</p>
<pre>app:layout_constrainedWidth=”true”</pre>
<p><img class="size-full wp-image-1381 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-29-15.46.57.png" alt="Screenshot 2019-11-29 15.46.57" width="456" height="176" /></p>
<p>There are some already known modifiers that are used frequently in conjunction with WRAP_CONTENT and those modifiers are valid in ConstraintLayout as well. These modifiers are:</p>
<ul class="ul1">
<li class="li1"><span class="s2" style="color: #0000ff;"><b>android:minWidth</b></span> set the minimum width for the layout</li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>android:minHeight</b></span> set the minimum height for the layout</li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>android:maxWidth</b></span> set the maximum width for the layout</li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>android:maxHeight</b></span> set the maximum height for the layout</li>
</ul>
<p><strong><span style="color: #800080;">Note</span></strong>: <strong>These modifiers are only valid with WRAP_CONTENT and not with MATCH_CONSTRAINT.</strong></p>
<p><span style="color: #0000ff;"><strong>MATCH_CONSTRAINT</strong></span></p>
<p>The widget that specifies the dimension to be MATCH_CONSTRAINT will take all the available space.</p>
<p>We use odp to represent MATCH_CONSTRAINT in Constraintlayout.</p>
<p><span style="color: #0000ff;"><strong>For example</strong></span>, below you can see as we change the textview margin to MATCH_CONSTRAINT it will occupy all available space after leaving margins.</p>
<p><img class="size-full wp-image-1385 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/match_constraint.gif" alt="match_constraint" width="1000" height="268" /></p>
<p>Along with MATCH_CONSTRAINT several modifiers are also available:</p>
<ul class="ul1">
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintWidth_min</b></span> and <span class="s2" style="color: #0000ff;"><b>layout_constraintHeight_min</b></span> : will set the minimum size for this dimension</li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintWidth_max</b></span> and <span class="s2" style="color: #0000ff;"><b>layout_constraintHeight_max</b></span> : will set the maximum size for this dimension</li>
<li class="li1"><span class="s2" style="color: #0000ff;"><b>layout_constraintWidth_percent</b></span> and <span class="s2" style="color: #0000ff;"><b>layout_constraintHeight_percent</b></span> : will set the size of this dimension as a percentage of the parent</li>
</ul>
<p>To specify the width as the percent of parent viewgroup width. Before applying percent width we need to make sure that the anchor points on both the sides are constrained to the respective sides of the parent viewgroup.</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>

<p><strong><span style="color: #0000ff;">For example</span></strong>, below you can see button width is 50% of the parent viewgroup width after adding the attribute <span class="s2"><span style="color: #0000ff;"><b>layout_constraintWidth_percent </b></span>in button.</span></p>
<pre><;Button
 android:id="@+id/button12"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:text="Button"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 <span style="color: #008000;"><strong>app:layout_constraintWidth_percent="0.5"</strong></span>
 tools:layout_editor_absoluteY="335dp" />;</pre>
<h3><img class="alignnone size-full wp-image-1387" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-29-17.21.50.png" alt="Screenshot 2019-11-29 17.21.50" width="1094" height="192" /></h3>
<h4></h4>
<h4><strong><span style="color: #0000ff;">Ratio</span></strong></h4>
<p>In ConstraintLayout you can define one dimension of a widget as a ratio of the other one.</p>
<p>The attribute for specifying the ratio is</p>
<p class="p1"><span class="s1" style="color: #008000;"><b>app:layout_constraintDimensionRatio=&#8221;[ratio]&#8221;</b></span></p>
<p>while applying ratio constraint we need to keep the following points in mind:</p>
<ul>
<li>Setting one or both view&#8217;s dimension to MATCH_CONSTRAINT(0dp).</li>
<li>Opposite sides of the widget needs to be constrained.</li>
</ul>
<p><strong><span style="color: #0000ff;">For example</span></strong>, if we set a ratio of an ImageView to 1:1 then it will set the height of the image to be the same as its width.</p>
<p><img class="alignnone wp-image-1388" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-29-17.47.14.png" alt="Screenshot 2019-11-29 17.47.14" width="390" height="616" /></p>
<h3></h3>
<h3><span style="color: #000080;"><strong>Chains</strong></span></h3>
<p>A <strong><span style="color: #008000;">chain</span></strong> is a group of views that are linked to each other with bi-directional position constraints.</p>
<p>The views within a chain can be distributed either vertically or horizontally.</p>
<h4><strong><span style="color: #0000ff;">Chain Style</span></strong></h4>
<p class="p1">When setting the attribute <span style="color: #008000;"><span class="s1"><b>layout_constraintHorizontal_chainStyle</b></span> </span> or <span class="s1" style="color: #008000;"><b>layout_constraintVertical_chainStyle</b></span> on the first element of a chain, the behavior of the chain will change according to the specified style (default is <span class="s1" style="color: #008000;"><b>CHAIN_SPREAD</b></span>).</p>
<p>Chains can be styled in one of the following ways:</p>
<ul class="ul1">
<li class="li1"><b><span style="color: #0000ff;">Spread</span>:</b> The views are evenly distributed (after margins are accounted for). This is the default.</li>
</ul>
<p><img class=" wp-image-1366 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-28-18.03.37-1432640571-1575295446127.png" alt="Screenshot 2019-11-28 18.03.37" width="568" height="107" /></p>
<p> ;</p>
<ul class="ul1">
<li class="li1"><b><span style="color: #0000ff;">Spread inside</span>:</b> The first and last view are affixed to the constraints on each end of the chain and the rest are evenly distributed.</li>
</ul>
<p><img class=" wp-image-1364 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-28-18.02.35-64379506-1575295414880.png" alt="Screenshot 2019-11-28 18.02.35" width="570" height="104" /></p>
<ul class="ul1">
<li class="li1"><b><span style="color: #0000ff;">Weighted</span>:</b> When the chain is set to either <span style="color: #008000;"><b>spread</b></span> or <span style="color: #008000;"><b>spread inside</b></span>, you can fill the remaining space by setting one or more views to &#8220;match constraints&#8221; (<span class="s2">0dp</span>). By default, space is evenly distributed between each view that&#8217;s set to &#8220;match constraints,&#8221; but you can assign a weight of importance to each view using the attributes:</li>
</ul>
<p><strong><span style="color: #008000;"><span class="s2"> layout_constraintHorizontal_weight</span></span></strong></p>
<p><span style="color: #008000;"><strong><span class="s2"> layout_constraintVertical_weight</span></strong></span></p>
<p><strong><span style="color: #0000ff;">For example,</span> </strong>on a chain containing three buttons using width <span style="color: #008000;"><strong>MATCH_CONSTRAINT</strong></span>, with the first button using a weight of 1, second, a weight of 2 and third with a weight of 3, the space occupied by the third button will be thrice that of the first button and the space occupied by the second button will be twice that of the first button.</p>
<p><img class="wp-image-1367 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-28-18.25.16.png" alt="Screenshot 2019-11-28 18.25.16" width="585" height="104" /></p>
<p style="padding-left: 40px;">If you&#8217;re familiar with <span class="s2">layout_weight</span> in a <a href="https://developer.android.com/guide/topics/ui/layout/linear"><span class="s3"><strong><span style="color: #008000;">linear</span></strong> <strong><span style="color: #008000;">layout</span></strong></span></a><strong><span style="color: #008000;">,</span></strong> this works the same way. So the view with the highest weight value gets the most amount of space; views that have the same weight get the same amount of space.</p>
<ul class="ul1">
<li class="li1"><b><span style="color: #0000ff;">Packed</span>:</b> The views are packed together (after margins are accounted for). You can then adjust the whole chain&#8217;s bias (left/right or up/down) by changing the chain&#8217;s head view bias.</li>
</ul>
<p><img class="wp-image-1365 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-28-18.03.09.png" alt="Screenshot 2019-11-28 18.03.09" width="610" height="156" /></p>
<h4><strong><span style="color: #0000ff;">Chain Heads</span></strong></h4>
<p>Chains are controlled by attributes set on the first element of the chain (the &#8220;head&#8221; of the chain).</p>
<p>The head is the left-most view in a horizontal chain and the top-most view in a vertical chain.</p>
<h4><strong><span style="color: #0000ff;">Creating a Chain</span></strong></h4>
<p class="p1">To create a chain, select all of the views to be included in the chain, right-click one of the views, select <span style="color: #008000;"><b>Chains</b></span> and then select either <span style="color: #008000;"><b>Center Horizontally</b></span> or <span style="color: #008000;"><b>Center Vertically</b></span>, as shown below:</p>
<p><img class="wp-image-1362 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/horizontal_chain_new.gif" alt="horizontal_chain_new" width="537" height="387" /></p>
<h4><strong><span style="color: #0000ff;">Switch between Chain Styles</span></strong></h4>
<p>You can switch between <span style="color: #008000;"><b>spread</b></span>, <span style="color: #008000;"><b>spread inside</b></span>, and <span style="color: #008000;"><b>packed</b></span> chain by selecting any view in the chain, right-click and then select <strong><span style="color: #008000;">Cycle Chain mode</span></strong>.</p>
<h3><span style="color: #000080;"><strong>Virtual Helper Objects</strong></span></h3>
<p><strong><span style="color: #008000;">Virtual Helper Objects</span></strong> are views that are not displayed on the device and are only used for layout purposes.</p>
<p>The three basic Virtual Helper Objects are:</p>
<ul>
<li><span style="color: #0000ff;"><strong>Guideline</strong></span></li>
<li><span style="color: #0000ff;"><strong>Barrier</strong></span></li>
<li><span style="color: #0000ff;"><strong>Group</strong></span></li>
</ul>
<h4><span style="color: #000080;"><strong>Guideline</strong></span></h4>
<p><span style="color: #008000;"><strong>Guideline</strong></span> is a helper view that is used to align other views.</p>
<p>The position of all the views that are aligned to a guideline can be changed at once or allowing reactive layout behavior by using percent positioning.</p>
<p class="p1">A Guideline can be either horizontal or vertical:</p>
<p><strong><span style="color: #0000ff;">Vertical Guideline</span></strong></p>
<p><strong><span style="color: #008000;">Width</span></strong>=0 <strong><span style="color: #008000;">Height</span></strong> = Height of parent</p>
<p><span style="color: #0000ff;"><strong>Horizontal Guidelines </strong></span></p>
<p><strong><span style="color: #008000;">Height</span></strong>=0 <strong><span style="color: #008000;">Width</span></strong> = Width of parent</p>
<h4><span style="color: #0000ff;"><strong>Creating Guideline</strong></span></h4>
<p>To create a guideline, click <span style="color: #008000;"><strong>Guidelines</strong></span> <img class="inline-icon" src="https://developer.android.com/studio/images/buttons/layout-editor-guidelines.png" alt="" width="23" height="23" /> in the toolbar, and then click either <span style="color: #008000;"><strong>Add Vertical Guideline</strong> <span style="color: #000000;">or</span> <strong>Add Horizontal Guideline</strong>.</span></p>
<h4><strong><span style="color: #0000ff;">Switch between Guidelines</span></strong></h4>
<p>To switch between different types of guidelines we have to click the button available at the starting point of the guideline.</p>
<p><span style="color: #0000ff;"><strong>For example,</strong></span> in the below figure, I have set the guideline 112dp away from the start of the screen. Now if I click on <strong><span style="color: #008000;">Cycle Guideline</span></strong> button it positions itself 489dp away from the end of the parent layout and on clicking it third time it positions itself at 18% of the parent width.</p>
<p><img class="wp-image-1389 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/cycle_guidelines.gif" alt="cycle_guidelines" width="452" height="488" /></p>
<p class="p1">Positioning a Guideline is possible in three different ways:</p>
<ul class="ul1">
<li class="li1"><span class="s2"><strong><span style="color: #0000ff;">layout_constraintGuide_begin</span></strong> : </span>specifying a fixed distance from the left or the top of a layout</li>
<li class="li1"><span class="s2"><strong><span style="color: #0000ff;">layout_constraintGuide_end</span></strong>: specifying a fixed distance from the right or the bottom of a layout </span></li>
<li class="li1"><span class="s2"><strong><span style="color: #0000ff;">layout_constraintGuide_percent</span></strong>: specifying a percentage of the width or the height of a layout </span></li>
</ul>
<p>In the below figure, all the four TextViews are constrained with the guideline and if I move the guideline all the TextViews that are constrained with the guideline are moving along with it.</p>
<p><img class="wp-image-1390 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/guideline.gif" alt="guideline" width="554" height="347" /></p>
<p>Let&#8217;s see one more use case in which we are going to use the third type of guideline (i.e. <span class="s2"><strong><span style="color: #0000ff;">layout_constraintGuide_percent</span></strong></span>) which positions the guideline at a certain percentage of parent&#8217;s width.</p>
<p>Using multiple guidelines of such type to make the dimension of a view to be of a certain percentage of the parent&#8217;s width or height.</p>
<p>For now, we are making the width of the ImageView to be of a certain percentage of the parent&#8217;s width.</p>
<p>In the above figure, the left guideline is at 25% of the parent&#8217;s width and the right guideline is at 75% of the parent&#8217;s width. Now irrespective of the screen size the width of the ImageView will always be 50% of the screen width.</p>
<h4></h4>
<p><img class="size-full wp-image-1391 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/guideline_percentage.gif" alt="guideline_percentage" width="474" height="566" /></p>
<h4><span style="color: #0000ff;"><strong>Barrier</strong></span></h4>
<p>A <span style="color: #008000;"><strong>barrier</strong></span> is a view that takes references of multiple widgets as input and creates a virtual guideline based on the most extreme widget on the specified side.</p>
<p>Similar to a guideline, a barrier is an invisible line that you can constrain views to. Except a barrier does not define its own position; instead, the barrier position moves based on the position of views contained within it.</p>
<p>This is useful when you want to constrain a view to a set of views rather than to one specific view.</p>
<p>Let&#8217;s take a use case and understand the barrier.</p>
<p>Here we have three TextViews what we want is we want TextView with long text to be on the right of <span style="color: #008000;"><strong>Constraint</strong></span> and <span style="color: #008000;"><strong>Linear</strong></span> TextViews. So we are going to constrain the left anchor point of longer TextView with the right anchor point of <span style="color: #008000;"><strong>Constraint</strong></span> TextView.</p>
<p><img class=" size-full wp-image-1394 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-30-15.32.20-2659785624-1575296885415.png" alt="Screenshot 2019-11-30 15.32.20" width="430" height="257" /></p>
<p>In case if we change the text <span style="color: #008000;"><strong>Linear</strong></span> to <strong><span style="color: #008000;">Linearlayoutt</span></strong> you can see the TextView with longer text run over the TextViews on the left of it. To solve this problem we can make use of <span style="color: #0000ff;"><strong>barrier</strong></span>.</p>
<p><img class=" size-full wp-image-1395 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-30-15.37.15-4061154534-1575297117902.png" alt="Screenshot 2019-11-30 15.37.15" width="428" height="263" /></p>
<h4></h4>
<h4><span style="color: #0000ff;"><strong>Creating Barrier</strong></span></h4>
<p>To create a barrier, follow these steps:</p>
<ol>
<li>Click <span style="color: #008000;"><strong>Guidelines</strong></span> <img class="inline-icon" src="https://developer.android.com/studio/images/buttons/layout-editor-guidelines.png" alt="" width="21" height="21" /> in the toolbar, and then click <span style="color: #008000;"><strong>Add Vertical Barrier</strong> <span style="color: #000000;">or</span> <strong>Add Horizontal Barrier</strong>.</span></li>
<li>In the <span style="color: #008000;"><b>Component Tree</b></span> window, select the views you want inside the barrier and drag them into the barrier component.</li>
<li>Select the barrier from the <span style="color: #008000;"><b>Component Tree</b></span>, open the <span style="color: #008000;"><b>Attributes</b></span> <img class="inline-icon" src="https://developer.android.com/studio/images/buttons/window-properties.png" alt="" width="24" height="24" /> window, and then set the <span style="color: #008000;"><b>barrierDirection</b></span>.</li>
</ol>
<p>To solve this issue here we make use of <span style="color: #008000;"><strong>Vertical</strong></span> barrier.</p>
<p>Barrier basically takes reference id of views as input to create a barrier for them. So we are going to add references of <span style="color: #008000;"><strong>Constraint</strong></span> and <span style="color: #008000;"><strong>LinearLayoutt</strong></span> TextViews.</p>
<p>Select <span style="color: #008000;"><strong>barrier</strong></span> from the component tree and change barrier direction to <span style="color: #008000;"><strong>end</strong></span>. Now to get the expected result constrain the left anchor point of longer TextView with the barrier.</p>
<p><img class="alignnone size-full wp-image-1396" src="https://c1ctech.com/wp-content/uploads/2019/11/barrier.gif" alt="barrier" width="722" height="372" /></p>
<p>Above you can see the barrier adjusted its position according to the view with the larger size. This is how the barrier works.</p>
<h4><span style="color: #0000ff;"><strong>Group</strong></span></h4>
<p><span style="color: #008000;"><strong>Group</strong></span> is a helper view that controls the visibility of a set of referenced widgets. It is a convenient way to hide or show a set of widgets.</p>
<p>Using Group we don&#8217;t have to set the visibility of each widget individually and same as <strong><span style="color: #008000;">barrier</span></strong> it takes references of multiple widgets.</p>
<p>Group is useful in the case where we want to change the visibility of a set of views like in case of <strong><span style="color: #008000;">error occurred</span></strong>, <span style="color: #008000;"><strong>loading</strong></span> where we don&#8217;t want to show a set of widgets.</p>
<p>In the below-animated figure, you can see after setting the visibility of the group to <strong><span style="color: #008000;">gone</span></strong> it is no more visible on the screen.</p>
<p><img class="alignnone size-full wp-image-1399" src="https://c1ctech.com/wp-content/uploads/2019/12/group.gif" alt="group" width="658" height="408" /></p>
<p>In your xml file you can see the references of the views has been added to the Group like this:</p>
<pre><;androidx.constraintlayout.widget.Group
 android:id="@+id/group2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:visibility="invisible"
 <span style="color: #008000;"><strong>app:constraint_referenced_ids="button,imageView,textView"</strong></span> />;</pre>
<h3></h3>
<p>I hope this article will help you in understanding various types of constraints that you can use to build a complex layout with <strong><span style="color: #008000;">Constraintlayout</span></strong>.