Android Activity Layout-Problem on only 1 of 15 test-devices (ImageView)

Question

I'm testing a new activity in our Android app. On all but one devices, everything was fine - except for a Huawei P30 Pro.

The activity is quite simple: it shows an ImageView and a small menu-bar on the bottom. Before the image is set, a ProgressBar (spinning circle) gets shown.

On the Huawei P30 Pro, everything seems to work fine (the ProgressBar appears, the circle is spinning, the ProgressBar disappears), but no Image becomes visible. If you forward the image by pressing the Apply-button in the menuBar, the image gets correctly forwarded, so it actually is available, it just doesn't get shown within the activity.

We tested the same version of the app on several other devices (including Huawei P10, P20, several Samsung-phones and HTC) and everything was ok. But on both Huawei P30 Pro we had available, the same problem appeared.

The layout-code is pretty straightforward:

<LinearLayout 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="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical"
              android:layout_weight="10">

    <LinearLayout
            android:layout_height="0dp"
            android:layout_width="fill_parent"
            android:layout_weight="9"
            android:orientation="vertical">

        <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            <ImageView
                    android:id="@+id/imageView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    tools:srcCompat="@tools:sample/avatars"
                    android:contentDescription="Image preview"/>

            <ProgressBar
                    android:id="@+id/indeterminateBar"
                    android:indeterminate="true"
                    android:minWidth="100dp"
                    android:minHeight="100dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerInParent="true"
                    />
        </RelativeLayout>

    </LinearLayout
            android:layout_height="0dp">

    <LinearLayout
            android:layout_height="0dp"
            android:layout_width="fill_parent"
            android:layout_weight="1">
    <!-- bottom menu-bar-code is here as a TableLayout, which works fine on all devices -->
    </LinearLayout>
</LinearLayout>

Maybe the ImageView has a height of 0 so it isn't visible? I'm puzzled about what it could be, since it's only that particular device...

I checked if the ImageView-drawable does properly get set (imageView.getDrawable() != null) and it looks like it does (it is not null), as well as the visibility-state, which also seems to be fine. So at this point, I think it is a pure layout-problem.

Answer 1

I highly recommend to switch from LinearLayout to ConstraintLayout. Even though your current layout works on 14 of 15 devices, the height of the bottom menu is always 10% and this will not look good on devices with small heights (have you ever tried your layout in landscape? You will see what I mean).

Once switched to ConstraintLayout, your layout issue on the 15th device should also disappear.

I transformed your layout to use ConstraintLayout to show how it could look like. It also has less layouts inside.

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:contentDescription="Image preview"
        app:layout_constraintBottom_toTopOf="@id/bottomMenuBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <ProgressBar
        android:id="@+id/indeterminateBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:minWidth="100dp"
        android:minHeight="100dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomMenuBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:id="@+id/bottomMenuBar"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">
        <!-- bottom menu-bar-code is here as a TableLayout, which works fine on all devices -->
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Please be aware that for visibility reasons in the layout preview I have added a fixed height for the LinearLayout of the bottom menu. Once you have understood the ConstraintLayout you should also change it for the menu bar. I kept it as a LinearLayout for easier usage with your real layout code.