Question Detail

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

6 years ago Views 30868 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

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

- 6 years ago

app:cardElevation="55dp"

Hemant Sharma

- 4 months ago

CardView is a popular component in Android UI design, providing a simple and effective way to display information in a card-like format.
With the introduction of API 28, Android developers gained more control over the appearance of CardView shadows by utilizing attributes such as outlineAmbientShadowColor, outlineSpotShadowColor, spotShadowAlpha, and ambientShadowAlpha.

Let's Understand, how to use CardView attributes to enhance the visual appeal of Android CardView Shadow.

API Level Consideration: it's important to note that the attributes mentioned above are available from API level 28 and onwards. Therefore, if your app targets devices with lower API levels, consider using alternative methods or providing fallbacks for compatibility.

CardView Attributes:

  1. outlineAmbientShadowColor: This attribute allows you to set the color of the ambient shadow cast by the CardView.

  2. outlineSpotShadowColor: Similar to outlineAmbientShadowColor, this attribute lets you define the color of the spot shadow cast by the CardView.

  3. spotShadowAlpha: This attribute controls the transparency of the spot shadow. You can adjust the alpha value to achieve the desired level of transparency.

  4. ambientShadowAlpha: Like spotShadowAlpha, this attribute regulates the transparency of the ambient shadow.

Example Android CardView Shadow in Java:

// Assuming you have a CardView instance named 'cardView' if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) { cardView.setOutlineAmbientShadowColor(Color.BLUE); // Set ambient shadow color cardView.setOutlineSpotShadowColor(Color.RED); // Set spot shadow color cardView.setSpotShadowAlpha(0.8f); // Set spot shadow alpha cardView.setAmbientShadowAlpha(0.6f); // Set ambient shadow alpha }

Example Android CardView Shadow in Kotlin:

// Assuming you have a CardView instance named 'cardView' if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) { cardView.outlineAmbientShadowColor = Color.BLUE // Set ambient shadow color cardView.outlineSpotShadowColor = Color.RED // Set spot shadow color cardView.spotShadowAlpha = 0.8f // Set spot shadow alpha cardView.ambientShadowAlpha = 0.6f // Set ambient shadow alpha } 

Utilizing the outlineAmbientShadowColor, outlineSpotShadowColor, spotShadowAlpha, and ambientShadowAlpha attributes in CardView provide Android developers with greater control over the View shadow appearance, resulting in a more visually appealing user interface. However, it's crucial to be mindful of the API level requirements to ensure compatibility with a broader range of Android devices.