Salomon BRYS
Salomon BRYS

Reputation: 9584

Fixed chain part in ConstraintLayout

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

Answers (2)

Cheticamp
Cheticamp

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:

enter image description here

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.

enter image description here

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.

enter image description here

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

ibhavikmakwana
ibhavikmakwana

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>

enter image description here

Upvotes: 0

Related Questions