CardView elevation not working with RecyclerView

Question

CardView elevation works fine when tested in a separate application, but when the same code for the cardView is used to craft items of a RecyclerView, the elevation no longer appears.

Here is the code for the RecyclerView list item:

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


<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    card_view:cardUseCompatPadding="true"
    app:cardMaxElevation="6dp"
    card_view:cardCornerRadius="3dp"
    card_view:cardElevation="24dp">

    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/thumbnail"
            android:layout_width="match_parent"
            android:layout_height="250dp" />

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/thumbnail"
            />
    </LinearLayout>


</android.support.v7.widget.CardView>

And here is my main activity xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                   xmlns:tools="http://schemas.android.com/tools"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:orientation="vertical"
                   android:background="@drawable/bitmap"
                   android:layerType="software"
                   android:padding="10dp"
    tools:context="com.example.android.vikramadityastimeline.MainActivity">

<android.support.v7.widget.RecyclerView
    android:id="@+id/card_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    />



 </FrameLayout>

Cyrilcyrill

What is it look like now? Can you share screenshot? – Nostril

You should set padding for FrameLayout... – Planchet

tried..didn't work – Cyrilcyrill

I am facing an issue related to this. If I am changing cardView's background inside onBindViewHolder(), its shadow doesn't show. – Apterous

Add this to your CardView in xml. app:cardElevation="2dp". Change 2dp to whatever you want. – Gravelly

Answer 1

To Support it, you need to specify app:cardUseCompatPadding="true" in your support CardView.

<android.support.v7.widget.CardView
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true"
        app:cardMaxElevation="6dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
</android.support.v7.widget.CardView>

Essay

app:cardUseCompatPadding="true", this line solved my problem – Slicer

Answer 2

Use this in your card view. It solved my same problem.

app:cardUseCompatPadding="true"

Gasoline

Answer 3

In your code you used frame layout in recycler view item and inside that you have cardview. You gives margin as 10dp to frame layout but my suggestion to you is that remove that line and add margin to the card view. In recycler view there are no space between items so shadow of your cardview may be hidden because your outer frame layout completes there so try by cahnging your code like this :

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


<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    app:cardUseCompatPadding="true"
    app:cardMaxElevation="6dp"
    android:layout_marginBottom="10dp"
    app:cardCornerRadius="3dp"
    app:cardElevation="24dp">

    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/thumbnail"
            android:layout_width="match_parent"
            android:layout_height="250dp" />

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/thumbnail"
            />
    </LinearLayout>


</android.support.v7.widget.CardView> 
</FrameLayout>

Motherly

Tried it, Still not working , and also elevation property does not work for any other element also like a textView or floating button in my app. However for an another sample app that i created to test this, elevation was working fine. And also the xml preview shows that elevation has been added, but not when i run it on the device. – Cyrilcyrill

okay.. Now try with replacing all card_view:... to app:... and check it in your code where at run time it does not showing elevation it will be helpful. – Motherly

Answer 4

Add this line to your CardView xml tag;

android:layout_margin="10dp"

Mcquoid

remove this 2 lines from your xml and run.... card_view:cardUseCompatPadding="true" app:cardMaxElevation="6dp" – Mcquoid

Still no effect. – Cyrilcyrill

Remove FrameLayout from your RecyclerView list item – Mcquoid

Answer 5

I just had the same problem and the solution I found was to add the next tag in the AndroidManifest:

android:hardwareAccelerated="true"

Example:

<application
        android:allowBackup="true"
        android:hardwareAccelerated="true"
        android:icon="@mipmap/ic_launcher"
        android:theme="@style/AppTheme">

Documentation:

https://developer.android.com/guide/topics/graphics/hardware-accel

Parsifal

Answer 6

This is the xml sample code for the screenshot below:

<androidx.cardview.widget.CardView 
    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"
    app:cardCornerRadius="10dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true"
    app:contentPadding="10dp"
    app:contentPaddingBottom="0dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="5dp">

        <TextView
            android:id="@+id/name_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Name" />
        <TextView
            android:id="@+id/sim_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SIM" />
        <TextView
            android:id="@+id/ID_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="ID" />
        <TextView
            android:id="@+id/model_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="model" />
    </LinearLayout>

</androidx.cardview.widget.CardView>

Loanloanda