Relative Positioning in ConstraintLayout

Relative positioning in ConstraintLayout is the basic building blocks of creating layouts. Constraints used in relative positioning allow to position a given widget relative to another one.

A widget can be constrained on both the horizontal and vertical axis i.e.

Horizontal Axis: It allows to constraint left, right, start and end sides
Vertical Axis: It allows to constraint top, bottom sides and text baseline.

Constraint List

List of available constraints are

layout_constraintLeft_toLeftOf : Left of the widget will be aligned to the left of the parent view.
layout_constraintLeft_toRightOf : Left of the widget will be aligned to the right of the parent view.
layout_constraintRight_toLeftOf : Right of the widget will be aligned to the left of the parent view.
layout_constraintRight_toRightOf : Right of the widget will be aligned to the right of the parent view.
layout_constraintTop_toTopOf : Top of the widget will be aligned to the top of the parent view.
layout_constraintTop_toBottomOf : Top of the widget will be aligned to the bottom of the parent view.
layout_constraintBottom_toTopOf : Bottom of the widget will be aligned to the top of the parent view.
layout_constraintBottom_toBottomOf : Bottom of the widget will be aligned to the bottom of the parent view.
layout_constraintStart_toStartOf : Start of the widget will be aligned to the start of the parent view.
layout_constraintStart_toEndOf : Start of the widget will be aligned to the end of the parent view.
layout_constraintEnd_toStartOf : End of the widget will be aligned to the start of the parent view.
layout_constraintEnd_toEndOf : End of the widget will be aligned to the end of the parent view.
layout_constraintBaseline_toBaselineOf : Used for baseline text.

ConstraintLayout will compute all the constraint attributes and try its best to place your view. So if a view has a fixed size and you provide two constraints for the same axis, they would be used as endpoints and the layout will by default center the view on the available space. Here is an example of how to center a view in its parent by constraining every view’s side to it.

<androidx.constraintlayout.widget.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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:textSize="32sp"
        android:text="CENTRE"/>
</androidx.constraintlayout.widget.ConstraintLayout>

***Center text using ConstarintLayout***

In the below example, TextView1 is anchored left and right side to a 0.5 guideline. ConstraintLayout then centered the middle of the view to the anchor point i.e. the guideline. TextView2 is anchored on right side of TextView1, to get a centered view.

<androidx.constraintlayout.widget.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">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        app:layout_constraintRight_toLeftOf="@+id/guideline"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"
        android:padding="16dp"
        android:textSize="32sp"
        android:text="MNOPQ" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/textview1"
        app:layout_constraintRight_toRightOf="@+id/textview1"
        app:layout_constraintLeft_toRightOf="@+id/textview1"
        android:padding="16dp"
        android:textSize="32sp"
        android:text="F" />

</androidx.constraintlayout.widget.ConstraintLayout>

***Center views using ConstraintLayout***

Bias

A bias is a percent (a float value between 0 and 1) and lets you choose how the view will be placed between its constraints on an axis. By default the view is centered which corresponds to a 0.5 bias.

layout_constraintHorizontal_bias : Position of a view along the horizontal axis can be defined using a bias value.
layout_constraintVertical_bias : Position of a view along the vertical axis can be defined using a bias value.

Below example shows the example of horizontal bias.

<androidx.constraintlayout.widget.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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.9"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:textSize="32sp"
        android:text="CENTRE" />

</androidx.constraintlayout.widget.ConstraintLayout>

***Horizontal Bias using ConstraintLayout***

Ratio

To constraint the position of view can also be constrained using a ratio (width:height). This means that if one side of your view has a fixed size or a wrap_content, the other size will respect the ratio that you would have specified as width:height. In order to do that, you need to have at least one constrained dimension be set to 0dp (i.e., MATCH_CONSTRAINT), and set the attribute layout_constraintDimensionRatio to a given ratio.

You can also use it when both sides of your view are set to match_constraint, but then you must specify which side will be computed as a ratio of the other one by adding W or H before the ratio. For example, If one dimension is constrained by two targets (e.g. width is 0dp and centered on parent) you can indicate which side should be constrained, by adding the letter W (for constraining the width) or H (for constraining the height) in front of the ratio. For example

<androidx.constraintlayout.widget.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:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H, 30:4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:textSize="32sp"
        android:layout_marginLeft="50dp"
        android:text="Text" />

</androidx.constraintlayout.widget.ConstraintLayout>

Reference

ConstraintLayout