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

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

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

Getting Started

We can define android Guideline widget as below –

Android Guideline is helper object for ConstraintLayout that are not displayed on device i.e. they are marked as View.GONE. They are only used for layout purposes.

Now, how do we use Guideline 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 Guideline 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 Guideline in Kotlin

Follow steps below to use Horizontal Guideline in newly created project –

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

  <resources>
      <string name="app_name">Guideline</string>
      <string name="this_is_textview">This is textView.</string>
      <string name="button">Button</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"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      <androidx.constraintlayout.widget.Guideline
          android:id="@+id/guideline"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:orientation="horizontal"
          app:layout_constraintGuide_begin="200dp" />
  
      <TextView
          android:id="@+id/textView"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/this_is_textview"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/guideline" />
  
      <Button
          android:id="@+id/button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginStart="20dp"
          android:text="@string/button"
          app:layout_constraintLeft_toRightOf="@+id/textView"
          app:layout_constraintTop_toBottomOf="@+id/guideline" />
  
  </androidx.constraintlayout.widget.ConstraintLayout>
  

  Here, we are trying to align TextView and Button using guideline. In this case, views will be aligned after some space from top of the screen as specified by guideline.

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

  package com.tutorialwing.guideline
  
  import androidx.appcompat.app.AppCompatActivity
  import android.os.Bundle
  import com.tutorialwing.guideline.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 the application. We will get output as below –

Note that TextView and Button have aligned after some space as specified in Guideline in xml file. That’s how we use guideline to provide guideline to align different views.

Vertical Guideline in Kotlin

We can also provide instruction to align views vertically using Guideline. Follow steps below to do it –

1. Open activity_main.xml file. Then, add below code to 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"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       <androidx.constraintlayout.widget.Guideline
           android:id="@+id/guideline"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:orientation="vertical"
           app:layout_constraintGuide_begin="200dp" />
   
       <TextView
           android:id="@+id/textView"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginTop="16dp"
           android:text="@string/this_is_textview"
           app:layout_constraintLeft_toLeftOf="@+id/guideline"
           app:layout_constraintTop_toTopOf="parent" />
   
       <Button
           android:id="@+id/button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginTop="16dp"
           android:text="@string/button"
           app:layout_constraintLeft_toLeftOf="@+id/guideline"
           app:layout_constraintTop_toBottomOf="@+id/textView" />
   
   </androidx.constraintlayout.widget.ConstraintLayout>
   

   Here, we are going to align same TextView and Button as previous one. But, views will be aligned vertically now. They will be restricted vertically. In this case, views will be aligned after some space from left side of the screen.

2. Run application. We will get output as below –
   

   You can clearly see that views (TextView and Button both) have been aligned after some space from left side of the screen. That’s how we align any views horizontally or vertically using guideline in android application.

Difference between Guideline and Barrier in Android

Barrier and Guideline both are used to provide some restriction on alignment of views in application. Based on restriction and guidelines views are aligned horizontally or vertically.

Now, which one to use while designing view in application?

Well!

That’s totally dependent on our requirement.

If we want to align views after fixed space either horizontally or vertically , we should be using Guideline. We have already seen in this in our application.

If we want to align views after extreme horizontal or vertical View based on content inside that view, we should be using Barrier. It means if you don’t know which view will be on extreme left or at bottom, you should be using Barrier in application. Visit our tutorial on Android Barrier to understand it clearly.

Different Attributes of Guideline in XML

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

Set Id of Guideline

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 Guideline using android:id attribute like below –

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_ID"
        />

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

Set Width of Guideline

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

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_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 Guideline

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

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_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 Guideline and how to use it. If you wish to visit post to learn more about it

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