ConstraintLayout in Android

ConstraintLayout is similar to that of other View Groups which we have seen in Android such as RelativeLayout, LinearLayout, and many more. In this article, we will take a look at using ConstraintLayout in Android. 

Important Attributes of ConstraintLayout 

Attributes	Description
android:id	This is used to give a unique id to the layout.
app:layout_constraintBottom_toBottomOf	This is used to constrain the view with respect to the bottom position.
app:layout_constraintLeft_toLeftOf	This attribute is used to constrain the view with respect to the left position.
app:layout_constraintRight_toRightOf	This attribute is used to constrain the view with respect to the right position.
app:layout_constraintTop_toTopOf	This attribute is used to constrain the view with respect to the top position.

Advantages of using ConstraintLayout in Android

• ConstraintLayout provides you the ability to completely design your UI with the drag and drop feature provided by the Android Studio design editor.
• It helps to improve the UI performance over other layouts.
• With the help of ConstraintLayout, we can control the group of widgets through a single line of code.
• With the help of ConstraintLayout, we can easily add animations to the UI components which we used in our app.

Disadvantages of using ConstraintLayout 

• When we use the Constraint Layout in our app, the XML code generated becomes a bit difficult to understand.
• In most of the cases, the result obtain will not be the same as we got to see in the design editor.
• Sometimes we have to create a separate layout file for handling the UI for the landscape mode.

How ConstraintLayout differs from Linear Layout? 

• With the help of ConstraintLayout, we can position our UI components in any sort of order whether it may be horizontal or vertical. But in the case of Linear Layout, we can only arrange our UI components either in a horizontal or in a vertical manner.
• Linear Layout provides usability with which we can equally divide all the UI components in a horizontal or vertical manner using weight sum but in Constraint Layout, we have to arrange this UI component manually.
• In Linear Layout the UI which is actually seen in the Design editor of Android Studio will be the same as that we will get to see in the app, but in the case of Constraint layout if the UI component is not Constrained then the UI will not look the same as that of in design editor.

How ConstraintLayout differs from RelativeLayout? 

• In Constraint Layout, we have to add constraints to the view on all four sides whereas in Relative Layout we can simply align our UI component relative to its ID using the ids of UI components.
• In Relative Layout, the UI which is actually seen in the Design editor of Android Studio will be the same as that we will get to see in the app, but in the case of Constraint layout if the UI component is not Constrained then the UI will not look same as that of in design editor.

How Constraint Layout differs from Grid Layout? 

• In Grid Layout the UI components are only arranged in Grid Manner and we cannot arrange the UI components according to requirement, whereas in Constraint Layout we can align UI components according to the requirement.
• In Grid Layout, the UI which is actually seen in the Design editor of Android Studio will be the same as that we will get to see in the app, but in the case of Constraint layout if the UI component is not Constrained then the UI will not look same as that of in design editor.

Step by Step Implementation for adding Constraint Layout in Android 

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Adding dependency for using Constraint Layout in Android

Navigate to the app > Gradle scripts > build.gradle file and add the below dependency to it in the dependencies section.

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

Now sync your project and we will move towards working with activity_main.xml.

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?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"
    tools:context=".MyActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="Geeks for Geeks"
        android:textColor="@color/black"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

As we are working only with layout files so we don’t have to add any code in java or Kotlin file for MainActivity. After adding this code now we have to run the app to see the output of the app. 

Output: