Android 5.0 – ProgressBar cannot be displayed over a Button

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

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>

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.

Leave a Comment