ConstraintLayout in Android

TextView widget in Android using Java with Examples

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.
app:layout_constraintHeight_max	This attribute is used to set the max height of view according to the constraints.
app:layout_constraintHeight_min	This attribute is used to set the height of the view according to the constraints.
app:layout_constraintHorizontal_weight	This attribute is used to set the weight horizontally of a particular view same as linear layouts.
app:layout_constraintVertical_weight	This attribute is used to set the weight vertically of a particular view same as linear layouts.

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.

Add the dependency:

implementation "androidx.constraintlayout:constraintlayout:2.1.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.

Use the activity mentioned below in your application:

activity_main.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="Beginner for Beginner"
        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:

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 use in our app.
It helps to manage the position and size of views without using nested layouts which improves performance and makes it easier.
ConstraintLayout is more efficient than Linear orRelative layouts, especially for complex layouts, because ConstraintLayout uses a more efficient algorithm to calculate the positions and sizes of widgets.
ConstraintLayout supports chains and barriers which helps to build complex ui.

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.
All views need proper contraints to achieve correct design.

How ConstraintLayout differs from Linear Layout?

Constraint Layout	Linear Layout
In 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.
In Constraint Layout we have to arrange this UI component manually.	In Linear Layout provides usability with which we can equally divide all the UI components in a horizontal or vertical manner using weight sum
In Constraint layout if the UI component is not Constrained then the UI will not look the same as that of in design editor.	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

How ConstraintLayout differs from RelativeLayout?

Constraint Layout	Relative Layout
In Constraint Layout, we have to add constraints to the view on all four sides	In Relative Layout we can simply align our UI component relative to its ID using the ids of UI components.
In Constraint layout if the UI component is not Constrained then the UI will not look same as that of in design editor.	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

How Constraint Layout differs from Grid Layout?

Constraint Layout	Grid Layout
In Grid Layout the UI components are only arranged in Grid Manner and we cannot arrange the UI components according to requirement	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	Constraint layout if the UI component is not Constrained then the UI will not look same as that of in design editor.

Features of ConstrainLayout in Android

There are various features associated with ConstraintLayout in Android mentioned below:

Constrains in Android
Ratio in Android
Chains in Android

Note : To access the full android application using ConstraintLayout check this repository: ConstraintLayout in Android Application

Click Here to Learn How to Create Android Application

Tags:

#Java-Android #Kotlin Android #Android

Android RelativeLayout in Kotlin