Search code examples
androidtransparencyshadow

Android transparency and Shadows

I have a card view with a transparent background color and an elevation of 4dp.

It seems that there's no way to block the shadow from being visible inside the transparent card. I keep getting a weird outline which must be the shadow drawn underneath.

Is there any way (that works on API 21 and above) to only draw the shadow outside of my card so I can use transparent colors without artifacts?

card view STYLE xml

<style name="GridCard" parent="CardView">
        <item name="cardCornerRadius">4dp</item>
        <item name="cardElevation">4dp</item>
        <item name="cardUseCompatPadding">true</item>
        <item name="android:layout_marginLeft">8dp</item>
        <item name="android:layout_marginRight">8dp</item>
        <item name="android:layout_marginTop">16dp</item>
        <item name="cardBackgroundColor">@color/white_70</item>
</style>

white_70 is #50FFFFFF

here's what it looks like (weird border caused by the shadow):

here's what it looks like. weird border caused by the shadow

Solution

  • Just use cardUseCompatPadding as false to remove inner padding and shadow.

    Try this style:

    <style name="GridCard" parent="CardView">
    <item name="cardCornerRadius">4dp</item>
    <item name="cardElevation">4dp</item>
    <item name="cardUseCompatPadding">false</item>
    <item name="android:layout_marginLeft">8dp</item>
    <item name="android:layout_marginRight">8dp</item>
    <item name="android:layout_marginTop">16dp</item>
    <item name="cardBackgroundColor">@color/white_70</item>
</style>