Android Constraint Layout Barrier and Gone Margin

Question

I have a constraint layout looks like this:

A-B
--------- (barrier that refer to A and B bottom)
C (constraint_top_bottomOf barrier)

Here is the code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".TypographyActivity"
    android:background="?attr/lightPrimary">

    <TextView
        android:id="@+id/textviewA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/textviewB"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Text A" />

    <TextView
        android:id="@+id/textviewB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toEndOf="@id/textviewA"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Text B" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="textviewA, textviewB" />

    <TextView
        android:id="@+id/textviewC"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:layout_goneMarginTop="30dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/barrier"
        android:text="Text C" />

</androidx.constraintlayout.widget.ConstraintLayout>

goneMarginTop in textviewC always triggered even when A and B are visible.

Is there a way I can add goneMarginTop to textviewC, when A and B are gone without wrapping A and B to another layout?

Thank you.

Answer 1

Barriers do not show in layouts and, I believe, they are set to "gone" always. That is why you are seeing the gone margin on text view "C" - it is constrained to a "gone" widget.

If you want to use a gone margin, you will have to constraint text view "C" to a widget that is gone when text views "A" and "B" are both gone. One way to do this is to create a Space widget and constrain its top to the barrier. Then constrain the top of "C" to the Space widget. You will have to ensure that the Space widget is gone when both "A" and "B" are gone and visible when either "A" or "B" (or both) is visible.

The details will depend upon your needs, but the general layout will look something like this:

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_light">

    <TextView
        android:id="@+id/textviewA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Text A"
        android:visibility="visible"
        app:layout_constraintEnd_toStartOf="@+id/textviewB"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textviewB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Text B"
        android:visibility="visible"
        app:layout_constraintStart_toEndOf="@id/textviewA"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="textviewA, textviewB" />

    <Space
        android:id="@+id/space"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/barrier" />

    <TextView
        android:id="@+id/textviewC"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Text C"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/space"
        app:layout_goneMarginTop="30dp" />

</androidx.constraintlayout.widget.ConstraintLayout>