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. |
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:
<?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
Contact Us