CardView not showing Shadow in Android L

Question

My Cardview inside Listview is not showing shadow in Android L(Nexus 5). Also the round edges are not properly shown. Here is the code for Listview's Adapter View :

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res/com.example.myapp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

<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="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardCornerRadius="4dp"
    app:cardElevation="4dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingTop="@dimen/activity_vertical_margin" >

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginTop="@dimen/padding_small"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <ImageView
            android:id="@+id/ivPicture"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tvName"
            android:layout_centerHorizontal="true"
            android:scaleType="fitCenter" />

        <TextView
            android:id="@+id/tvDetail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ivPicture"
            android:layout_centerHorizontal="true"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

And the ListView xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res/com.example.myapp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/app_bg" >

<ListView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:cacheColorHint="#00000000"
    android:divider="@android:color/transparent"
    android:drawSelectorOnTop="true"
    android:smoothScrollbar="true" />

<ProgressBar
    android:id="@+id/progressBarMain"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:visibility="gone" /></RelativeLayout>

It works fine on pre-L devices with proper shadow and rounded corners. But not working aon Android L device. Can you tell what i am missing here?

Check this http://stackoverflow.com/questions/26572048/elevation-on-android-lollipop-not-working — Kiloreux, Dec 22 '14 at 09:14
@AIL But i am not using any transparent background for cardview or any of its parent views — isumit, Dec 22 '14 at 09:20
@greywolf82 in case you have not found a solution yet. I added margin to cardview and its now displaying shadow in Lollipop — isumit, Jan 01 '15 at 11:29

score 311 · Accepted Answer · edited Sep 24 '15 at 21:29

311

After going through the docs again, I finally found the solution.

Just add card_view:cardUseCompatPadding="true" to your CardView and shadows will appear on Lollipop devices.

What happens is, the content area in a CardView take different sizes on pre-lollipop and lollipop devices. So in lollipop devices the shadow is actually covered by the card so its not visible. By adding this attribute the content area remains the same across all devices and the shadow becomes visible.

My xml code is like :

<android.support.v7.widget.CardView
    android:id="@+id/media_card_view"
    android:layout_width="match_parent"
    android:layout_height="130dp"
    card_view:cardBackgroundColor="@android:color/white"
    card_view:cardElevation="2dp"
    card_view:cardUseCompatPadding="true"
    >
...
</android.support.v7.widget.CardView>

edited Sep 24 '15 at 21:29

Alex Lockwood

83,063
39
206
250

answered Jan 12 '15 at 11:13

Ram Patra

16,266
13
66
81

@alex-lockwood Can you please explain your change i.e, `card_view:cardElevation="2sp"` to `card_view:cardElevation="2dp"` ? – Ram Patra Oct 03 '16 at 15:05
1

@Ramswaroop `sp` should only be used for text sizes. `dp` should be used for all other dimensions. – Alex Lockwood Oct 04 '16 at 18:14
I my case card_view:cardUseCompatPadding was needed. Additionally I need to change targetSdkVersion to 21. Changing margin has no effect. – Remi Mar 31 '17 at 09:45
@KishanSolanki124 I think the OP (@isumit) has lost track of this thread. – Ram Patra Jul 21 '19 at 10:01
app:cardBackgroundColor="@android:color/white"... Most important. Add a background color! – Giddy Naya Dec 07 '21 at 20:31

score 61 · Answer 2 · edited Feb 05 '20 at 05:32

61

Do not forget that to draw shadow you must use hardwareAccelerated drawing

hardwareAccelerated = true

hardwareAccelerated = false

See Android Hardware Acceleration for details

edited Feb 05 '20 at 05:32

Sohil R. Memon

9,404
1
31
57

answered Mar 12 '16 at 20:02

AndreyICE

3,574
29
27

13

Hardware acceleration is enabled by default if your Target API level is >=14 ! – Aksel Fatih May 10 '16 at 13:02
2

It's working,. But I don't understand reason behind this – Deepak Kumar Dec 24 '16 at 12:00

score 59 · Answer 3 · edited Apr 18 '16 at 09:10

use app:cardUseCompatPadding="true" inside your cardview. For Example

<android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginRight="@dimen/cardviewMarginRight"
        app:cardBackgroundColor="@color/menudetailsbgcolor"
        app:cardCornerRadius="@dimen/cardCornerRadius"
        app:cardUseCompatPadding="true"
        app:elevation="0dp">
    </android.support.v7.widget.CardView>

score 29 · Answer 4 · answered Mar 06 '17 at 06:59

29

check hardwareAccelerated in manifest make it true , making it false removes shadows , when false shadow appears in xml preview but not in phone .

answered Mar 06 '17 at 06:59

JSONParser

1,112
2
15
30

score 28 · Answer 5 · answered Feb 09 '18 at 18:53

28

Add this line to CardView....

card_view:cardUseCompatPadding="true" //for enable shadow
card_view:cardElevation="9dp" // this for how much shadow you want to show

Tips

You can avoid layout_marginTop and layout_marginBottom as shadow itself takes some space to the up and down of it.The amount space defined by how much you will use in card_view:cardElevation="ndp" .

Happy Coding (:

answered Feb 09 '18 at 18:53

Shahriar Nasim Nafi

1,160
15
19

Or `app:cardElevation`. – CoolMind Jun 08 '22 at 09:44

score 22 · Answer 6 · answered Jan 01 '15 at 11:40

Finally i was able to get shadows on Lollipop device by adding margin to the cardview. Here is the final cardview layout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res/com.example.myapp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

<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="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    android:foreground="?android:attr/selectableItemBackground"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/padding_small"
    android:layout_marginBottom="@dimen/padding_small"
    app:cardCornerRadius="4dp"
    app:cardElevation="4dp" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="@dimen/padding_small"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageView
        android:id="@+id/ivPicture"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvName"
        android:layout_centerHorizontal="true"
        android:scaleType="fitCenter" />

    <TextView
        android:id="@+id/tvDetail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ivPicture"
        android:layout_centerHorizontal="true"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin" />
</RelativeLayout>

I already had the card_view:cardUseCompatPadding values set, still was not able to get the shaddows. What i was missing is this, the margins. And it really worked. Thanks. — Ajith M A, May 14 '16 at 16:55

score 13 · Answer 7 · edited Jul 28 '17 at 08:33

13

You can add this line of code for shadow in card view

card_view:cardElevation="3dp"

Below you have an example

<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="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:cardElevation="3dp"
    card_view:cardCornerRadius="4dp">

Hope this helps!

edited Jul 28 '17 at 08:33

Eliasz Kubala

3,836
1
23
28

answered Dec 26 '14 at 13:17

Ye Min Htut

2,904
15
28

thank you, the key was card_view:cardElevation and not android:cardElevation – fullmoon May 05 '17 at 22:01

score 13 · Answer 8 · answered Mar 08 '17 at 10:12

Simply add this tags:

app:cardElevation="2dp"
app:cardUseCompatPadding="true"

So its become:

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="?colorPrimary"
    app:cardCornerRadius="3dp"
    app:cardElevation="2dp"
    app:cardUseCompatPadding="true"
    app:contentPadding="1dp" />

score 8 · Answer 9 · answered Oct 09 '15 at 17:36

You can try by adding this line

 card_view:cardUseCompatPadding="true"

The Whole code will seems like this

  <android.support.v7.widget.CardView 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="5dp"
        android:orientation="horizontal"
        card_view:cardUseCompatPadding="true"
        card_view:cardCornerRadius="5dp">
 </android.support.v7.widget.CardView

score 7 · Answer 10 · edited Aug 11 '17 at 12:42

In my case the shadow was not showing on Android L devices because I did not add a margin. The problem is that the CardView creates this margin automatically on <5 devices so now I do it like this:

CardView card = new CardView(context);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
        LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
if (Build.VERSION_CODES.LOLLIPOP == Build.VERSION.SDK_INT) {
    params.setMargins(shadowSize, shadowSize, shadowSize,
            shadowSize);
} else {
    card.setMaxCardElevation(shadowSize);
}
card.setCardElevation(shadowSize);
card.setLayoutParams(params);

adding margins to cardview from layout file works. Didn't tried from code — isumit, Jan 01 '15 at 11:34

score 7 · Answer 11 · answered Jan 30 '18 at 06:43

7

Add android:hardwareAccelerated="true" in your manifests file like below it works for me

 <activity
        android:name=".activity.MyCardViewActivity"
        android:hardwareAccelerated="true"></activity>

answered Jan 30 '18 at 06:43

yatin deokar

730
11
20

score 5 · Answer 12 · answered Mar 06 '21 at 17:53

5

In case if you're looking for MaterialCardView shadow (elevation), then add this line of code in the XML and it will show the proper elevation-

app:cardElevation="24dp"
app:cardMaxElevation="36dp"

answered Mar 06 '21 at 17:53

Prateek

502
5
16

score 4 · Answer 13 · answered Mar 03 '15 at 07:21

First of all make sure that following dependencies are proper added and compiled in build.gradle file

    dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'

    }

and after this try the following code :

     <android.support.v7.widget.CardView 
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="5dp"
            android:orientation="horizontal"
            card_view:cardCornerRadius="5dp">
     </android.support.v7.widget.CardView

problem rises in Android L beacuse layout_margin attribute is not added

score 0 · Answer 14 · answered Jul 13 '17 at 02:18

0

My recyclerview was slow in loading so by reading the stackoverflow.com I changed hardwareAccelerated to "false" then the elevation is not showing in the device. The I changed back to true. It works for me.

answered Jul 13 '17 at 02:18

Lathesh

340
1
7

score 0 · Answer 15 · answered Feb 25 '19 at 06:42

Card view can't show shadow because of your RelativeLayout is on the card view's shadow. To show the shadow add margins on your Card view. For example:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="8dp">

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

</RelativeLayout>

score 0 · Answer 16 · answered Mar 21 '19 at 16:07

0

I think if you check your manifest first if you wrote android:hardwareAccelerated="false" you should make it true to having shadow for the card Like this answer here

answered Mar 21 '19 at 16:07

amr ismail

86
1
5

score 0 · Answer 17 · answered Apr 23 '20 at 22:55

0

Check you're not using android:layerType="software" in your RecyclerView.

Changing it to android:layerType="hardware" solved the issue for me.

answered Apr 23 '20 at 22:55

ban-geoengineering

18,324
27
171
253

score 0 · Answer 18 · answered May 11 '21 at 16:52

You can also test by assigning:

android:hardwareAccelerated="false"

in manifest file under application tag.

As sometimes some custom views are not supported assigning value to above statement "true" or "false" can be a solution. For more Information refer to android studio docs

score 0 · Answer 19 · answered Jul 27 '21 at 22:42

0

If you use MaterialCardView the option to go is 'app:cardElevation="8dp' the "8dp" is a referential size

answered Jul 27 '21 at 22:42

Hanako

1,637
1
13
16

score 0 · Answer 20 · answered Jun 08 '22 at 10:04

Insert MaterialCardView into FrameLayout. Add margins for shadow. Add app:cardElevation.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardCornerRadius="12dp"
        app:cardElevation="10dp">

score -1 · Answer 21 · edited May 23 '17 at 12:26

-1

move your "uses-sdk" attribute in top of the manifest like the below answer https://stackoverflow.com/a/27658827/1394139

edited May 23 '17 at 12:26

Community

1
1

answered Dec 27 '14 at 07:11

Dinesh T A

2,087
4
26
34

This sounds radical – Hanako Jul 27 '21 at 22:44

CardView not showing Shadow in Android L

21 Answers21

Linked