ConstraintLayout Android – Overview and Implementation

ConstraintLayout in Android – Overview and Implementation

ConstraintLayout in short is RelativeLayout on Drugs!! This is a viewgroup and was released as part of the v7 support library that came out last year. There is almost endless amount of flexibility that this Layout provides. We will take a look at all of them.

What does ConstraintLayout really do? How different is it from RelativeLayout?

First of all, ConstraintLayout is still in Beta mode. It is being developed and the perception among developer’s is that, it is done inorder to resemble the layout development in IOS. Also, the main reason is to improve performance when deep nesting is involved, as we can easily create constrained layouts instead of nesting a linear layout and a framelayout inside.

Coming on to the coding part of it. We will use, the following dependencies.

Add this in your Project Gradle

repositories {
    google()
}

Add this in your App gradle

dependencies {
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
}

Sync your Application

ConstraintLayout – Complete Properties Overview

The following are the additional properties that have come up with ConstraintLayout:

• layout_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.

ConstraintLayout – Playing with the properties

We will be accessing the ConstraintLayout through the Design Editor and see the capabilities.

Once you have created declared the constraint layout and built it, add it in the XML, and start editing the design.

I have dropped a TextView, a Button and an ImageView to the ConstraintLayout.

Lets see the things we can achieve with Constraint Layout.

Resizing your Views

It is very simple to resize your Views using the resize cursor.

It is important to note that, an error pops up on your editor like this

This error occurs, because this view is not constrained. Every view inside the ConstraintLayout needs to be given a proper Vertical or Horizontal constraint.

In our case, this can be manually added, or we can simply click the Infer constraints button on our editor.

Pressing this will automatically add code in your editor to infer the Horizontal or Vertical Constraints easily.

Align the Edge of the Views

How easy will it be, if you can easily align the views with respect to another view. This creates a flatter hierarchy instead of deeper nesting of layouts!!

We can do this by, dragging the anchor point to connect with another anchor point.

If you see clearly, as soon as the anchor point of the ImageView is clicked, it is highlighting all the anchor points of TextView . This will give you and idea of how the linking can take place!!

Baseline Aligning of Views

Once you have seen how the Edge alignment happens, you can perform similar alignment with respect to the baseline of any view also. Baseline of a textview is the bottom line of the Text inside the textview. We will see how the baseline alignment is done.

View Sizing

We have looked at ways to align views with one another. Here we will see how to adjust the view size for different content on different screen.

Using the method in Resize Your Views section above hardcodes the values on your view. You can instead use the below method to dynamically resize based on the screen size.

Within the properties section of the layout editor, you’ll notice a section which states the actual size constraints for the selected view.

Adjusting Size

The lines inside the square mean that, the view will match the parent and resize accordingly. Fun way to denote that though!!

Wrap Content

The arrows say that the content will be wrapped by the view. That is, the view will be as big as the content inside it only.

Size is Fixed

The lines state that the views height and width are of a fixed size, which is declared below.

Bias in ConstraintLayout

You can set the bias to the View, by just adjusting the bar on the side. A Horizontal or a Vertical Bias can be added.

Bias is nothing but a additional distance by which the view should move in the vertical or horizontal axis with respect to another view.

Vertical Bias

Since my ImageView is vertically linked to the button and the ImageView above, i can make changes to the vertical Bias.

Horizontal Bias

If the elements are linked to each other on the sides, we can add horizontal bias like below.

ConstraintLayout – Best Practices

It is imperative to consider the performance improvement when you use constraint layout. There are situations when you wont find performance improvement with respect to a simple LinearLayout, however, the main use case of a constraint layout is to flatten the heirarchy.

This means, when there is a deep nesting (Relativelayout, framelayout, linearlayout etc nested), we can flatten the heirarchy by simply using the constraint layout.

The performance improvement is clearly seen in that case. It is still in Beta mode, experiments conducted with it, so we can expect for some improvements and better usability in the coming months. Use this layout only when there is a absolute necessity. If you can manage with the other Layouts, go for it and consider this as a secondary option for now.

“Learn and Be Curious”