Understanding Constraint-Layout for beginners Part-1

5 min readMar 26, 2023

Introduction

Hi Everyone, hope you all are doing well. In this blog we will go through ConstraintLayout its basics in detail.

As an Android developer we all have experience in working in different layouts like LinearLayout, RelativeLayout, GridLayout and many more, while writing xml file we always wanted our code should be less complex and should not have much nested layout, follow flat view hierarchy and advance layout mechanism due to all these performance issues old layouts find it difficult to handle therefore Google introduced the library in the 2016 Google I.O — ConstraintLayout.

Now before starting ConstraintLayout if you are beginner to Layouts you should be aware about what are Layouts present in Android.
Android UI Layouts defines a visual structure for a user interface, such as a UI for Activity or widget. With each ViewGroup determining the positions of its children using the sizes determined in the measure.
There are few basic layout which android developers use day to day life to build ui interfaces but question is why we need ConstraintLayout.

Why do you should use the new ConstraintLayout?

There are three basic advantages of ConstraintLayout

Simplifies Layout — with flat view hierarchy
Flexible Controls — there are feature of drag and drop also with the help of layout editor tools we can build the layout without touching xml file code.
Better rendering performance

What is Constraint Layout?

Constraint — A relationship between two views controls how the views will be positioned and defines view position in ConstraintLayout. They are added in vertical and horizontal directions.

ConstraintLayout is based on set of rules or constraints that define the position and size of the UI components within the layout.
It is a layout manager which allows you to position and size widgets in a flexible way.

The aim of the ConstraintLayout is to help reduce the number of nested views, which will improve the performance of our layout files.

Types of Contraint

Standard Constraints — left -right or start-end, top — bottom
Center Constraints
Baseline Constrains

Lets understand with basic example

We have to declare maven.google.com repository in our project level build.gradle file:

repositories {
  google()
}

Dependency should be declared in our app module level build.gradle file:

dependencies {
     implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
}

For placing a textview in center of layout we need to add all 4 constraints attribute top to top, bottom to bottom, left to left and right to right.

<?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">

    <TextView
        android:id="@+id/textview_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!!!!"
        android:background="@color/black"
        android:textColor="@color/white"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

In layout editor tool it looks like this we can see here as we have added attributes top to top, bottom to bottom, left to left and right to right we can directly add this through editor as well.

Constraint Widget in Layout Editor

Here through layout editor we can add the margin dp as well and changing layout height and width. Also we can change all constraints we have added and any text or edittext values we have added.

wrap content

match parent

Fixed value

These changes we can see if we change the values of constraint from wrap content , match parent or fixed value. These symbols are very small thing in editor but we should be aware of these changes.

ConstraintLayout attributes:

layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
layout_constraintTop_toBottomOf — Align the top of the desired view to the bottom of another.
layout_constraintBottom_toTopOf — Align the bottom of the desired view to the top of another.
layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
layout_constraintLeft_toTopOf — Align the left of the desired view to the top of another.
layout_constraintLeft_toBottomOf — Align the left of the desired view to the bottom of another.
layout_constraintLeft_toLeftOf — Align the left of the desired view to the left of another.
layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.
layout_constraintRight_toTopOf — Align the right of the desired view to the top of another.
layout_constraintRight_toBottomOf — Align the right of the desired view to the bottom of another.
layout_constraintRight_toLeftOf — Align the right of the desired view to the left of another.
layout_constraintRight_toRightOf — Align the right of the desired view to the right of another.

Chains in ConstraintLayout

Chain is group of views that are linked to each other with bi-directional position constraints.
The views within a chain can be distributed either vertically or horizontally.

Create a Chain in Layout Editor:

Step 1: Select the objects you want to be in the chain.
Step-2: Right-click and select Chains.
Step-3: Create a horizontal or vertical chain.

Than here we can select the horizontal or vertical chain style

here we can see 3 options spread, spread inside and packed.
After applying chain the cpde change we can see in xml file

app:layout_constraintHorizontal_chainStyle="packed"

It will show the chain style we have added through editor.

Packed Chains — This will pack the views together and then centers the group within the available space. We can provide margins to separate them slightly.

2. Spread Chains — This is default mode is spread and this will position the views in the chain at even intervals within the available space.

3. Spread Inside Chains -This chain snaps the outermost views in the chain to the outer edges and then positions the remaining views in the chain at equal intervals within the available space.