What is ConstraintLayout?

ConstraintLayout is a one type of layout like other layouts like RelativeLayout that used to design nested or complex UIs. This layout used to create complex and other large layouts to fit in a group very easily which show a flat view hierarchy. Using this type of layout, you can dynamically position UI elements or views in relation to one to other views on the screen. Or we simply understand that ConstraintLayout is similar to RelativeLayout. As compare to RelativeLayout, it’s easier to use with Android studio’s Layout Editor.

In this tutorial, we’ll discuss the use of android ConstraintLayout. Google had introduced android constraint layout editor to make design easy for developer. The new Layout Editor has a set of powerful tools to allow developers to create flat-ui hierarchies for their different types of layouts.

For example, the attributes of a relative layout allow us to position a view using:

1. layout_toRightOf
2. layout_toLeftOf
3. layout_toTopOf
4. layout_toBottomOf

However, the ConstraintLayout features several more attributes:

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.

Add ConstraintLayout to your project

To use android ConstraintLayout, make sure you’re using the latest Android Studio version. Ideally, Android Studio 3.0 and above.

We need to download the necessary SDK Tools for ConstraintLayout from the SDK Manager.

Create a new empty activity project and add the required dependency inside the build.gradle file.

To use ConstraintLayout in your project, proceed as follows:

To start with using this layout firstly, you need to add maven.google.com repository declaration as shown below in your module-level build.gradle file:

Add the library as a dependency in the build.gradle file, as shown in the below snap.

Note that the latest version might be different than what is shown in the example:

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

Now, you’re ready to build your any UI with ConstraintLayout.

Create a new ConstraintLayout in Android studio

To create a new ConstraintLayout in android studio, follow the below steps :

In the Project window, click the module folder and then select Layout > New > Layout resource file.

Enter a name for the layout file and enter “android.support.constraint.ConstraintLayout” for the Root element.

Finally, Click OK.

Convert a layout

To convert any existing layout to ConstraintLayout, go through the given steps :

1. Open any Android studio project, then open relevant layout file that you want to convert to ConstraintLayout.

2. In the Component Tree window, right-click the layout and click Convert layout to ConstraintLayout.

Layout will successfully have converted into ConstraintLayout.