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?

Have you considered using ConstraintSet for dynamic constraints, and maybe you can attach image of what you have right now, and what you expect it to be? — Parag Pawar, Oct 31 '19 at 16:43
Okay, so let me know if I understood this correctly. Constraint C is attached to the bottom of A, and now you want to attach C to the bottom of B and Hide A, right? — Parag Pawar, Oct 31 '19 at 17:00
Correct. With the example above the result is: square A above square C. I need to programatically change to: square B above square C. — Bugdr0id, Oct 31 '19 at 17:02
Okay, first of all, try cloning the constraintset. For example, cs_C.clone(rootView) Here rootView being your root constraint of all 3 constraints. See if it changes anything — Parag Pawar, Oct 31 '19 at 17:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/201675/discussion-between-parag-pawar-and-bugdr0id). — Parag Pawar, Oct 31 '19 at 17:11
You can try from the answers below, It might solve your problem — Parag Pawar, Oct 31 '19 at 17:30

score 0 · Accepted Answer · answered Oct 31 '19 at 17:20

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

score 0 · Answer 2 · answered Oct 31 '19 at 17:21

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.

ConstraintLayout - Dynamically set constraints

2 Answers2