Android Constraint Layout Tutorial

Android ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups).

It’s similar to RelativeLayout in that all views are layered out according to relationships between sibling views and the parent layout, but it’s more flexible than RelativeLayout and easier to use with Android Studio’s Layout Editor.

ConstraintLayout is also part of the Android Jetpack.

Checkout my another tutorial on Android Jetpack.

Room Database Android Example [Beginners] 

The ConstraintLayout is also compatible right down to API level 9.

Contents

Constraints

Chains

Guidelines

Dimensions

Bias

Auto-Connect

Deleting Constraints

Constraint Layout Example

Constraints

A constraint defines a relationship between two widgets in the layout and controls how those widgets will be positioned within the layout.

The aim of the ConstraintLayout is to help reduce the number of nested views, which will improve the performance of our layout files.

For Example, I have created EditText with Constraints.

<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

ConstraintLayout features several more attributes:

  • constraintTop_toTopOf — Align the top of the desired view to the top of another.
  • layout_constraintTop_toBottomOf — Align the top of the desired view to the bottom of another.
  • layout_constraintBottom_toTopOf — Align the bottom of the desired view to the top of another.
  • layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
  • layout_constraintLeft_toTopOf — Align the left of the desired view to the top of another.
  • layout_constraintLeft_toBottomOf — Align the left of the desired view to the bottom of another.
  • layout_constraintLeft_toLeftOf — Align the left of the desired view to the left of another.
  • layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.
  • layout_constraintRight_toTopOf — Align the right of the desired view to the top of another.
  • layout_constraintRight_toBottomOf — Align the right of the desired view to the bottom of another.
  • layout_constraintRight_toLeftOf — Align the right of the desired view to the left of another.
  • layout_constraintRight_toRightOf — Align the right of the desired view to the right of another.
  • If desired, attributes supporting start and end are also available in place of left and right alignment.

Chains

What Are Chains?

Chains are a specific kind of constraint which allows us to share space between the views within the chain and control how the available space is divided between them.

The closest analog with traditional Android layouts is weighted in Linear Layout but chains do far more than that, as we shall see.

Creating a chain

There are three possible modes: spread, spread_inside, and packed.

Packed Chain

The final mode is which packed will pack the views together (although you can provide margins to separate them slightly), and then centers the group within the available space.

Spread Chain

The default mode is spread mode, and this will position the views in the chain at even intervals within the available space.

Spread Inside Chain

The next mode is spread_inside which snaps the outermost views in the chain to the outer edges and then positions the remaining views in the chain at equal intervals within the available space.

Guidelines

guideline is a visual guide which will not be seen at runtime that is used align other views.

Guidelines can be oriented either horizontally or vertically.

Creating A Guideline

To create a vertical guideline you do so by right-clicking on the blueprint view and selecting from Add Vertical Guideline the context menu.

Using Guidelines

Dimensions

Sometimes we need to create views which have a fixed aspect ratio. This is particularly useful with ImageView we need to display images which come from a feed, and we know that any images we get will be a specific aspect ratio.

Bias

This allows us to position a view along the vertical or horizontal axis.

Vertical Bias

This allows us to position a view along the vertical axis using a bias value, this will be relative to it’s constrained position.

attribute in our XML like,

app:layout_constraintVertical_bias="0.5"

Horizontal Bias

This allows us to position a view along the horizontal axis using a bias value, this will be relative to it’s constrained position.

attribute in our XML like,

app:layout_constraintHorizontal_bias="0.5"

Baseline Constraint Handle

The baseline constraint allows use to align the baseline of multiple textviews, regardless of their text sizes.

Baseline contains handles can only be constrained to another baseline.

Auto-Connect

Auto-connect allows you to place a view inside the layout editor and have it automatically calculate and set the constraints for you.

Deleting Constraints

Deleting Single Constraints

 Delete All Constraints

Constraint Layout Example

I have created simple login screen application using constraint layout. 

To begin with, we need to add the dependency for the ConstraintLayout from the support library.

implementation 'com.android.support.constraint:constraint-layout:1.0.2'

activity_main.xml

<?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"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/coordinator"
  tools:context="com.example.velmurugan.constraintlayoutandroidexample.MainActivity"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <ImageView
      android:id="@+id/imageViewProfile"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintVertical_bias="0.10"
      tools:srcCompat="@tools:sample/avatars" />


  <android.support.design.widget.TextInputLayout
      android:id="@+id/textInputUsername"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:layout_constraintTop_toBottomOf="@+id/imageViewProfile"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      android:layout_margin="20dp">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Username" />

  </android.support.design.widget.TextInputLayout>

  <android.support.design.widget.TextInputLayout
      android:id="@+id/textInputpassword"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintTop_toBottomOf="@+id/textInputUsername"
      app:layout_constraintStart_toStartOf="@+id/textInputUsername"
      app:layout_constraintEnd_toEndOf="@+id/textInputUsername"
      app:passwordToggleEnabled="true"
      android:layout_marginTop="10dp">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:hint="Password" />

  </android.support.design.widget.TextInputLayout>



  <android.support.v7.widget.AppCompatButton
      android:id="@+id/buttonLogin"
      android:layout_width="200dp"
      android:layout_height="wrap_content"
      android:text="Login"

      app:layout_constraintTop_toBottomOf="@id/textInputpassword"
      app:layout_constraintStart_toStartOf="@id/textInputpassword"
      app:layout_constraintEnd_toEndOf="@id/textInputpassword"
      android:layout_marginTop="10dp"/>


  <android.support.v7.widget.AppCompatTextView
      android:id="@+id/textViewForgotPassword"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:layout_constraintTop_toBottomOf="@id/buttonLogin"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      android:layout_margin="20dp"
      android:text="Forgot Password ?"
      android:textColor="@android:color/holo_blue_dark"/>

</android.support.constraint.ConstraintLayout>

Design for the XML,

 

That's it. 

You can download the same example in Github.

Thank you for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *