ConstraintLayout in Android - GeeksforGeeks

15 Feb, 2022
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. 
Attributes
Description
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.
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.
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.
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.
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 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:
varshagumber28
Picked
Android
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create and Add Data to SQLite Database in Android?
Broadcast Receiver in Android With Example
Content Providers in Android with Example
Android RecyclerView in Kotlin
Flutter - Custom Bottom Navigation Bar
How to View and Locate SQLite Database in Android Studio?
Navigation Drawer in Android
CardView in Android With Example
How to Read Data from SQLite Database in Android?
Retrofit with Kotlin Coroutine in Android