CardView goes on top of FrameLayout, but declared first

Question

I have simple FrameLayout with support CardView as first item, and TextView as second, so TextView must be on top of inflated view. This works on pre-Lolipop but on 21+ card takes toppest place in layout, why that's so and how to fix this? Same thing with RelativeLayout. Layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="20dp"
        app:cardBackgroundColor="#ff0000"
        app:cardUseCompatPadding="false"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="i am top view!"
        android:gravity="center"
        android:layout_gravity="center"
        android:textSize="30sp"
        android:textAllCaps="true"
        android:textColor="#00ff00"
        android:background="#0000ff"
        />

</FrameLayout>

Just add your text view inside the card view,maps far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last. This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop. — JohanShogun, Jul 25 '15 at 17:57
In fact I need card only for background and nice corners with shadow. Also there is RecyclerView on top of card with other cards, their corners must overlap main card. I found the way to fix it in 21+. — Konstantin Berkov, Jul 25 '15 at 18:02

score 57 · Answer 1 · answered Apr 05 '16 at 13:16

In case someone gets here and the solution for setting elevation doesn't work for them (like in my case, where I needed to draw an image above the CardView and having a shadow on it was not acceptable), you can solve the issue by wrapping the CardView inside another FrameLayout. In the example provided, it would look something like this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- This is the added FrameLayout -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="20dp"
            app:cardBackgroundColor="#ff0000"
            app:cardUseCompatPadding="false"
            />

    </FrameLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="i am top view!"
        android:gravity="center"
        android:layout_gravity="center"
        android:textSize="30sp"
        android:textAllCaps="true"
        android:textColor="#00ff00"
        android:background="#0000ff"
        />

</FrameLayout>

Oh my gosh, you just saved me after hours of searching! cheers dude! — romaneso, May 29 '18 at 10:46

score 23 · Answer 2 · answered May 24 '18 at 15:18

23

I might be joining the discussion a bit late, but if you can afford giving up the CardView's elevation, you can just set the cardElevation property of the CardView in your XML layout to 0dp.

Like so:

app:cardElevation="0dp"

answered May 24 '18 at 15:18

Itamar

1,290
1
18
29

score 18 · Accepted Answer · answered Jul 25 '15 at 18:00

18

Just add your text view inside the card view, far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last.

This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop.

answered Jul 25 '15 at 18:00

JohanShogun

2,956
21
30

3

Yeah you are right, setting elevation for the TextView solves the problem on 21+. – Konstantin Berkov Jul 25 '15 at 18:03
Any issue remaining? Seems you got it working with both pre lollipop and lollipop? :) – JohanShogun Jul 25 '15 at 18:05
I had my cardview set an elevation of 4dp. And my frame layout with matchparent was going below the cardview. Set the elevation of framelayout as 5dp and its done. No issues so far. – Ajith M A May 15 '16 at 12:20

score 12 · Answer 4 · answered Nov 26 '17 at 15:23

This worked for me!

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Add this layout as parent of CardView -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="20dp"
            app:cardBackgroundColor="#ff0000"
            app:cardUseCompatPadding="false" />

    </LinearLayout>
    <!--Close parent layout-->

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="#0000ff"
        android:gravity="center"
        android:text="i am top view!"
        android:textAllCaps="true"
        android:textColor="#00ff00"
        android:textSize="30sp" />

</FrameLayout>

CardView goes on top of FrameLayout, but declared first

4 Answers4

This worked for me!