How to handle the following case for ConstraintLayout, when one of the targets of layout_constraint visibility changed to View.GONE

Question

I want to avoid nested layout, to improve my app performance.

Hence, I tried the following

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_margin="30dp"
    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=".MainActivity">

    <TextView
        android:id="@+id/title_text_view"
        android:background="#ffd600"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Title\nTitle"
        app:layout_constraintEnd_toStartOf="@+id/pin_text_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/pin_text_view"
        android:background="#ff0000"
        android:textColor="#ffffff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Pin" />

    <TextView
        android:id="@+id/body_text_view"
        android:background="#304ffe"
        android:textColor="#ffffff"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@+id/title_text_view"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="Body" />

</android.support.constraint.ConstraintLayout>

The output is as follow.

During runtime, I might change the visibility of title_text_view (yellow) to View.GONE.

But, it will looks like the follow. I don't wish pin_text_view (red) to be covered up by body_text_view (blue)

What I wish to have is

One of the way to overcome, is after changing the visibility of title_text_view (yellow) to View.GONE, I need use Java code to manual update app:layout_constraintTop_toBottomOf of body_text_view (blue) - Android : How to programatically set layout_constraintRight_toRightOf "parent"

From

<TextView
    android:id="@+id/body_text_view"
    ...
    app:layout_constraintTop_toBottomOf="@+id/title_text_view"

to

<TextView
    android:id="@+id/body_text_view"
    ...
    app:layout_constraintTop_toBottomOf="@+id/pin_text_view"

But, this will make my code more difficult to be maintained.

Is there any easier way, without involving Java code, and without nested layout?

ok it can be done but the problem is you will have to keep the pin view align bottom to yellow textview that's because if you set visibility to gone and after setting visible again it will mix with your yellow layout. — Umair, Apr 30 '18 at 07:01

Locdoc01 · Answer 1 · 2018-04-30T07:06:46.300

You can use a barrier, which is available in ConstraintLayout since version 1.1

So if you are using an older version of ConstraintLayout, change the dependency for ConstraintLayout in your build.gradle to

implementation 'com.android.support.constraint:constraint-layout:1.1.0'

or a later version.

Then add the barrier to your layout like following:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_margin="30dp"
    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=".MainActivity">

    <TextView
        android:id="@+id/title_text_view"
        android:background="#ffd600"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Title\nTitle"
        app:layout_constraintEnd_toStartOf="@+id/pin_text_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/pin_text_view"
        android:background="#ff0000"
        android:textColor="#ffffff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Pin" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="title_text_view,pin_text_view" />

    <TextView
        android:id="@+id/body_text_view"
        android:background="#304ffe"
        android:textColor="#ffffff"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@+id/barrier"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="Body" />

</android.support.constraint.ConstraintLayout>

For further information see this link

No need to use `1.1.0-beta1` as long as there is release `1.1.0`. — azizbekian, Apr 30 '18 at 07:05

Umair · Answer 2 · 2018-04-30T07:31:26.787

you can get closest to your requirement using below code without adding any extra code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="30dp"
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=".MainActivity">

<TextView
    android:id="@+id/title_text_view"
    android:background="#ffd600"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Title\nTitle"
    android:visibility="visible"
    app:layout_constraintEnd_toStartOf="@+id/pin_text_view"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/pin_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:background="#ff0000"
    android:text="Pin"
    android:textColor="#ffffff"
    app:layout_constraintEnd_toEndOf="@+id/body_text_view" />

<TextView
    android:id="@+id/body_text_view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#304ffe"
    android:text="Body"
    android:textColor="#ffffff"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/pin_text_view" />

OR if you want to do some extra xml code you can do something like this using guidelines feature in constraintLayout:

<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"
android:layout_margin="30dp">

<TextView
    android:id="@+id/title_text_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:background="#ffd600"
    android:padding="5dp"
    android:text="Title\nTitle"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toStartOf="@+id/pin_text_view"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.09" />

<TextView
    android:id="@+id/pin_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:background="#ff0000"
    android:text="Pin"
    android:textColor="#ffffff"
    app:layout_constraintEnd_toEndOf="@+id/body_text_view" />

<TextView
    android:id="@+id/body_text_view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#304ffe"
    android:text="Body"
    android:textColor="#ffffff"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline" />

   </android.support.constraint.ConstraintLayout>

How to handle the following case for ConstraintLayout, when one of the targets of layout_constraint visibility changed to View.GONE

2 Answers2