Using android:elevation makes a TextView disappear

Question

I have this RelativeLayout with only two views. Please see below what I have tried:

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1">

    <ImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:id="@+id/image_view"
        android:layout_centerInParent="true"
        android:background="@drawable/border"
        android:elevation="4dp"/> //Below TextView disappear

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="-48dp"
        android:layout_below="@+id/image_view"/>
</RelativeLayout>

The TextView has set a negative layout_marginTop so it can be displayed over the image. Everything works fine till I set the elevation property. Once I set it, the below TextView disappears. How to stop this from happening?

Answer 1

Solution: Add android:elevation="5dp" into the TextView in your layout file.

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1">

    <ImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:id="@+id/image_view"
        android:layout_centerInParent="true"
        android:background="@drawable/border"
        android:elevation="4dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="-48dp"
        android:layout_below="@+id/image_view"
        android:elevation="5dp"/> // Add this line
</RelativeLayout>

You can follow this link to see how android:elevation work in Android.