Spread-chain group of elements with ConstraintLayout

Question

I'm having an issue to spread-chain 2 groups of elements with Constraint Layout. I understand the goal of this new layout is to use a flat hierarchy so I'd like to avoid putting my elements inside a child layouts.

I looked at some awesome resources like constraintlayout.com but couldn't figure out how to make it work for my specific case - which I think can be common..

Here is an image of what I'd like to achieve. In red, spaces 1, 2 and 3 need to have the same height (just like spread chain).

Thank you for your attention :)

Urgent

What have you tried so far? – Emulsion

I tried adding 2 empty views (EV1 and EV2). Align top of ViewA to top of EV1, bottom of ViewC to bottom of EV1, but it didn't change EV1's height. I was then going to do the same to the second group (ViewD and ViewE aligned with EV2). And finally I'd have done a spread chain on EV1 and EV2. – Urgent

Answer 1

You can achieve this using:

<?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:orientation="vertical"
                                                   android:layout_width="match_parent"
                                                   android:layout_height="match_parent">

    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/button2"
            app:layout_constraintVertical_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button2"
            app:layout_constraintTop_toBottomOf="@+id/button"
            app:layout_constraintBottom_toTopOf="@+id/button3" 
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button3"
            app:layout_constraintTop_toBottomOf="@+id/button2"
            app:layout_constraintBottom_toTopOf="@+id/space"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    <Space
            android:id="@+id/space" 
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/button4"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>
    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button4"
            app:layout_constraintTop_toBottomOf="@+id/button3"
            app:layout_constraintBottom_toTopOf="@+id/button5"
            app:layout_constraintVertical_chainStyle="packed" 
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button5"
            app:layout_constraintTop_toBottomOf="@+id/button4"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Evangelicalism

That seems to be the solution looking at your screenshot but I don't understand how it works. It's late for me so I'll think more and try tomorrow (and mark it as solve). Why should I use the chainstyle only on buttons 1 and 4 and give it a packed value? Thank you for helping – Urgent

Okey try it in tomorrow and let me know your feedback. – Evangelicalism

@Urgent : Have you getting chance to look into this? – Evangelicalism

All good, I tried it and it works as expected. I took some time to understand what you wrote and it makes sense now, thanks a lot! – Urgent

@MehulKabaria From what i can tell this only works when you have 2 groups? If you have 3 groups this won't work? – Ceiba

@MehulKabaria I tried it but couldn't get it to work. Feels like this is the wrong approach to solving this problem (Adding a empty view that is). Feels like the correct way to go about it is nesting at this moment, from what I can tell there is no nice way to achieve this with ConstraintLayout. – Ceiba

Thanks for this brilliant solution! If I understand this correctly, basically there are two chains (bidirectionally connected views) as the two button groups here. The View (or actually Space with 0dp height is better) is used to anchor the top of the second chain, and let the bottom of the first chain connect to it, so that both chains are fully connected vertically and ConstraintLayout will allocate space evenly between them. I think this can work with 3 groups by adding an anchor Space for bottom of second group, and another anchor Space for top of the third group. – Airily