androidandroid-constraintlayoutconstraintset

ConstraintLayout - Dynamically set constraints


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?


Solution

  • 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