Search code examples
androidxmlkotlinandroid-constraintlayout

The app:layout_constraintVertical_chainStyle="spread_inside" or any of the options - packed, spread - has not effect; why?


<?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"
    app:layout_constraintVertical_chainStyle="spread_inside">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintTop_toTopOf="parent"/>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1"
        app:layout_constraintBottom_toTopOf="@id/button3"/>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button2"/>


</androidx.constraintlayout.widget.ConstraintLayout>

In the provided code, the attribute app:layout_constraintVertical_chainStyle="spread_inside" is set on the parent ConstraintLayout. This attribute controls the spacing behavior between views in a vertical chain.

According to the documentation, the "spread_inside" chain style should evenly distribute the extra space between views in the chain, while aligning the first and last views to the top and bottom of the chain, respectively.

However, when the layout is rendered, the chain style does not appear to have any effect. This could be due to other constraints that are conflicting with the chain style; what can I do to make it to work?.


Solution

  • According to the documentation: Chains are controlled by attributes set on the first element of the chain, so instead of applying the attribute to the ConstraintLayout, apply it to the top most widget inside the chain:

    <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button 1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/button2"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="spread_inside" />