Question Detail

How to set CardView Shadow and its customize shadow color??

6 years ago Views 29504 Visit Post Reply

I am using android.support.v7.widget.CardView. I want to add shadow for my CardView Please help how can i do this? card has default gray shadow how can change its color?


Thread Reply

Anonymous

- 6 years ago

There's no way to change shadow color and angle in the official Android framework. The color is always black and the angle is generated automatically using view's position. Moreover, on older platforms CardView's shadow is a completly different thing than on Lollipop, so the angle won't work at all.

For colored shadows you can use a library called Carbon. See this answer: Android change Material elevation shadow color

Correct Answer

Nick Johnson

- 6 years ago

No, the color of the shadow provided by the framework cannot be changed.

if you need colored shadows, it's possible to get them using Carbon. It's a kind-of support library for Material Design and in the most recent version, there is an option to change shadow color. There's a ton of nice designs on Behance featuring colored shadows and I thought it would be nice to have them despite lack of such feature in Android. It's important to note that colored shadows are emulated on all Android versions, on 5.0+ too.

https://github.com/ZieIony/Carbon

enter image description here

Naera

- 5 years ago

You can use shadow drawable xml to set CardView Shadow and its customize shadow color.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />

            <solid android:color="#00cccccc" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />

            <solid android:color="#05cccccc" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />

            <solid android:color="#0acccccc" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />

            <solid android:color="#0fcccccc" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />

            <solid android:color="#14cccccc" />

            <corners android:radius="5dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="#b2f7f7f7" />
            <stroke
                android:color="#681b98e6"
                android:width="1dp"/>

            <corners android:radius="5dp" />
        </shape>
    </item>

</layer-list>

Anonymous

- 5 years ago

app:cardElevation="55dp"