Skip to main content

How to align views vertically in a ConstraintLayout using Kotlin Android

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

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

Step 1: Set up the project​

  1. Create a new Android project in Android Studio.
  2. Choose an appropriate project name, package name, and minimum SDK version.
  3. Select the "Empty Activity" template and click "Finish" to create the project.

Step 2: Add ConstraintLayout dependency​

  1. Open the project's build.gradle file (located in the project root directory).
  2. Add the following line to the dependencies block:
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
  3. Sync the project to download the ConstraintLayout library.

Step 3: Design the layout​

  1. Open the activity_main.xml layout file in the res/layout folder.
  2. Replace the existing code with the following:
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

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

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

</androidx.constraintlayout.widget.ConstraintLayout>

This layout consists of three TextViews stacked vertically. Each TextView is constrained to the top of the previous TextView, ensuring vertical alignment.

Step 4: Implement the MainActivity class​

  1. Open the MainActivity.kt file in the app/java/com.example.yourappname folder.
  2. Replace the existing code with the following:
package com.example.yourappname

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Step 5: Run the app​

  1. Connect your Android device or emulator.
  2. Click the "Run" button in Android Studio's toolbar to build and run the app.
  3. The app should launch on your device or emulator, displaying the vertically aligned TextViews.

That's it! You have successfully aligned views vertically in a ConstraintLayout using Kotlin for Android development. You can customize the layout further by adjusting the constraints or adding more views as needed.