ConstraintLayout - Align view to top or bottom of another view, depending on the visibility of the o-CodePudding

I have the following simplified XML layout with one constraint layout, two textviews and one switch:

<?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">

    <TextView
        android:id="@ id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Demo"
        app:layout_constraintEnd_toStartOf="@id/innerConstraintLayout"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.SwitchCompat
        android:id="@ id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/textView1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/textView1" />

    <TextView
        android:id="@ id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textView1"
        app:layout_constraintTop_toBottomOf="@id/switch1" />
</androidx.constraintlayout.widget.ConstraintLayout>

For switch1 I have to use layout_constraintTop_toTopOf and layout_constraintBottom_toBottomOf to center it horizontally with textView1. Otherwise switch1 would be too big.

textView2 should be visible below switch1 if switch1 is visible and otherwise aligned with the top of textView1.

How an I achieve this?

Currently textView2 is visible below switch1 if switch1 is visible but otherwise aligned with the bottom of textView1.

Thanks!

CodePudding user response：

You need to use Barrier for such conditions. Try following code.

<TextView
    android:id="@ id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:text="Demo"
    app:layout_constraintEnd_toStartOf="@id/barrier"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.constraintlayout.widget.Barrier
    android:id="@ id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:orientation="vertical"
    app:barrierDirection="left"
    app:constraint_referenced_ids="textView2, switch1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toEndOf="@ id/textView1"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.appcompat.widget.SwitchCompat
    android:id="@ id/switch1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="@id/textView1"
    app:layout_constraintStart_toEndOf="@id/barrier"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@id/textView1" />

<TextView
    android:id="@ id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/app_name"
    android:layout_marginHorizontal="4dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/barrier"
    app:layout_constraintTop_toBottomOf="@id/switch1" />

CodePudding user response：

You can simply make the switch1 visibility to gone in the class instead of making it invisible

         switch1.visibility = VIEW.GONE

and the textview2 will jump and take its place after textview1

Hope this helps!!