z-index in Relative layout

Question

I need to place a TextView above the Button in RelativeLayout. But it is not working: TextView is always under the Button, even if I move it before the button. I also tried bringChildToFront() function to move textview on front, but no luck.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rlBottom"
android:layout_width="fill_parent"
android:layout_height="match_parent">

<Button
    android:id="@+id/bVio"
    android:layout_width="wrap_content"
    android:layout_height="50dip"
    android:layout_alignParentLeft="true"
    android:text="VIO"></Button>

    <TextView
        android:id="@+id/bVio_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/bVio"
        android:layout_marginTop="6dip"
        android:layout_marginRight="6dip"
        android:text="00"
        android:textSize="15dip"
        android:textColor="#FF0000"/>
</RelativeLayout>

Answer 1

I stumbled upon this question a little late, but here’s I how solved it.

The problem occurs on Android with an API level 21 (Lollipop/Android 5.0) and above when you work with items which have an elevation, such as the Button.

When ordering the layout on pre Lollipop devices Android will look to the order of the items in the XML. The further down an item is in the XML the higher up it is in Z-index. So if you place the Button first and the TextField below it, it will work.

However, when deciding the order of the z-index on devices with Android above API 21 the system will also look at the items elevation and render items with a higher elevation value above items with a lower elevation value. So to get your design to work you must make sure that your TextField has a higher elevation than your Button which you can achieve by defining android:elevation on your items. The mock XML below works on devices pre and post API level 21:

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rlBottom"
    android:layout_width="fill_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/bVio"
        android:layout_width="wrap_content"
        android:layout_height="50dip"
        android:layout_alignParentLeft="true"
        android:text="VIO"
        android:elevation="0dp"
        />

    <TextView
        android:id="@+id/bVio_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/bVio"
        android:layout_marginTop="6dip"
        android:layout_marginRight="6dip"
        android:text="00"
        android:textSize="15dip"
        android:textColor="#FF0000"
        android:elevation="10dp"
        />

</RelativeLayout>