RelativeLayout zorder lollipop

Question

I have a little layout working correctly on API 19: 4.2.2 but can't make it work on API 21: 5.0.1.

Here is the layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/start_button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textStyle="bold"
        android:textSize="30sp"
        android:background="@color/start_button_bg"
        android:textColor="@color/start_button_text"
        android:text="@string/start_process"/>

    <TextView
        android:id="@+id/pro_icon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:textColor="@android:color/white"
        android:background="@drawable/pro_icon"
        android:text="PRO"
        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceMedium"/>

</RelativeLayout>

Really simple stuff. I just want the textview to be over the Button in the relative layout. I know relative layout stacks views in the order they are added in the xml, but this seems not to be working the same on lollipop. I can't get the TextView to be rendered over the button. Any idea?

Cheers.

Answer 1

A Button has an elevation on Android 5.0+ by default; a TextView does not. The elevation of a widget will basically override the Z-axis ordering set up by a RelativeLayout or a FrameLayout.

Your options are:

1. Redesign your UI to not have widgets ordered on the Z axis, or

2. Replace the StateListAnimator on your Button to modify or eliminate the elevation animation, or

3. Attempt to change the elevation of the TextView, via android:elevation, to be higher than the Button