Skip to main content

How to create chains of views in a ConstraintLayout using Kotlin Android

How to create chains of views in a ConstraintLayout using Kotlin Android.

Here's a step-by-step tutorial on how to create chains of views in a ConstraintLayout using Kotlin Android:

  1. Start by creating a new Android project in Android Studio and open the layout file for the activity where you want to create the chains of views.

  2. Inside the XML layout file, add a ConstraintLayout as the root layout. This will be the container for our views.

<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>
  1. Add the views that you want to include in the chain inside the ConstraintLayout. For example, let's add three TextViews:
<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" />
  1. Now, we can create a horizontal chain by connecting the start and end of each view in the chain. In this example, we want to create a chain between textView1, textView2, and textView3.
val textView1 = findViewById<TextView>(R.id.textView1)
val textView2 = findViewById<TextView>(R.id.textView2)
val textView3 = findViewById<TextView>(R.id.textView3)

val constraintLayout = findViewById<ConstraintLayout>(R.id.constraintLayout)

constraintLayout.createHorizontalChain(
    ConstraintSet.PARENT_ID, ConstraintSet.LEFT,
    ConstraintSet.PARENT_ID, ConstraintSet.RIGHT,
    intArrayOf(textView1.id, textView2.id, textView3.id),
    null,
    ConstraintSet.CHAIN_SPREAD
)
  1. Finally, we need to apply the constraints to the ConstraintLayout. 
val constraintSet = ConstraintSet()
constraintSet.clone(constraintLayout)
constraintSet.applyTo(constraintLayout)

The createHorizontalChain method is used to create a chain of views horizontally. The parameters specify the start and end constraints for the chain, the views to include in the chain, the weights for the views (null in this example), and the chain style (CHAIN_SPREAD in this example).

You can also create vertical chains using the createVerticalChain method, and specify different chain styles like CHAIN_SPREAD_INSIDE, CHAIN_PACKED, or CHAIN_WEIGHTED.

That's it! You have successfully created a chain of views in a ConstraintLayout using Kotlin Android. You can customize the chain by adjusting the constraints and chain style according to your requirements.