Constraints are a fundamental part of the modern Android UI design, especially with the use of the ConstraintLayout. It can provide a flexible and efficient way to design complex user interfaces without nesting the multiple ViewGroups.

This article will guide you through the concepts of the constraints in Android and implementation, showing how to use them effectively to create responsive layouts.

Prerequisites

• Good Knowledge of the Android Development.
• Basic understanding of XML layout files in Android.
• Android Studio is installed on your local system.

Constraints in Android

Constraints are rules that can define the position and size of the widget in the ConstraintLayout. By setting constraints, we can specify how the widget should be positioned relative to the other widgets or the parent layout. It allows for dynamic and responsive UI designs that adapt to the different screen sizes and orientations.

Types of Constraints

1. Relative Positioning Constraints

These constraints can align the view relative to the edges of the parent container or to another view in the layout.

    <!-- Parent View -->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <!-- Another View -->
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"
        app:layout_constraintTop_toBottomOf="@id/button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

Relative Positioning of element with respect to another can be done using Constraint layout:

2. Margins Constraints

This constraints can add the space around the view using margin attributes of the layout file.

    <!-- Parent View -->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <!-- Another View -->
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"
        app:layout_constraintTop_toBottomOf="@id/button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"/>

Output:

3. Bias Constraints

This constraints can adjust the positioning of the view between the two constraints using bias. Its value range from 0.0 to 1.0.

Example

    <!-- Parent View -->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <!-- Another View -->
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"
        app:layout_constraintTop_toBottomOf="@id/button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.7"/>

Bias Constraints in the android application looks like this:

4. Chains Constraints

This constraints can create the groups of the views that can share the space in the linear arrangements like horizontal or vertical.

Example

    <Button
        android:id="@+id/button1"
        android:layout_width="123dp"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintBottom_toTopOf="@+id/button3"
        app:layout_constraintTop_toBottomOf="@+id/button2"
        app:layout_constraintWidth_percent="0.3" />

    <Button
        android:id="@+id/button2"
        android:layout_width="123dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintBottom_toTopOf="@+id/button1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="123dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1"
        app:layout_constraintWidth_percent="0.3" />

Vertical Chains in the article looks like this in the application:

5. Guidelines Constraints

This constraint can be invisible lines used to the position views consistently.

Example

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintGuide_begin="100dp"
        android:orientation="horizontal"/>

This is how Guidelines Constraint looks like:

These are the primary types of the constraints you can use in the ConstraintLayout to create the flexible and responsive Android user interfaces. By the combining these constraints, we can design the complex layouts that can adapt to the different screen sizes and orientations.

Example Implementation of the Constraints in Android

Below is a Example of how complex layouts can be created using Constraints in Constraint Layout in Android Application:

Open the activity_main.xml and put the below code.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">

    <!-- Centering a Button in Parent -->
    <Button
        android:id="@+id/button_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- Aligning Button to the Start of Parent -->

    <!-- Aligning Button to the End of Parent -->
    <Button
        android:id="@+id/button_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="104dp"
        android:text="Start"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="End"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp" />

    <!-- Constraining Button Below Another Button -->
    <Button
        android:id="@+id/button_below"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Below Start"
        app:layout_constraintTop_toBottomOf="@id/button_start"
        app:layout_constraintStart_toStartOf="@id/button_start"
        android:layout_marginTop="16dp" />

    <!-- Constraining Button Above Another Button -->
    <Button
        android:id="@+id/button_above"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Above Start"
        app:layout_constraintBottom_toTopOf="@id/button_start"
        app:layout_constraintStart_toStartOf="@id/button_start"
        android:layout_marginBottom="16dp" />

    <!-- Constraining Button to Left and Right of Two Other Buttons -->
    <Button
        android:id="@+id/button_between"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Between"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/button_start"
        app:layout_constraintEnd_toStartOf="@id/button_end" />

    <!-- Constraining Button to Baseline of Another Button -->
    <Button
        android:id="@+id/button_baseline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Baseline"
        app:layout_constraintBaseline_toBaselineOf="@id/button_center"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="16dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Constraints UI:

Conclusion

Constraints are the powerful tool in the Android UI design. It can allowing the developers to create the complex and responsive layouts with ease. By the understanding and utilizing the different types of the constraints, we can design the user interfaces that adapt to the various screens and orientations and also it can providing the better user experience.