Skip to main content

How to center a view horizontally and vertically in a ConstraintLayout using Kotlin Android

How to center a view horizontally and vertically in a ConstraintLayout using Kotlin Android.

Here's a step-by-step tutorial on how to center a view horizontally and vertically in a ConstraintLayout using Kotlin in Android.

Step 1: Set up the project​

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

Step 2: Add ConstraintLayout dependency​

In your project's build.gradle file, add the following dependency to include ConstraintLayout in your project:

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

Sync your project to download the dependency.

Step 3: Design the layout​

Open the XML layout file where you want to center a view. Replace the existing root layout with a ConstraintLayout. For example, let's say you want to center a TextView:

<?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/centeredText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Centered Text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

In this example, we have a TextView with an id centeredText that we want to center both horizontally and vertically in the ConstraintLayout.

Step 4: Center the view horizontally​

To center the view horizontally, we need to set the layout_constraintStart_toStartOf and layout_constraintEnd_toEndOf constraints to the parent ConstraintLayout. This will make the view's start and end edges align with the parent's start and end edges, effectively centering it horizontally.

Step 5: Center the view vertically​

To center the view vertically, we need to set the layout_constraintTop_toTopOf and layout_constraintBottom_toBottomOf constraints to the parent ConstraintLayout. This will make the view's top and bottom edges align with the parent's top and bottom edges, effectively centering it vertically.

Step 6: Run the app​

Now that the layout is set up, you can run the app on an emulator or physical device to see the centered view. The TextView should be centered both horizontally and vertically in the ConstraintLayout.

That's it! You have successfully centered a view horizontally and vertically in a ConstraintLayout using Kotlin in Android. You can apply the same steps to center any other views in your layout.