Search code examples
androidandroid-layoutandroid-linearlayoutandroid-constraintlayout

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


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: enter image description here

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): enter image description here


Solution

  • 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.