ConstraintLayouts were announced quite some time ago, but I still see many questions appearing on StackOverflow.com about how to use ConstrainLayouts or how to convert already existing layouts to ConstraintLayouts.

I hope I will be able to solve some of the most common problems you may come across while using the new type of layouts available in the Android Support repository for building flexible and efficient layouts.

Let’s go!

Divide the screen into two views

We want to achieve a layout as shown below. There are two ImageViews. Both should take up 50% of the screen’s width.

Expected result:

Solution:

<?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:id="@+id/textA"

android:layout_width="0dp"

android:layout_height="0dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintWidth_percent=".5"

tools:src="@tools:sample/avatars" />



<ImageView

android:id="@+id/textB"

android:layout_width="0dp"

android:layout_height="0dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="1"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintWidth_percent=".5"

tools:src="@tools:sample/avatars" />



</android.support.constraint.ConstraintLayout>

Explanation:

We use

layout_constraintHorizontal_bias

to move the views to the extreme left or right, and

layout_constraintWidth_percent

to set the views’ width in percentage values according to the screen’s width.

Placing ImageView between two views

We want to get a layout as shown below. The top (blue) view takes up 35% of the screen’s height, and the ImageView keeps the aspect ratio as 1:1, and should be centered on the bottom border of the top view, and the width should take up 33% of the screen’s width.

Expected result:

Solution:

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



<View

android:id="@+id/view"

android:layout_width="0dp"

android:layout_height="0dp"

android:background="#019AE8"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintHeight_percent=".35"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0" />



<android.support.constraint.Guideline

android:id="@+id/guideline"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

app:layout_constraintGuide_percent=".70" />



<ImageView

android:layout_width="0dp"

android:layout_height="0dp"

app:layout_constraintBottom_toTopOf="@+id/guideline"

app:layout_constraintDimensionRatio="w,1:1"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent

app:layout_constraintWidth_percent=".33"

tools:src="@drawable/ic_user" />



</android.support.constraint.ConstraintLayout>

Explanation:

First, we add the view and set it to make it take up only 35% of the screen’s view by writting

layout_constraintHeight_percent=".35"

Okay, we know that the top view takes up 35% of the screen’s height. If we add an additional view with the same value as in

layout_constraintHeight_percent

below it, we will be then able to constraint our ImageView between them, and the view will be centered. But instead of taking up an additional space for Guideline, we can just declare the starting vertical position by calling

layout_constraintGuide_percent=".70"

so that the Guideline does not take up space, but moves to the declared height.

The last step is to constraint our ImageView within the top and bottom views and that’s it!