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 :

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

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

            </RelativeLayout>

On android SDKs < 21, no problem, the ProgressBar is correctly displayed over the Button and centered in the Button. But on Android 5.0, the ProgressBar is displayed behind the Button.

So you can see it's correctly positionned it when you activate the option "Show layout bounds" in Developer Options settings, but you can't see anything on the screen without that option.

Would anybody know how to fix this? I guess it's a matter of elevation recently introduced, but I really don't know how to take care of it. For the record, I'm using the recently released Theme.AppCompat style from the support.v7.

EDIT:

I also tried to apply setElevation(0) and setTranslationY(0) to the Button programmatically but it didn't change anything. So I wonder if it has to deal with the elevation.

Thanks in advance guys

Mathieu

Answer 1

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