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>

I am facing an issue related to this. If I am changing cardView's background inside `onBindViewHolder()`, its shadow doesn't show. — MSS, Nov 04 '17 at 12:14
Add this to your CardView in xml. app:cardElevation="2dp". Change 2dp to whatever you want. — Aishwarya Tiwari, Jan 29 '18 at 18:23

score 16 · Answer 1 · answered Aug 05 '17 at 09:34

16

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>

answered Aug 05 '17 at 09:34

Harshad Pansuriya

20,189
8
67
95

app:cardUseCompatPadding="true", this line solved my problem – Umasankar Jan 10 '19 at 09:31

score 4 · Answer 2 · answered Jun 15 '18 at 08:32

4

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

app:cardUseCompatPadding="true"

answered Jun 15 '18 at 08:32

Tobibur Rahman

161
8

Parth Munjpara · Answer 3 · 2017-08-05T12:57:12.453

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>

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. — Coolio Cena, Aug 05 '17 at 11:54
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. — Parth Munjpara, Aug 05 '17 at 12:52

score 0 · Answer 4 · edited Aug 05 '17 at 09:30

0

Add this line to your CardView xml tag;

android:layout_margin="10dp"

edited Aug 05 '17 at 09:30

AskNilesh

67,701
16
123
163

answered Aug 05 '17 at 09:17

Vishal Vaishnav

3,346
3
26
57

remove this 2 lines from your xml and run.... card_view:cardUseCompatPadding="true" app:cardMaxElevation="6dp" – Vishal Vaishnav Aug 05 '17 at 09:20
Still no effect. – Coolio Cena Aug 05 '17 at 09:22
Remove FrameLayout from your RecyclerView list item – Vishal Vaishnav Aug 05 '17 at 09:24

score 0 · Answer 5 · answered Jan 02 '20 at 00:48

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

score 0 · Answer 6 · answered Feb 05 '20 at 13:21

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>

CardView elevation not working with RecyclerView

6 Answers6