Android ConstraintLayout Cheatsheet

Center a view horizontally, set layout_constraintLeft_toLeftOf and layout_constraintRight_toRightOf to parent.

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

Center a view vertically, set layout_constraintTop_toTopOf and layout_constraintBottom_toBottomOf to parent.

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

Align to the top left.

app:layout_constraintLeft_toLeftOf="parent"

Align to the top center.

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

Align to the top right.

app:layout_constraintRight_toRightOf="parent"

Align to the center left.

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

Align to the center.

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

Align to the center right.

app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

Align to the bottom left.

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

Align to the bottom center.

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

Align to the bottom right.

app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

ConstraintLayout baseline for aligning views on the same line level horizontally.

<?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:id="@+id/tv_wifi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Enable Wifi"/>
    <Switch
        android:id="@+id/switch_wifi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_wifi"
        app:layout_constraintRight_toRightOf="parent"/>


    <TextView
        android:id="@+id/tv_bluetooth"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Enable Bluetooth"
        app:layout_constraintTop_toBottomOf="@+id/tv_wifi"/>
    <Switch
        android:id="@+id/switch_bluetooth"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_bluetooth"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch_wifi"/>

</android.support.constraint.ConstraintLayout>

Placing a view on top of each other, it’s similar to RelativeLayout, all you need to do is to position the views in the same area, the first view will be at the bottom, the second and the following views will cover, layout on top of the previous ones.

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <View
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="#ab4343"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#b6573c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
    <View
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#ba7639"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>

Position views one after another horizontally. For example, there are 3 views with id view1, view2, and view3, the following will make them to line up horizontally one after another just like using LinearLayout with orientation set to horizontal.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:gravity="center"
        android:text="one"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/view2"/>
    <TextView
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:gravity="center"
        android:text="two"
        app:layout_constraintLeft_toRightOf="@+id/view1"
        app:layout_constraintRight_toLeftOf="@+id/view3"/>
    <TextView
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:gravity="center"
        android:text="three"
        app:layout_constraintLeft_toRightOf="@+id/view2"/>
</android.support.constraint.ConstraintLayout>

Position views one after another vertically. For example, there are 3 views with id view1, view2, and view3, the following will make them to line up vertically one after another just like using LinearLayout with orientation set to vertical.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:gravity="center"
        android:text="one"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/view2"/>
    <TextView
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:gravity="center"
        android:text="two"
        app:layout_constraintTop_toBottomOf="@+id/view1"
        app:layout_constraintBottom_toTopOf="@+id/view3"/>
    <TextView
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:gravity="center"
        android:text="three"
        app:layout_constraintTop_toBottomOf="@+id/view2"/>
</android.support.constraint.ConstraintLayout>

Center views horizontally. Center two buttons horizontally in the middle.

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

    <Button
        android:id="@+id/btn_save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Save"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_cancel"
        app:layout_constraintHorizontal_chainStyle="packed"/>

    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancel"
        app:layout_constraintLeft_toRightOf="@+id/btn_save"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

Center views vertically. Center 3 buttons vertically in the middle.

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

    <!-- Vertically center a group of views using chain style packed -->
    <Button
        android:id="@+id/btn_save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Save"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/btn_delete"
        app:layout_constraintVertical_chainStyle="packed"/>

    <Button
        android:id="@+id/btn_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Delete"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_save"
        app:layout_constraintBottom_toTopOf="@+id/btn_cancel"/>

    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancel"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_delete"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

ConstraintLayout layout_constraintHorizontal_bias. In this example, all the TextViews are constrained to the left and right of the parent. The first TextView has a horizontal bias of 0, thus it is positioned at the beginning of the horizontal line, the second TextView has a horizontal bias of 0.1, thus it is position on the 10th position of the horizontal, the third 0.2 on 20th, the fourth 0.3 on 30th, and so on.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="00"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="10"
        app:layout_constraintHorizontal_bias="0.1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="20"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="30"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="40"
        app:layout_constraintHorizontal_bias="0.4"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="50"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="60"
        app:layout_constraintHorizontal_bias="0.6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="70"
        app:layout_constraintHorizontal_bias="0.7"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="80"
        app:layout_constraintHorizontal_bias="0.8"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="90"
        app:layout_constraintHorizontal_bias="0.9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="100"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

ConstraintLayout Guideline for dividing the view container in percentage. In this example, there are 3 vertical GuideLines defined to divide the parent view in four sections. The first GuideLine has a percent of 0.25, the second has a percent of 0.5 and the third has a percent of 0.75, thus these 3 GuideLines sectioned the parent view into four columns with equal spaces. They are not visible because they are only there as a guide line, so other views can set the layout constraints against these guide lines.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

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

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


    <TextView
        android:id="@+id/tv_25"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:background="#8adc3d"
        android:gravity="right|center"
        android:text="25%"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/gl_vertical_line25"/>

    <TextView
        android:id="@+id/tv_50"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:background="#8adc3d"
        android:gravity="right|center"
        android:text="50%"
        app:layout_constraintTop_toBottomOf="@+id/tv_25"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/gl_vertical_line50"/>

    <TextView
        android:id="@+id/tv_75"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:background="#8adc3d"
        android:gravity="right|center"
        android:text="75%"
        app:layout_constraintTop_toBottomOf="@+id/tv_50"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/gl_vertical_line75"/>

    <TextView
        android:id="@+id/tv_100"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:background="#8adc3d"
        android:gravity="right|center"
        android:text="100%"
        app:layout_constraintTop_toBottomOf="@+id/tv_75"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

Another way of doing match_parent in ConstraintLayout. If the width is set to 0dp, and the layout_constraintLeft and layout_constraintRight is set, it will match the view with from the left to the right of the view’s left and right neighbor views or parent container.

<?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">
    <Button
        android:id="@+id/btn_save"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Save"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/btn_delete"
        app:layout_constraintVertical_chainStyle="packed"/>
    <Button
        android:id="@+id/btn_delete"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Delete"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_cancel"
        app:layout_constraintTop_toBottomOf="@+id/btn_save" />

    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Cancel"
        app:layout_constraintLeft_toRightOf="@+id/btn_delete"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_save" />

</android.support.constraint.ConstraintLayout>

An example of using ConstraintLayout for list item view layout, with an ImageView on the left and two TextViews on the left next to the ImageView, and centered vertically.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <ImageView
        android:id="@+id/iv_photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_android_black_48dp"/>
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:text="Black Android"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/tv_email"
        app:layout_constraintLeft_toRightOf="@+id/iv_photo"
        app:layout_constraintRight_toRightOf="parent"/>
    <TextView
        android:id="@+id/tv_email"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:text="Black.Android@test.com"
        app:layout_constraintTop_toBottomOf="@+id/tv_name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/iv_photo"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

Complete example in Github