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>

Solution 1

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.

Solution 2

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>

Solution 3

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"

Solution 4

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>

View more solutions

Comments

[Konstantin Berkov]

Yeah you are right, setting elevation for the TextView solves the problem on 21+.

[JohanShogun]

Any issue remaining? Seems you got it working with both pre lollipop and lollipop? :)

[Ajith M A]

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.

[romaneso]

Oh my gosh, you just saved me after hours of searching! cheers dude!