Skip to main content

How to align views horizontally in a ConstraintLayout using Kotlin Android

How to align views horizontally in a ConstraintLayout using Kotlin Android.

Here's a detailed step-by-step tutorial on how to align views horizontally in a ConstraintLayout using Kotlin for Android development.

Step 1: Set up your project​

Start by creating a new Android project in Android Studio. Make sure you have the latest version of Android Studio installed on your machine.

Step 2: Add the ConstraintLayout dependency​

In your app-level build.gradle file, add the following line of code to the dependencies block:

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

Sync your project to download the ConstraintLayout library.

Step 3: Design your layout​

Open the activity_main.xml layout file in the res/layout directory. Replace the existing code with the following XML code:

<?xml version="1.0" encoding="utf-8"?>
<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">

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

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

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View 3"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View 4"
        app:layout_constraintStart_toEndOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

In this example, we have four TextViews (textView1, textView2, textView3, and textView4) that we want to align horizontally.

Step 4: Align views horizontally​

To align the views horizontally, we need to use the app:layout_constraintStart_toEndOf attribute. This attribute specifies that the start edge of the current view should be connected to the end edge of the specified view.

In the XML code above, we have set the app:layout_constraintStart_toEndOf attribute for each TextView except the first one. This will align the start edge of each TextView with the end edge of the previous TextView, creating a horizontal alignment.

Step 5: Build and run your app​

Build and run your app on an emulator or a physical device. You should see the four TextViews aligned horizontally in the ConstraintLayout.

That's it! You have successfully aligned views horizontally in a ConstraintLayout using Kotlin for Android development. You can apply the same approach to align any number of views horizontally in your layout.

I hope this tutorial was helpful to you.