Step 2

Add the Guidelines

Adding the guidelines

As we mentioned earlier, Guideline can play a very import part of our design. For this example we're going to need 5 guidelines, 1 vertical and 4 horizontal.

This is the code to create a Guideline:

<android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

When you copy paste code from here with just selecting with the mouse the whole block you may encounter some errors like "Expecting an element" or "Expecting member declaration". It's easy to resolve it by removing the white spaces in Android studio or by copying it using the button on the top right corner of the snippet as demonstrated below.

Copy the code from that button instead of selecting the text

Go ahead and create:

• A vertical Guideline in the middle of the screen

• A horizontal Guideline in the middle of the screen

• A horizontal Guideline at 38%

• A horizontal Guideline at 30%

• A horizontal Guideline at 20%