A ConstraintLayout is a android.view.ViewGroup used to position and size widgets in a flexible way. GuideLine and Barrier in ConstraintLayout are special helper objects to help you with your layout. Both are used to constraint layout.
Guideline
Guidelines are invisible lines that you can place at particular positions in your layout. Widgets can then be positioned by constraining them to such guidelines. A Guideline can be of the following type
- Vertical Guidelines have a width of zero and the height of their ConstraintLayout parent
- Horizontal Guidelines have a height of zero and the width of their ConstraintLayout parent
Guideline can be positioned in the layout in three different ways:
- Fixed distance from the left or the top of a layout (
layout_constraintGuide_begin) - Fixed distance from the right or the bottom of a layout (
layout_constraintGuide_end) - Percentage of the width or the height of a layout (
layout_constraintGuide_percent)
In below example, a button is constrained using ConstraintLayout.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Button 1"
app:layout_constraintLeft_toLeftOf="@+id/guidelineVerticalLeft"
app:layout_constraintRight_toLeftOf="@id/guidelineVerticalRight"
app:layout_constraintTop_toBottomOf="@+id/guidelineHorizontalTop"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guidelineHorizontalTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="300dp"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guidelineVerticalLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="50dp"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guidelineVerticalRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="200dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>Above XML in layout editor will look like as shown in below image. Button is constrained from top, left and right as shown in Attributes panel and Design and Blueprint.
Barrier
A Barrier is a virtual view, similar to a Guideline, to which we can constrain objects. When you have several views that may change size at runtime, we can use a barrier to constrain the elements. A barrier is an invisible view that contains reference to the views that you wish to use to form a barrier against. If one of the views grows, the barrier will adjust its size to the largest height or width of the referenced items. Barriers can be vertical or horizontal and can be created to the top, bottom, left or right of the referenced views.
app:constraint_referenced_ids are the IDs that barrier will depend on to decide its position. Below example shows the usage of barrier.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_marginStart="30dp"
android:layout_marginTop="50dp"
android:text="TextView1: Lorem ipsum dolor sit amet, "
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_marginStart="30dp"
android:layout_marginTop="60dp"
android:text="TextView2: "
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView1" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrierAtEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="textView2,textView1" />
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="TextView3: "
app:layout_constraintStart_toEndOf="@+id/barrierAtEnd"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>The app:barrierDirection attribute determines the direction of the Barrier. In this case it will be positioned at the end of the referenced Views (TextView1 and TextView2). Corresponding design and blueprint is shown in below image.
Barrier Vs GuideLine
Similar to a guideline, a barrier is an invisible line that you can use to constrain views. Except a barrier does not define its own position, instead its position moves based on the position of views contained within it. This is useful when you want to constrain a view to a set of views rather than to one specific view.