Android : Constraint Layout Set Constraint top programmatically?

Question

I have 3 views : A,B,C. (A and B are equal in height) At the beginning B's visibility is gone and C's top constraint is the bottom of A , so C appears below A. After some time I change the visibility of A to gone and B to visible. What happens is that C is dragged to the top because A's visibility is gone. What I want to do is set the top constraint of C to the bottom of B. How can I do this? I need to do it programmatically.

Here is where I am now currently ->

<?xml version="1.0" encoding="utf-8"?>

 //A
<LinearLayout

    android:onClick="clickedOnRecordLayout"
    android:layout_marginTop="@dimen/record_layout_top_margin"
    android:id="@+id/record_button_layout"
    android:gravity="center"
    android:elevation="@dimen/elevation_of_record_button"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@drawable/red_circle_drawable"
    android:layout_width="@dimen/radius_of_record_button"
    android:layout_height="@dimen/radius_of_record_button">

    <ImageView
        android:id="@+id/record_image"
        android:src="@drawable/ic_microphone"
        android:layout_width="@dimen/record_image_dimen"
        android:layout_height="@dimen/record_image_dimen" />
</LinearLayout>

 //B - initially its visibility is gone
<LinearLayout
    android:onClick="clickedOnStartedRecordingLayout"
    android:visibility="gone"
    android:layout_marginTop="@dimen/record_layout_top_margin"
    android:id="@+id/started_button_layout"
    android:gravity="center"
    android:elevation="@dimen/elevation_of_record_button"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@drawable/red_circle_drawable"
    android:layout_width="@dimen/radius_of_record_button"
    android:layout_height="@dimen/radius_of_record_button">

    <ImageView
        android:id="@+id/stop_image"
        android:src="@drawable/ic_stop_recording"
        android:layout_width="@dimen/record_image_dimen"
        android:layout_height="@dimen/record_image_dimen" />
</LinearLayout>


//C
<TextView
    android:layout_marginTop="@dimen/tap_text_top_margin"
    app:layout_constraintTop_toBottomOf="@id/record_button_layout"
    android:id="@+id/tap_on_microphone_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:text="@string/tap_to_start_message"
    android:textAlignment="center"
    android:textColor="@android:color/black"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@id/chronometer"
    app:layout_constraintHorizontal_bias="0.503"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

Answer 1

You are welcome to use ConstraintSet, but if you like to keep it simple I would like to bring to your notice

ConstraintLayout has a specific handling of widgets being marked as View.GONE.

GONE widgets, as usual, are not going to be displayed and are not part of the layout itself (i.e. their actual dimensions will not be changed if marked as GONE).

But in terms of the layout computations, GONE widgets are still part of it, with an important distinction:

For the layout pass, their dimension will be considered as zero (basically, they will be resolved to a point) If they have constraints to other widgets they will still be respected, but any margins will be as if equals to zero Check it out here

Let me demonstrate with a simple layout.

<?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"
    tools:context=".LoginActivity">

    <EditText     // View A
        android:id="@+id/email"
        android:hint="email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="textEmailAddress"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText // View B
        android:id="@+id/password"
        android:hint="password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:visibility="gone"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/email" />
    <EditText   //View C
        android:id="@+id/otp"
        android:hint="otp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/password" />

    <Button
        android:id="@+id/login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="Login"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

This layout looks like

When you set the email field i.e view A to gone

When you set password to GONE, i.e View B

This is the magic of Constraint layout.