Android ConstraintLayout vertical chain weighted spaces

Question

The idea is to have vertical chain with different spaces between items. To be more clear, here is an example of desired behaviour for LinearLayout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="@android:color/darker_gray"
    android:orientation="vertical">

    <View
        android:id="@+id/space1"
        android:layout_width="match_parent"
        android:layout_weight="2"
        android:layout_height="0dp" />

    <View
        android:id="@+id/contentView1"
        android:layout_width="match_parent"
        android:layout_weight="0"
        android:layout_height="70dp"
        android:background="@android:color/black" />

    <View
        android:id="@+id/space2"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp" />

    <View
        android:id="@+id/contentView2"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_weight="0"
        android:background="@android:color/black" />

    <View
        android:id="@+id/space3"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp" />
</LinearLayout>

Here layout_weight="0" makes content view wrapping its height. layout_weight="1" and layout_weight="2" makes view filling available free space proportionally to its weight. If content views become bigger, spaces become smaller (if no room, no spaces).

Since the target UI is more complex than just vertical stack, I'd like to use ConstraintLayout instead of LinearLayout. But I don't see a way to set percentage for chain spaces.

Thanks fo your suggestions.

score 1 · Answer 1 · answered Jul 16 '21 at 04:56

While I was writing this question, I found possible workaround with extra view in chain. But maybe you know even better solution?

<?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="300dp"
    android:background="@android:color/darker_gray">

    <View
        android:id="@+id/space1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHeight_percent="0"
        app:layout_constraintBottom_toTopOf="@id/contentView1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread" />

    <View
        android:id="@+id/contentView1"
        android:layout_width="0dp"
        android:layout_height="70dp"
        android:background="@android:color/black"
        app:layout_constraintBottom_toTopOf="@id/contentView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/space1" />

    <View
        android:id="@+id/contentView2"
        android:layout_width="0dp"
        android:layout_height="70dp"
        android:background="@android:color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/contentView1" />

</androidx.constraintlayout.widget.ConstraintLayout>

Android ConstraintLayout vertical chain weighted spaces

1 Answers1