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.

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.

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.

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.

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

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

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.

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.

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.

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.

Complete example in Github