Android ConstraintLayout Example Tutorial

Filed Under: Android

In this tutorial, we’ll discuss the intricacies of android ConstraintLayout. Google had introduced android constraint layout editor at Google I/O Conference 2016. The new Layout Editor has a set of powerful tools to allow developers to create flat-ui hierarchies for their complex layouts.

Android ConstraintLayout

To use android ConstraintLayout, make sure you’re using the latest Android Studio version. Ideally, Android Studio 2.2 and above. We need to download the necessary SDK Tools for ConstraintLayout from the SDK Manager.

android constraintlayout

Create a new empty activity project and add the following dependency inside the build.gradle file.

compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'

Create a new layout with the root class set to ConstraintLayout as shown in the image below.

android constraint layout

To convert an old layout into a ConstraintLayout. Open the design pane of the respective layout, right click the root component and choose the relevant option as shown in the image below.

android constraint layout

Android Constraint Layout Overview

Android ConstraintLayout is used to define a layout by assigning constraints for every child view/widget relative to other views present.

A ConstraintLayout is similar to a RelativeLayout, but with more power. The aim of ConstraintLayout is to improve the performance of the applications by removing the nested views with a flat and flexible design.

A view inside the ConstraintLayout has handles(or anchor points) on each side which are used to assign the constraints. Let’s drag and drop a TextView on the layout and assign the constraints to it.

Android ConstraintLayout textview

The TextView above has three types of handles:

    Resize handle – It’s present on the four corners and is used to resize the view, but keeping its constraints intact.

    Side handle – It’s the circular handle present on the centre of each side. It’s used to set the top, left, bottom and right constraints of the view.

    Baseline handle – It’s used to align the baseline with another textview in the layout.

Let’s assign the constraints on the TextView and look into the xml code of it.

Android ConstraintLayout example

Notice the Properties inspector pane at the right-hand side:
Android ConstraintLayout textview properties

It shows the margins set for each side of the view. It also allows to change the size of the view by toggling between the following modes:

  • Wrap Content – This wraps the view to fill it’s content. Android ConstraintLayout wrap
  • Any Size – This is similar to match parent. Android ConstraintLayout any size
  • Fixed Size – This allows us to set constant width and height. Android ConstraintLayout fixed mode

The xml code for the above layout looks like:

sample.xml


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>
  • app:layout_constraintLeft_toLeftOf="parent" – constraintLeft is the anchor point to the left of the view. toLeftOf signifies aligning the view to the left of the assigned view which is “parent” in this case.
  • When the absolute positions are set on the view, the xml properties that are used are –

    
    tools:layout_editor_absoluteY="48dp"
    tools:layout_editor_absoluteX="40dp"
    

Let’s add another TextView and align their baselines.

Android ConstraintLayout tutorial

The xml code for the above layout is :


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        app:layout_constraintRight_toLeftOf="@+id/textView"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp" />

</android.support.constraint.ConstraintLayout>

There are two other tools Auto-connect and Inferences that are used to created constraints automatically.

  1. Auto-Connect – This feature can be enabled by clicking:Android ConstraintLayout example
    As the name suggests, Auto-connect creates constraints automatically between two neighbouring views
  2. Inference – This feature is enabled by clicking:Android ConstraintLayout example tutorial
    The Inference engine creates constraints among all elements in a layout. The inference engine tries to find and create optimal connections based on various factors such as the positions of the widgets and their size.

A demo of Auto-Connect layout is given below:
Android ConstraintLayout auto connect

As you can see in the above gif, The constraints are animated automatically.
Notice the horizontal and vertical sliders in the properties pane. They are called horizontal and vertical bias respectively. They allow us to position a view along the horizontal or vertical axis using a bias value, this will be relative to it’s constrained position.

The xml code for the above demo is given below:


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView7"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.58000004"
        app:layout_constraintHorizontal_bias="0.47" />
</android.support.constraint.ConstraintLayout>

Demo of a layout with Inference enabled is given below:
Android ConstraintLayout inferences

The xml code for the above gif is :


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView22"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="59dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        android:layout_marginEnd="31dp"
        app:layout_constraintRight_toRightOf="@+id/textView22"
        android:layout_marginTop="178dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="31dp" />
</android.support.constraint.ConstraintLayout>

tools:layout_constraintTop_creator="1": The creator attributes to keep track of who created the constraints, particularly if they are created by the inference engine they’re assigned as 1.

Deleting Constraints

To delete an individual constraint, hover over the circular handle and click it has it turns red.
To delete all constraints of a view, click the symbol underneath it that looks like:
Android ConstraintLayout delete

A sample demo gif is given below:
Android Constraint Layout delete

This brings an end to this tutorial. You can go ahead and try replacing some of your own layouts with a constraint layout.

Comments

  1. Philip G Gibbs says:

    Best example and explanation i’ve seen. I’ve had issues getting everthing positioned correctly in a complex layout with relative layout. This example helps.

  2. Anupam says:

    Hi Khushbu,
    People should slowly start using Constraint Layouts in their projects.
    Reason: It has all the features you need to avoid nesting your layouts. Nested Layouts can impact the performance of your application badly.

    Thanks

  3. khushbu says:

    Hi Anupam,

    Superb detailed explanation. Really enjoy learning all ur tutorials.
    Hey but do ppl use constraint layout? I mean I feel it will take time to get comfortable with it.
    Bcz normally all codding can be done without using it right?

    Thanks for gr8 explanation on constraint layout along with demo

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages