When i set visibility of ImageView as GONE the LinearLayout, one of child of it remains, the other gone in android

Question

I created the ListView item as Constraint Layout. It has one ImageView which is constrained to the parent(top and start) and one LinearLayout which is constrained to this ImageView(top to top, start to end, bottom to bottom). In the Java part, I do some logic that in some cases ImageView is GONE and other cases it will be Visible. There isn't any problem with this part. The layout is like that:

And code like that:

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:paddingHorizontal="@dimen/activity_horizontal_margin"
    android:paddingVertical="@dimen/activity_vertical_margin">

    <ImageView
        android:id="@+id/image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:contentDescription="@string/list_image_cd"
        android:src="@drawable/app_logo"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:id="@+id/texts"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:orientation="vertical"
        app:layout_constraintStart_toEndOf="@id/image"
        app:layout_constraintTop_toTopOf="@id/image"
        app:layout_constraintBottom_toBottomOf="@id/image">

        <TextView
            android:id="@+id/miwok_word"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="miwok" />

        <TextView
            android:id="@+id/english_word"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="english" />


    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

I can fix the problem by changing the layout to LinearLayout. But in Constraint Layout when ImageView is GONE one of textview is gone, the other remains. I have read similar to this ConstraintLayout, when constraint dependent view is gone, the layout view behave weirdly . But in my situation why one of the textviews is still remains if this is the child view of linear layout (why all linear layout isn't gone?).

Layout in the app (I change english text into phrases, but miwok isn't seen):

Now I find bug. After removing top and bottom constraints of linear layout, it worked. I think when ImageView is Gone LinearLayout is a little bit go above, so above textview isn't seen in layout. But I can't still get idea clearly — Ferhad Mehdizade, Sep 13 '20 at 19:21

Cheticamp · Accepted Answer · 2020-09-14T11:06:52.023

Because the LinearLayout has its top and bottom constraints set to the ImageView, it will be centered vertically on the ImageView. See the documentation that addresses this. "Vertically centered" means that the vertical center of the LinearLayout and the ImageView will be at the same y position.

Now, when the ImageView is set to GONE, the ImageView is reduced to a virtual point. Since it is constrained to the start and top of the parent, the "gone" view will now be a point at the screen's origin (0,0). The LinearLayout remains constrained to the top and bottom of the ImageView as before, so it is still centered on the ImageView. But, since the ImageView is now a point at the origin, and its centered has shifted, the LinearLayout must shift up to keep centered on the ImageView. As a result, the top TextView leaves the top of the screen and can no longer be seen.

How you would fix this depends on what you are trying to do.

score 1 · Answer 2 · answered Sep 14 '20 at 04:50

As your LinearLayout top and bottom constraint is given to imageview and when it's gone it's height become less and because of that top textview is not visible.

@Cheticamp give more information in his answer.

You can change your constraint like below and it will work as you want. Change Imageview top and bottom constraint to LinearLayout top and bottom.

    <?xml version="1.0" encoding="utf-8"?><?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"
    android:padding="10dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@+id/texts"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/texts" />

    <LinearLayout
        android:id="@+id/texts"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:orientation="vertical"
        app:layout_constraintStart_toEndOf="@+id/image"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/miwok_word"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="miwok" />

        <TextView
            android:id="@+id/english_word"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="english" />
        
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

When i set visibility of ImageView as GONE the LinearLayout, one of child of it remains, the other gone in android

2 Answers2