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

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>

Answer 2

Take RelativeLayout as your button by changing its background and set TextView as centerInParent="True"

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

    <TextView
        android:id="@+id/bVio_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="I am khan "
        android:textColor="#FF0000"
        android:textSize="35dip" />

</RelativeLayout>

Class

(RelativeLayout)findViewById(R.id.rlBottom).setOnClick(new OnClick... //like a button

Answer 3

add this code, it will solve your problem.

android:stateListAnimator="@null" 

reference this answer

Buttons in Lollipop and higher have a default elevation to them which causes them to always draw on top. You can change this by overriding the default StateListAnimator.

Try putting this into your button XML:

android:stateListAnimator="@null"

The FrameLayout should now cover the button.

Answer 4

You can't use a LinearLayout for this, but you can use a FrameLayout. In a FrameLayout, the z-index is defined by the order in which the items are added, for example:

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_drawable"
    android:scaleType="fitCenter"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center"
    android:padding="5dp"
    android:text="My Label"
    />

In this instance, the TextView would be drawn on top of the ImageView, along the bottom center of the image.

Answer 5

Place the TextView first than apply layout_below for button:

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

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

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

</RelativeLayout>