ConstraintLayout Example In Android

Android’s ConstraintLayout layout manager is strong and adaptable, enabling you to design intricate and responsive user interfaces.

It enables you to specify restrictions (relationships) across views so they can adjust to various screen sizes and orientations.

ConstraintLayout is a popular option for creating intricate and dynamic user interfaces since it performs better than nested layouts like RelativeLayout and LinearLayout.

Let’s look at an example of a login screen to see how ConstraintLayout is used. Let’s say we have a layout with a login button, two EditText fields for the user name and password, and more.

The ConstraintLayout must first be included to our XML layout file as the root element. The restrictions for each view can then be specified within the ConstraintLayout.

Here is the XML File of the layout.

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

    <EditText
        android:id="@+id/usernameEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Username"
        android:inputType="text"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.7"
        />

    <EditText
        android:id="@+id/passwordEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword"
        app:layout_constraintTop_toBottomOf="@+id/usernameEditText"
        app:layout_constraintStart_toStartOf="@id/usernameEditText"
        app:layout_constraintEnd_toEndOf="@id/usernameEditText"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.7"
        app:layout_constraintVertical_bias="0.2"
        />

    <Button
        android:id="@+id/loginButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        app:layout_constraintTop_toBottomOf="@+id/passwordEditText"
        app:layout_constraintStart_toStartOf="@id/passwordEditText"
        app:layout_constraintEnd_toEndOf="@id/passwordEditText"
        app:layout_constraintVertical_bias="0.2"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

We would set the login button’s top constraint to the bottom of the password field and its horizontal constraint to the centre horizontally in order to centre it and align it below the password field.

To fine-tune the positioning and behaviour of the views within the ConstraintLayout, we may also declare other constraints such as margin, aspect ratio, visibility, and more.

These limitations ensure that the views automatically alter their sizes and locations in response to changes in screen size or device usage.

Finally, ConstraintLayout offers an adaptable and effective method for creating responsive user interfaces in Android. You may design layouts that adjust to different screen sizes and orientations by specifying relationships between views.