In this article, we will learn about android Barrier using Kotlin. We will go through various example that demonstrates how to use different attributes of Barrier. For example,

In this article, we will get answer to questions like –

• What is Barrier?
• Why should we consider Barrier while designing ui for any app?
• What are possibilities using Barrier while designing ui? etc.

Getting Started

We can define android Barrier widget as below –

This is helper widget that aligns referenced views based on specified sides. For example, Suppose you have two textViews and one button. Now, you want to align button to bottom of textView having larger text. You can do it easily using barrier.

Barrier takes multiple widgets as input and creates a virtual guideline based on the most extreme widget on specified side. We can either align views horizontally or vertically.

Now, how do we use Horizontal or Vertical Barrier in android application ?

Creating New Project

At first, we will create an application.
So, follow steps below to create any android project in Kotlin –

Newbie in Android ?

Some very important concepts (Recommended to learn before you move ahead)

• Install Android Studio
• Create New Project in Android Studio
• Android Project Structure
• Run / Debug / Test Android App

Before we move ahead, we need to setup for viewBinding to access Android Barrier Using Kotlin file without using findViewById() method.

Setup ViewBinding

Add viewBinding true in app/build.gradle file.

 
 android { 
 	// OTHER CODE... 
 	buildFeatures { 
 		viewBinding true 
 	} 
 } 
 

Now, set content in activity using view binding.
Open MainActivity.kt file and write below code in it.

 
 class MainActivity : AppCompatActivity() { 
 	
 	private lateinit var binding: ActivityMainBinding 
 	
 	override fun onCreate(savedInstanceState: Bundle?) { 
 		super.onCreate(savedInstanceState) 
 		binding = ActivityMainBinding.inflate(layoutInflater) 
 		val view = binding.root 
 		setContentView(view) 
 	} 
 } 
 

Now, we can access view in Kotlin file without using findViewById() method.

Using Horizontal Barrier in Kotlin

At first, we will use barrier using Kotlin to align views horizontally. So, views will be aligned either on top or bottom.

Follow steps below to use Barrier in newly created project –

• Open res/values/strings.xml file. Then, add below code into it.

  <resources>
      <string name="app_name">Barrier</string>
  </resources>
  

• Open res/layout/activity_main.xml file. Then, add below code in it –

  <?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"
      android:padding="10dp"
      tools:context=".MainActivity">
  
      <androidx.constraintlayout.widget.Barrier
          android:id="@+id/barrier"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:barrierDirection="bottom"
          app:constraint_referenced_ids="textView, textView2" />
  
      <TextView
          android:id="@+id/textView"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:text="TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 "
          app:layout_constraintBottom_toTopOf="@id/barrier"
          app:layout_constraintEnd_toStartOf="@id/textView2"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />
  
      <TextView
          android:id="@+id/textView2"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_marginStart="10dp"
          android:text="TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 "
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@id/textView"
          app:layout_constraintTop_toTopOf="parent" />
  
      <Button
          android:id="@+id/button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Button 1"
          app:layout_constraintTop_toBottomOf="@id/barrier" />
  
  </androidx.constraintlayout.widget.ConstraintLayout>
  

  Here, we align button to bottom of textView with longest text. As of now, First TextView having id textView have longest text. So, button will be aligned after text finishes.

• We can also access it in Kotlin File, MainActivity.kt, as below –

  package com.tutorialwing.barrier
  
  import androidx.appcompat.app.AppCompatActivity
  import android.os.Bundle
  import com.tutorialwing.barrier.databinding.ActivityMainBinding
  
  class MainActivity : AppCompatActivity() {
  
  	private lateinit var binding: ActivityMainBinding
  
  	override fun onCreate(savedInstanceState: Bundle?) {
  		super.onCreate(savedInstanceState)
  
  		binding = ActivityMainBinding.inflate(layoutInflater)
  		setContentView(binding.root)
  	}
  }
  

Now, run application. We will get output as below –

Here, we button is being aligned to textView having longest text. In this case, left textView have longest text. So, button is aligned after that. Now, change text of second TextView and make it longer than first TextView. Let’s see the result. Copy and paste below line to 2nd TextView

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:text="TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textView"
        app:layout_constraintTop_toTopOf="parent" />

Here, we have added some dummy text to textView that is longer than first TextView. If we run application now, we will get output as below –

You can notice that button is placed after text of 2nd TextView completes.

If fact that is beauty of Barrier. It would be a bit difficult and complex to align views otherwise .

Using Vertical Barrier in Kotlin

Now, we will learn to use barrier restrict and align views vertically. We will align some view that is based on extreme left or right views.

We need to change in activity_main.xml file. So, Open activity_main.xml file and add below code in it –

<?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"
    android:padding="10dp"
    tools:context=".MainActivity">

    <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, textView2"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_marginStart="20dp"
        android:layout_height="wrap_content"
        android:text="TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 TextView 1 "
        app:layout_constraintBottom_toTopOf="@id/barrier"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_marginTop="20dp"
        android:text="TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 TextView 2 "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintStart_toStartOf="@id/barrier"
        app:layout_constraintTop_toBottomOf="@+id/textView2"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Run application. We will get output as shown below –

Here, we are using barrier to align views vertically. Note that button is aligned to left of extreme left widget. In this case, first textView is extreme left. So, button is aligned with first textView.

That’s how we use barrier to align views based on different restriction on other referenced and grouped views.

Different Attributes of Barrier in XML

Now, we will see how to use different attributes of Android Barrier using Kotlin to customise it –

Set Id of Barrier

Many a time, we need id of View to access it in kotlin file or create ui relative to that view in xml file. So, we can set id of Barrier using android:id attribute like below –

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_ID"
        />

Here, we have set id of Barrier as barrier_ID using android:id=”” attribute. So, if we need to reference this Barrier, we need to use this id – barrier_ID.

Set Width of Barrier

We use android:layout_width=”” attribute to set width of Barrier.
We can do it as below –

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_ID"
        android:layout_width="wrap_content"
        />

Width can be either “MATCH_PARENT” or “WRAP_CONTENT” or any fixed value (like 20dp, 30dp etc.).

Set Height of Barrier

We use android:layout_height=”” attribute to set height of Barrier.
We can do it as below –

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

Height can be either “MATCH_PARENT” or “WRAP_CONTENT” or any fixed value.

We have seen different attributes of Barrier and how to use it. If you wish to visit post to learn more about it

Thus, we have seen what is Barrier, how can we use android Barrier using Kotlin ? etc. We also went through different attributes of android Barrier.