CardView not showing Shadow in Android L

129
votes

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?

19
androidandroid-listviewandroid-5.0-lollipopmaterial-designandroid-cardview
Check this stackoverflow.com/questions/26572048/… – Kiloreux
@AIL But i am not using any transparent background for cardview or any of its parent views – isumit
@isumit Yep, same problem here. – greywolf82
@greywolf82 in case you have not found a solution yet. I added margin to cardview and its now displaying shadow in Lollipop – isumit

19 Answers

294
votes

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>
57
votes

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

hardwareAccelerated = true

enter image description here

hardwareAccelerated = false

hardwareAccelerated CardView

See Android Hardware Acceleration for details

56
votes

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>
29
votes

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

27
votes

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 (:

22
votes

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>

13
votes

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" />
13
votes

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!

8
votes

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
7
votes

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);
6
votes

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

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

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

3
votes

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"
0
votes

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.

0
votes

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>
0
votes

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

0
votes

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

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

0
votes

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

-1
votes

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