Reputation: 802
How to chain multiple chains of different styles (spread,packed..) in constraint layout?
In other words, how to make a chain of group of views which are already in a chain of different style on the same axis (horizontal/vertical)?
As depicted in picture:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:id="@+id/view1"
android:text="VIEW 1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/view2"/>
<Button
android:id="@+id/view2"
android:text="VIEW 2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/view1"
app:layout_constraintBottom_toTopOf="@+id/view3"/>
<Button
android:id="@+id/view3"
android:text="VIEW 3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/view2"
app:layout_constraintBottom_toTopOf="@+id/view4"/>
<Button
android:id="@+id/view4"
android:text="VIEW 4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/view3"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
Upvotes: 6
Views: 3563
Reputation: 245
In order to achieve a "spread chain of packed chains" you first create two separate packed chains in the normal way. Let's call them chain1 and chain2. Then create a <space>
. Now connect them like this: chain1 end -> space, space -> chain2 start, chain2 start -> chain1 end.
Here is a more in depth explanation
Upvotes: 2