Applying constraints

The best way to see how this works is to try it, as these few simple steps will demonstrate. Create a ConstraintLayout as described previously and drag and drop one or two views or widgets from the palette onto the blueprint screen, similar to following figure:

Each view has constraint handles on its corners and its sides. Those on the corners are for simply resizing a view in the way that we are all familiar with. Those along the sides, however, are used to create constraints. These position views are relative to their parents or each other in a way that is not dissimilar to the relative layout.

As this is largely a graphical form of editing, it is best demonstrated by action. Drag the left side anchor point of one of your views toward the left side of the layout and release the mouse button as prompted to create a parent constraint. This being a layout that contains others will be a parent constraint.

If you now open the text editor, you will see the constraint realized like so:

app:layout_constraintLeft_toLeftOf="parent" 

You will also notice from the code that an error is generated by this view. This is because we need both vertical and horizontal constraints for each view. This is achieved in exactly the same way, with something like:

app:layout_constraintTop_toTopOf="parent" 

Constraints can be created between child views as well, using the same drag and drop technique or:

app:layout_constraintTop_toBottomOf="@+id/image_view" 

Constraints can be used to align sibling views as well as joining two adjacent sides, which generates code along these lines:

app:layout_constraintLeft_toLeftOf="@+id/image_view" 

A constraint can be deleted very simply, in either editor mode, by clicking on its originating handle.

This drag and drop method is not peculiar to Android Studio, but there is one editing tool that is unique to Android Studio by providing a editable schematic perspective in the Properties tool.