Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Use ConstraintLayout

DZone's Guide to

How to Use ConstraintLayout

ConstraintLayout has more flexibility and performs better than RelativeLayout. Learn how to use ConstraintLayout for your Android apps.

· Mobile Zone ·
Free Resource

If you’re familiar with RelativeLayout, then ConstraintLayout should feel similar to you. ConstraintLayout has much more flexibility, though, and performs better than the RelativeLayout. In general, you should always use ConstraintLayout over RelativeLayout.

To add ConstraintLayout to your project, place the following in your build.gradle files:

// Add the Google maven repository
repositories {
    maven {
        url 'https://maven.google.com'
    }
}

// Add to your app's dependencies
dependencies {
  compile 'com.android.support.constraint:constraint-layout:1.0.2'
}

Before we look at an example of ConstraintLayout, let’s look at an example using RelativeLayout. I want to have a layout that looks like this:
Image title

To accomplish this, here is my RelativeLayout:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="@android:color/holo_blue_bright"
            android:text="1"
            android:textSize="44sp"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/textView1"
            android:background="@android:color/holo_blue_dark"
            android:text="2"
            android:textSize="44sp"/>

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_toRightOf="@+id/textView2"
            android:background="@android:color/holo_green_dark"
            android:text="3"
            android:textSize="44sp"/>

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textView1"
            android:layout_toRightOf="@+id/textView1"
            android:background="@android:color/holo_orange_dark"
            android:text="4"
            android:textSize="44sp"/>
</RelativeLayout>

Now to do the same with ConstraintLayout, I added the same kind of constraints my RelativeLayout had:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        android:background="@android:color/holo_blue_bright"
        android:text="1"
        android:textSize="44sp"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/textView1"
        android:background="@android:color/holo_blue_dark"
        android:text="2"
        android:textSize="44sp"/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/textView2"
        android:background="@android:color/holo_green_dark"
        android:text="3"
        android:textSize="44sp"/>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/textView1"
        app:layout_constraintLeft_toRightOf="@+id/textView1"
        android:background="@android:color/holo_orange_dark"
        android:text="4"
        android:textSize="44sp"/>
</android.support.constraint.ConstraintLayout>

But, the result looked like this:
Image title

This is because my TextView’s width is set to wrap_content, so it only takes as much space as it needs. As opposed to in the RelativeLayout, where the view gets stretched to make it align properly. If you want the view to fill up this space, you can simply set the width to 0dp.

As you can see already, ConstraintLayout can do the same things as RelativeLayout, and more. Another nice addition from ConstraintLayout is the Guideline. This can be used in your ConstraintLayout to help set the position and size of your views. For example, if I wanted TextView1 from my previous example to take up 25% of the width, I could do it like this:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_bright"
        android:text="1"
        android:textSize="44sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/guideline1"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_dark"
        android:text="2"
        android:textSize="44sp"
        app:layout_constraintLeft_toRightOf="@+id/textView1"/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark"
        android:text="3"
        android:textSize="44sp"
        app:layout_constraintLeft_toRightOf="@+id/textView2"
        app:layout_constraintRight_toRightOf="parent"/>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_dark"
        android:text="4"
        android:textSize="44sp"
        app:layout_constraintLeft_toRightOf="@+id/textView1"
        app:layout_constraintTop_toBottomOf="@+id/textView1"/>
</android.support.constraint.ConstraintLayout>

Image title

One other big improvement over RelativeLayout is the design tab support. While you can write the XML yourself like I did above, there are some nice visual tools available too.

Image title

Further Reading

To learn more about ConstraintLayout, check out the official Android documentation.

Topics:
android ,mobile ,mobile app development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}