Graphic Properties tool

You will no doubt have noticed the diagrammatic representation of a view that pops up in the Properties window, when a ConstraintLayout view is selected as follows:

This tool allows size and position properties to be edited with a single click and for the output to be instantly understood in a simple schematic form. It only takes seconds to learn and can speed up interface design considerably, particularly when experimenting with different layouts.

Inside the central square, representing our view, there are four lines, which when clicked on cycle through the following three states:

• Unbroken line: The view is an exact width, for example, 240dp
• Fuzzy line: The view can be any size (dependent on bias), match_parent
• Directed line: The view matches its own content, wrap_content

Often, we will not want to constrain a view to the very edge of its container. For example, we may wish to divide the layout into two or more sections and have views organized within them. Guidelines allow us to divide our screens into sections and can be used exactly like parent edges. Take the following example:

Guidelines like this are most easily added from the constraint toolbar at the top of the design editor. Guidelines are added as XML components and look like this:

<android.support.constraint.Guideline 
    android:id="@+id/gl_vertical" 
    android:layout_width="wrap_content" 
    android:layout_height="311dp" 
    android:orientation="vertical" 
    app:layout_constraintGuide_begin="175dp" /> 

We can now use these guidelines to center elements according to the whole layout or any of the four panes we have created, and all without nesting a single layout. In the following screenshot, we have a centered header and side panel with another view contained in a single pane, and we can of course apply bias to any of these sections:

If this system did not already provide enough advantages, there are more. Firstly, it proves very useful when aligning text as well as a more enhanced positioning technique referred to as bias, which performs a similar function to the weight attribute, but is better when it comes to designing for multiple screens. We will take a look first at text alignment constraints.