Vertical bias not working in Constraint Layout Android

Issue

Hey I want to give vertical bias on my imageview. But it is not working. I want to be together the whole view. But when I set the constraint it stretch the view and divided into equal parts.

I don't want this

I want like this with proper constraint set

Here is my xml code

<androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/contentContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:focusable="true"
            android:focusableInTouchMode="true">

            <ImageView
                android:id="@+id/topImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="24dp"
                android:src="@drawable/xyz"
                android:visibility="visible"
                app:layout_constraintBottom_toTopOf="@+id/header"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="ContentDescription" />

            <TextView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toTopOf="@+id/description"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/topImage"
                tools:text="Header" />

            <TextView
                android:id="@+id/description"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toTopOf="@+id/imageView"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/header"
                app:layout_constraintVertical_bias="0.0"
                tools:text="Description" />

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintVertical_bias="0.0"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/description"
                tools:ignore="ContentDescription" />

        </androidx.constraintlayout.widget.ConstraintLayout>

Solution

You have a vertical chain of four views (top and bottom constrained to each other in order). When there's a chain, they're treated as a group in that direction, and there is a "chain style" that determines how they get spaced out. The default chain style is "spread" but you want "packed". Add

app:layout_constraintVertical_chainStyle="packed"

to your first view in the chain, topImage. It will affect the whole chain. You can also right-click the chain in the Design editor and change the chain style that way.

And if you want to use vertical bias, you should put it in topImage, the first view of your chain, instead of imageView. The whole group will be biased together, but the bias is interpreted relative to the first view. Or if you just want the whole group biased all the way to the top, you could remove the bias and the constraint between the bottom view and the bottom of the parent.

Answered By - Tenfour04