Design Flexible Layouts With Constraints

Part 2: Guidelines

1. Guideline: Guidelines are basically advice given to our layout to align our widgets/views. Guidelines are not shown at runtime. It is of two types:

• vertical
• horizontal

How to add Guideline?

For deep understanding let’s start with example of simple Login screen below:

Step 1: Add constraint for logo. (For instance taking as 12% from top,you can also give guideline a fixed size guide instead of percentage)

Now add Imageview with constraints as bottom of the guideline

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.12" />

<de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_img"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@drawable/semi_circle"
        android:padding="14dp"
        android:src="@drawable/ic_person_black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline_top" />

Step 2: Adding vertical guideline for input field(taking as 7% from left and 6% from right)

Adding editText for username and passwords with constraints as left/right of guideline

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.07" />

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.96" />


<EditText
        android:id="@+id/edit_username"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:hint="Username"
        android:paddingLeft="10dp"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="@id/guideline9"
        app:layout_constraintStart_toStartOf="@id/guideline8"
        app:layout_constraintTop_toBottomOf="@+id/profile_img" />

<EditText
        android:id="@+id/edit_password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:hint="Password"
        android:paddingLeft="10dp"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="@id/guideline9"
        app:layout_constraintStart_toStartOf="@id/guideline8"
        app:layout_constraintTop_toBottomOf="@+id/edit_username" />

Step 3: Adding button to bottom of editPassword

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@drawable/button_background"
        android:elevation="16dp"
        android:paddingLeft="18dp"
        android:paddingRight="18dp"
        android:text="Login"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/edit_password" />

That’s all for Guidelines

For basic positioning please have a look at Part1

Suggestions are always invited!! Happy Coding