Creating a ConstraintLayout

There are two ways to create a ConstraintLayout. The first is to convert an existing layout to a ConstraintLayout, which can be done by right-clicking on the layout in either the component tree or the graphical editor and selecting the convert option. You will be presented with the following dialog:

It is usually best to check both these options, but it is worth noting that these conversions will not always produce the desired results and often view dimensions will require a little tweaking to faithfully reproduce the original.

When it works, the previous approach provides a fast solution, but if we are to master the topic, we need to know how to create constraint layouts from scratch. This is particularly important as once we have become familiar with the working of the constraint layout; we will see that it is by far the easiest and most flexible way to design our interfaces.

The ConstraintLayout is so well incorporated with the Layout Editor, that it is perfectly possible to design any layout we choose without ever having to write any XML. However, here we will be looking closely at both the graphical and textual perspectives, so as to develop a deeper understanding of the technology.

You can create a fresh ConstraintLayout from the res/layout directory in project explorer's context-sensitive menu as a New | Layout resource file with the following root element:

This will produce the XML shown here:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
 
</android.support.constraint.ConstraintLayout> 

As with other layout types, the constraint layer provides mechanisms for positioning and aligning the views and widgets within it. This is done largely through the use of handles that can be positioned graphically to size and align our views.