Exploring the new Constraint Layout in Android

Introduction:

ConstraintLayout is a new functionality which comes only in Android Studio 2.2 Preview 3 with the new Layout editor. To create the ConstraintLayout we have to update the AndroidStudio with this new version.

To implement the ConstraintLayout first, we check whether Android Support Repository is updated or not, if not then update this in SDK manager.

Then Add the ConstraintLayout Library as a dependency in our build.gradle file i.e.

build.gradle:

By using this Layout editor, we can build the UI faster by simply dragging and dropping the view inside ConstraintLayout.

We can add the constraints to define the view position, by simply dragging an anchor line to other items in this layout.

About Constraints:

A constraint helps us define the positions of a widget with the other elements inside the layout.

To understand the Constraints there is a need to know about some basic handles like:

In this image we can easily see there are three handles i.e

1. Resize Handle: This handle is used to change the size of a widget.2. Side Constraint Handle:

    This handle is on each side of a widget, it shows the location of a widget. By dragging it we can release it with their sides accordingly.

   3. Baseline Constraint Handle:

To align any two widgets in the same line this handle is used. It can be used by simply, dragging a line from one widget and releasing it on another widget baseline.

How to Create Manual Constraints in ConstraintLayout:

If we want to create the manual Constraints, then simply click and hold the handle and drag it to the another widget and when we see the anchor is green release it.

For example, see this image:

How to Delete Constraints:

If we want to delete a constraint, then click on that anchor of a widget and to delete the all constraints in layout click on this menu to remove it. 

           What is the role of Inspector in Constraint Layout?

        It helps to edit the properties without leaving the UI Builder. Inspector shows that the widget in the center in square block looks like

          It is right side of UI Builder.

          By using slider, we can also change the position of the widget like the vertical and horizontal bias by moving the widget in that direction.

         These are the inner lines of Inspector pane:

          Fixed:

•  It specifies the height/width of a widget.

           Any size:

•  It is like match_parent, which occupies all the available space.

            Wrap content:

•  It wraps the width / height of a widget according to the text.

How to create Constraints using Autoconnect:

In this Layout editor, there is a feature called Autoconnect. It automatically creates the connections between the widgets. To use it we have to enable the Autoconnect option like . If we want to disable it click on it like 

It automatically creates one or more constraints for each view and it is very easy to remove or adjust the constraints by using this functionality.

For example, see the image:

Create Constraints using Inference:

This option defines Inference. It automatically creates the constraints for all the views inside the layout. It depends on the size and position of a widget while creating the connections.

Output:

This was all about the ConstraintLayout which explains how we can create the UI very quickly and easily. All these are the basic functionalities and information about ConstraintLayout. It is very easy to develop applications using this. This is a very recent feature which comes with the latest layout editor in Android Studio 2.2 Preview 3. Currently, it is very popular for Android development.