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>

score 20 · Accepted Answer · answered Jul 30 '14 at 20:41

20

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.

answered Jul 30 '14 at 20:41

Roman Nurik

29,665
7
84
82

Another question, can i set elevation without getting the shadow? – Edgar Jul 30 '14 at 22:28
Customize View Shadows and Outlines https://developer.android.com/training/material/shadows-clipping.html#Shadows – Hartok Feb 20 '15 at 15:51
Seemed like the right idea. HOWEVER, elevating every other possible view above the cardView does not work at all... My DrawerLayout still shows up below the CardViews. – Radu Apr 30 '15 at 18:06

score 3 · Answer 2 · answered Jul 23 '20 at 05:45

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.

Cardview doesn't respect z index order in relative layout

2 Answers2