Skip to main content

How to create guidelines in a ConstraintLayout using Kotlin Android

How to create guidelines in a ConstraintLayout using Kotlin Android.

Creating Guidelines in a ConstraintLayout using Kotlin Android

In this tutorial, we will learn how to create guidelines in a ConstraintLayout using Kotlin in Android development. Guidelines are useful for positioning and aligning views within a ConstraintLayout.

Step 1: Set up a ConstraintLayout​

First, we need to create a ConstraintLayout in our XML layout file. Open the desired layout file (e.g., activity_main.xml) and replace the existing root layout with a ConstraintLayout:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Add views here -->

</androidx.constraintlayout.widget.ConstraintLayout>

Step 2: Add views to the ConstraintLayout​

Inside the ConstraintLayout, add the views you want to position and align using guidelines. For example, let's add two TextViews:

<androidx.constraintlayout.widget.ConstraintLayout
    ...>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@id/guideline1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 2"
        app:layout_constraintStart_toEndOf="@id/guideline1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Note that the views have constraints to the start/end of the guidelines, guideline1 in this case, which we will create in the next steps.

Step 3: Create horizontal guidelines​

To create a horizontal guideline, add the following code inside the ConstraintLayout, just before the views:

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

In this example, layout_constraintGuide_percent is set to 0.5, which means the guideline will be positioned exactly in the middle of the ConstraintLayout.

Step 4: Create vertical guidelines​

Similarly, to create a vertical guideline, add the following code inside the ConstraintLayout, just before the views:

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

In this example, layout_constraintGuide_percent is set to 0.7, which means the guideline will be positioned at 70% of the height of the ConstraintLayout.

Step 5: Apply constraints to the guidelines​

To position and align the guidelines within the ConstraintLayout, we can use the same constraints as we do for other views. For example, to align the vertical guideline (guideline2) to the bottom of the ConstraintLayout, add the following constraint to the guideline:

app:layout_constraintBottom_toBottomOf="parent"

Similarly, we can apply constraints to the guidelines to position them wherever we want within the ConstraintLayout.

Step 6: Build and run the project​

After completing the above steps, build and run the project on an emulator or a physical device. The TextViews should now be positioned and aligned according to the guidelines you created.

Conclusion​

In this tutorial, we learned how to create guidelines in a ConstraintLayout using Kotlin in Android development. Guidelines are powerful tools for positioning and aligning views within a ConstraintLayout, providing flexibility and responsiveness to your app's user interface.