Understanding Guideline and Barrier : Constraint Layout Part-2

unsplash.com

Introduction

Hi Everyone, hope you all are doing well. In this blog we will go through next topics for Constraint Layout that is Guideline and Barriers in last blog we have covered basics in detail Part-1.

Guideline

A Guideline is a visual guide which is align views as Horizontally or Vertically and it will not be seen at runtime.

• Guidelines can be specified in dp from start or end of the screen or they can be a percentage of the width of the screen.

Guideline Menu

There are 2 types pf Guideline

1. Horizontal Guideline : height of zero and its width is equal to its parent
2. Vertical Guideline : width of zero and its height is equal to its parent

Lets see how we can add guideline in our XML layout

• For adding Guideline in Constraint Layout you can do it either by using the mentioned Guidelines menu or by adding a Guideline view component programmatically inside the respective XML layout file.
• Now lets check how Horizontal Guideline works
• Suppose we have a normal layout with button in center and if we add Horizontal guideline for 20dp from menu.

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="20dp" />

• Here we can update the value from 20dp to any from tool it self from declare attribute option.

• In Design we can see a black drop arrow we can select it for showing it in percentage as well. Suppose we update the value 0.5 it will add guideline for 50% in view.

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.500684" />

• Same for vertical orientation

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="200dp" />

• The tag app:layout_constraintGuide_begin=”200dp” defines at what distance to the top of the screen, or in a vertical orientation to the screen, the Guideline should be placed.
• If you change the orientation to a vertical orientation, the guidelines look changes

• Another use of Guideline is if we have layout where we have view as Detail view (Name : Richa Sharma) and list of details here we need space from start and end instead of having multiple layouts we can align it with Guideline.

Barriers

Barrier is another helper component. It takes different views as input and It forms a virtual guideline based on the most extreme view in your reference list. Similar to Guideline we have 2 types of Barriers Vertical and Horizontal Barriers.

If one of the views grows, the barrier will adjust its size to the largest height or width of the referenced items.

Barrier Menu

• Now suppose we have 2 textview horizontally aligned to each other here we have text length is small but what if length of left textview is long it will override with right textview.

• To overcome such situtaion and to avoid having multiple view we can use Barrier here.
• Now you might be think that we can use Guideline but we can not use it here because Guideline have fix positions even if we increase or decrease size of view it will not affect Guideline.

• For this example we can select vertical barrier from menu and add direction as end or right. The Barrier will contain 2 views left textview and button.

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="textView,button4"/>

• After adding Barrier the design looks like this now to define the position in second textview we need to add second textview app:layout_constraintStart_toEndOf=”@+id/barrier2" than even if the textview length increase barrier will manage the views.
• Here we can see even if the length of left view increase or decrease the right view will not get affect.

Conclusion — Difference between Guideline and Barrier

The Main difference between Guideline and Barrier is Guideline itself define the position but in Barrier the views which is taken as input it defines the position.

That’s all for Guideline and Barrier, I hope you like the Constraint Layout Understanding Part-1 and 2, clap if you liked my article, and follow for more!

unsplash.com

Happy Reading :)