Android ConstraintLayout Example Tutorial

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. 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. 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 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. 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. Notice the Properties inspector pane at the right-hand side: 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.
• Any Size - This is similar to match parent.
• Fixed Size - This allows us to set constant width and height.

The xml code for the above layout looks like: sample.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://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. The xml code for the above layout is :

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://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: As the name suggests, Auto-connect creates constraints automatically between two neighbouring views
2. Inference - This feature is enabled by clicking: 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: 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="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://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: The xml code for the above gif is :

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://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: A sample demo gif is given below: This brings an end to this tutorial. You can go ahead and try replacing some of your own layouts with a constraint layout.