Android 5.0 - ProgressBar cannot be displayed over a Button

Question

I think the title is pretty explicit about my problem... So here is my layout :

Answer 1

Same question being asked here, with a better explanation of the issue:

https://stackoverflow.com/a/27216368/235910

To quote @CommonsWare:

The problem appears Android 5.0's elevation property. Apparently, the RelativeLayout Z-axis ordering is tied into elevation. If both widgets have the same elevation, the RelativeLayout will determine the Z-axis order -- you can see that if you were to switch your layout to be both Button widgets, for example. However, if one widget (Button) has an elevation, and another widget (ImageView) does not, the elevation will take precedence.

You can remove the Button elevation via android:stateListAnimator="@null" or by defining your own custom animator. Or, you can add some elevation to your ImageView to get it to be higher on the Z axis than is the Button.

Answer 2

It is better to set android:translationZ more than 2dp. Your view/widget will disappear when you press the button. I explained the reason here.

<!-- Elevation when button is pressed -->
<dimen name="button_elevation_material">1dp</dimen>
<!-- Z translation to apply when button is pressed -->
<dimen name="button_pressed_z_material">2dp</dimen>

Button have these two values and defined in the framework.

Answer 3

If you add 'androidx.core:core' to your build.gradle, you can use this code for API < 21:

ViewCompat.setTranslationZ(viewToElevate, 5);

Answer 4

Probably the simplest way is to use the FrameLayout since it was created to make layouts whose child views are ordered by z-index:

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

            <Button
                android:id="@+id/button_action"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Login" />

            <ProgressBar
                android:id="@+id/progress_bar"
                android:layout_width="50dp"
                android:layout_height="50dp" />
    </FrameLayout>

I'm not sure what does your layout look like, so maybe you'll need to play with android:layout_gravity.

Answer 5

Same issue here, my simple "hack" was too wrap the Button into another FrameLayout. This way I don't care about the api version and other elevation issue ;)

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" >

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
                <Button
                    android:id="@+id/button_action"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Login" />
        </FrameLayout>

        <ProgressBar
            android:id="@+id/progress_bar"
            android:layout_width="50dp"
            android:layout_height="50dp" />
</FrameLayout>

Answer 6

You can add the android:translationZ attribute to the ProgressBar:

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:translationZ="2dp"
    android:layout_centerInParent="true"/>