Cardview doesn't respect z index order in relative layout

Question

i have a relative layout with two views inside, a CardView and a ImageButton, i need to place the IB above the cardview, but the cardview doesn't respect the z index order. If i replace the cardview with a LinearLayout, it seems to be Ok, so i guess the problem is with the cardview itself.

Here is my code:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:background="@drawable/icons_bg_whited"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.noname.classmates.Activity.Register"
tools:ignore="MergeRootFrame"
android:padding="27dip">

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardCornerRadius="10dp"
    android:layout_marginTop="38dip">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/container"/>
</android.support.v7.widget.CardView>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn_upload_pic"
    android:layout_centerHorizontal="true"
    android:src="@drawable/upload_profile_pic"
    android:contentDescription="@string/upload_profile_picture"
    android:background="@android:color/transparent" /> </RelativeLayout>

Answer 1

Yea, the issue is with the CardView which has a default elevation making it appear over any other view irrespective of ordering.

To make it normal, I ended up wrapping the CardView inside a LinearLayout.

So earlier, it was like

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardCornerRadius="10dp"
    android:layout_marginTop="38dip">

</RelativeLayout>

And then I changed it to,

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="38dip">

  <android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardCornerRadius="10dp">
    .
    .
    .
  </CardView>
 </LinearLayout>
</RelativeLayout>

Although I don't know the exact reason why this works but works as expected.

Answer 2

On Android L, CardView has an elevation set, which will make it appear above other views, regardless of their order in the layout. You'll need to either set an elevation on the button, or better, put the button inside the CardView.