ConstraintLayout - Dynamically set constraints

Question

Basic example of multiple ConstrainLayout:

<android.support.constraint.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="wrap_content"
    android:id="@+id/constLayout_root"
    >

    <android.support.constraint.ConstraintLayout
        android:id="@+id/constLayout_A"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="#ff0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <android.support.constraint.ConstraintLayout
        android:id="@+id/constLayout_B"
        android:layout_width="30dp"
        android:layout_height="40dp"
        android:background="#f0f"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <android.support.constraint.ConstraintLayout
        android:id="@+id/constLayout_C"
        android:layout_width="30dp"
        android:layout_height="50dp"
        android:background="#0f0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/constLayout_A"
        />

</android.support.constraint.ConstraintLayout>

constLayout_B overlays constLayout_A, and constLayout_C is now displayed below constLayout_A.

Now I need to programatically change constraints and display constLayout_C below constLayout_B (and hide constLayout_A).

I have tried to chain them together in this way:

final ConstraintSet cs_C = new ConstraintSet();
cs_C.connect(constLayout_C.getId(), ConstraintSet.TOP, constLayout_B.getId(), ConstraintSet.BOTTOM);
cs_C.connect(constLayout_C.getId(), ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM);
cs_C.connect(constLayout_C.getId(), ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START);
cs_C.connect(constLayout_C.getId(), ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END);
cs_C.applyTo(constLayout_C);

final ConstraintSet cs_B = new ConstraintSet();
cs_B.connect(constLayout_B.getId(), ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP);
cs_B.connect(constLayout_B.getId(), ConstraintSet.BOTTOM, constLayout_C.getId(), ConstraintSet.TOP);
cs_B.connect(constLayout_B.getId(), ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START);
cs_B.connect(constLayout_B.getId(), ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END);
cs_B.applyTo(constLayout_B);

My ConstraintSet is not being applied for some reason. How can I change the top constraint of constLayout_C dynamically?

Answer 1

Your layout B overlays with Layout A because you set broth's app:layout_constraintTop_toBottomOf attributes to parent.And set constraint layout margin programmatically is not a good practice. set your layout like this

<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="wrap_content"
android:id="@+id/constLayout_root"
>

<android.support.constraint.ConstraintLayout
    android:id="@+id/constLayout_A"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_marginTop="24dp"
    android:background="#ff0"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.501"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.ConstraintLayout
    android:id="@+id/constLayout_B"
    android:layout_width="30dp"
    android:layout_height="40dp"
    android:layout_marginTop="17dp"
    android:background="#f0f"
    android:visibility="gone"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/constLayout_A" />

<android.support.constraint.ConstraintLayout
    android:id="@+id/constLayout_C"
    android:layout_width="30dp"
    android:layout_height="50dp"
    android:layout_marginTop="16dp"
    android:background="#0f0"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/constLayout_B" />

</android.support.constraint.ConstraintLayout>

And remember the purpose of using constrainLayout is it gives us the facilities to drag and drop the view and set it in Layout,not to consider it to set programmatically

Answer 2

You Constraint B in XML layouts has visibility Gone.

<android.support.constraint.ConstraintLayout
    android:id="@+id/constLayout_B"
    android:layout_width="30dp"
    android:layout_height="40dp"
    android:background="#f0f"
    android:visibility="gone"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />

Change it to VISIBLE within XML, or during constrain set changes in code. Make sure you are using ConstraintSet.clone() before applying changes.