Reputation: 9584
With a ConstraintLayout Chain, we can space several elements so that they are spaced evenly. To further the pain, each view has its own size...:
|~~~~~AA~~~~~B~~~~~CCCCC~~~~~DD~~~~~|
Now, what I would like to do is to have a part of this chain being fixed, and the other part of the chain adapting in consequence:
|~~~~~~AA~~~~~~B-CCCCC~~~~~~DD~~~~~~|
^
center
Is it possible without adding views to the chain, and keeping each view width to wrap_content
?
Upvotes: 1
Views: 926
Reputation: 62831
We can construct a chain between any two views as well as to the sides of the parent. Here is the first example with a chain create across all four views. "AA" and "DD" are constrained to the start and end side of the parent:
All views are in the chain and the members of the chain are spread evenly across the parent.
Here is an example where "CCCCC" is centered on a guideline that is itself centered in the parent. "AA" and "BB" are now in there own chain and are spread evenly across the gap between the start of the parent and the start of "CCCCC". "DD" is centered in its space but does not participate in a chain because a chain need at least two members. "CCCCC" is not in a chain but has a "fixed" position in the horizontal center of the layout.
Lastly, here is an example where the start of "CCCCC" is constrained to the center guideline. As you can see, all the other views adjust according to their constraints when "CCCCC" is moved.
Once properly constrained, views will adjust their positions in accordance with the constraint rules as "CCCCC" is moved around the layout. See "Chains" for the official documentation.
Upvotes: 1
Reputation: 10101
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="@+id/textView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textView"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="@+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/guideline"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textView3"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
</android.support.constraint.ConstraintLayout>
Upvotes: 0