Constraint Layout — Part IV

Share your knowledge. It’s a way to achieve immortality.
-Dalai Lama

This is the fourth and last series of articles which cover the fundamentals of using Constraint Layout. We will talk about Helpers in constraint layout.

Guideline

Vertical Guidelines have a width of zero and the height of their Constraint Layout parent
Horizontal Guidelines have a height of zero and the width of their Constraint Layout parent

Positioning a Guideline is possible in three different ways:

  1. specifying a fixed distance from the left or the top of a layout (layout_constraintGuide_begin)
  2. specifying a fixed distance from the right or the bottom of a layout (layout_constraintGuide_end)
  3. specifying a percentage of the width or the height of a layout (layout_constraintGuide_percent)

Create Guideline

  1. Click either Add Vertical Guideline or Add Horizontal Guideline.
  2. Dotted line will be appear. Drag the dotted line to reposition it and click the circle at the edge of the guideline to toggle the measurement mode.
<?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">

<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="96dp" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="96dp" />

<Button
android:id="@+id/button10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Group

By using Groups Helper, you can just set visibility of views by comma separated reference id’s at a time without having to maintain this set programmatically.
e.g: app:constraint_referenced_ids=”button4,button9"

<?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:layout_width="match_parent"
android:layout_height="match_parent">

<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="96dp" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="96dp" />

<Button
android:id="@+id/button10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/button13"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toBottomOf="@+id/button11" />

<Button
android:id="@+id/button11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/button10"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.286" />

<Button
android:id="@+id/button13"
android:layout_width="219dp"
android:layout_height="wrap_content"
android:layout_marginTop="151dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button10" />

<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:constraint_referenced_ids="button10,button13" />


</androidx.constraintlayout.widget.ConstraintLayout>

Barriers

If the barrier references GONE widgets, the default behavior is to create a barrier on the resolved position of the GONE widget. If you do not want to have the barrier take GONE widgets into account, you can change this by setting the attribute barrierAllowsGoneWidgets to false (default being true).

<?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:layout_width="match_parent"
android:layout_height="match_parent">

<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="96dp" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="96dp" />

<Button
android:id="@+id/button10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/button13"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toBottomOf="@+id/button11" />

<Button
android:id="@+id/button11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Barrier Introduction"
app:layout_constraintBottom_toTopOf="@+id/button10"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.286" />

<Button
android:id="@+id/button13"
android:layout_width="219dp"
android:layout_height="wrap_content"
android:layout_marginTop="151dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button10" />

<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="button10,button13" />

<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="textView,textView3" />


<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="90dp"
android:layout_marginBottom="151dp"
android:text="Hello World"
android:textSize="25sp"
app:layout_constraintBottom_toTopOf="@+id/button13"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toBottomOf="@+id/button10" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Android"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="@+id/button13"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toBottomOf="@+id/textView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Reversely, with the direction set to end, we will have:

From Android Developer site

So, Get your hands dirty on constraint layout.

To get better understanding and coding part, Please go through github link:
https://github.com/swatiomar27/Constraint-Layout-Demo

I hope you liked the article. Feel free to share any feedback. And stay tuned for more concepts!

Don’t forget to follow me on Medium. If you liked the article, click the clap below so more people can see it!

Thanks !!!

As a girl programmer, to keep learning and help ones who needs the skills to be a master, I am available to be a part of an adventurous journey….