Chaining of the Elements in Android

Chaining elements in Android refers to the practical linking of UI elements in such a way that it defines their behaviour and layout. Chaining is particularly useful in developing response design ensuring that elements inside the UI adapt to different screen sizes and orientations.

Chaining can be done using Constraint layouts where constraints are linked between two elements like this A <---> B. This means A is linked with B and B is linked with A. This adapts a chain in Android.

Prerequisites

1. Android Studio Installed
2. Understanding of Constraint Layout
3. Basic XML knowledge.

What is Constraint Layout?

Constraint Layout is a versatile layout manager that allows you to create complex layouts with ease. Constraint Layout enables the definition of constraint between elements making them linked.

• Single Directional Constraint: If the constraint is single directional that is, from element A to B, then changes in the position of B can affect the position of A but not vice-versa
• Bi-Directional Constraint: Similarly a bi-directional constraint that is, constraint from A to B and B to A makes a chain between the two elements, and changes in the position of both may affect the position of the other.

Chaining Elements

To create a chain you need at least 2 elements inside your constraint layout. Chaining is a built-in feature in the constraint layout. You can manually put a chain using XML code or put a chain between the elements using the design layout provided by Android Studio.

Chaining elements can be Horizontal or Vertical. This will specify if you want your elements side-by-side or one after another. In these there are 3 types of chaining:

1. Spread Chain: In this, the elements are distributed evenly inside the screen.
2. Spread Inside Chain: In this, the first and last elements stick to the parent, and the middle ones are evenly distributed.
3. Packed Chain: All the elements are packed together in this chain.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Add few elements inside your layout

Add more than 1 element inside your constraint layout and place them in order inside the screen. Don't apply any constraints yet.

Step 3: Select all the elements for chaining

Press and Hold the 'Left Control' key and select all the elements you want to chain using the left mouse click.

Step 4: Right-click on any element

Right-click on any element, then go to Chains->Vertical/Horizontal Chain. Let's apply a vertical chain here as an example, so we will select a Vertical Chain.

After Selecting Vertical Chain, the result should look something like this:

You can see that a vertical chain is successfully made. The default chain mode is Spread mode, so this is a Spread vertical chain.

To make the chain into Spread inside or Packed:

1. Right-click on any chained element.
2. Go to Chains >Vertical Chain Style
3. Choose the one you like.

Here we have selected a Packed Chain, let's look at the packed chain output. This is the packed chain, all elements together.

Step 5: Implementation of in activity_main.xml file

The XML code will automatically get updated when you make changes using the above steps this is how one can chain their elements in Android Studio with ease.

activity_main.xml:

<?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"
    android:background="@color/white"
    tools:context=".MainActivity">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        tools:srcCompat="@tools:sample/avatars" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_margin="32dp"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Demonstration Video:

The below video demonstrate how to properly use chaining with an ImageView, a Button and a TextView.