Android Drop Shadow on View

Question

I have done some extensive searching for code examples on this but cannot find anything.

In particular, I am looking to add a shadow to a png drawable I am using in an ImageView. This png drawable is a rounded rect with transparent corners.

Can somebody please provide a code example of how to add a decent drop shadow to a view either in code or XML?

Solution 1

You could use a combination of Bitmap.extractAlpha and a BlurMaskFilter to manually create a drop shadow for any image you need to display, but that would only work if your image is only loaded/displayed once in a while, since the process is expensive.

Pseudo-code (might even compile!):

BlurMaskFilter blurFilter = new BlurMaskFilter(5, BlurMaskFilter.Blur.OUTER);
Paint shadowPaint = new Paint();
shadowPaint.setMaskFilter(blurFilter);

int[] offsetXY = new int[2];
Bitmap shadowImage = originalBitmap.extractAlpha(shadowPaint, offsetXY);

/* Might need to convert shadowImage from 8-bit to ARGB here, can't remember. */

Canvas c = new Canvas(shadowImage);
c.drawBitmap(originalBitmap, offsetXY[0], offsetXY[1], null);

Then put shadowImage into your ImageView. If this image never changes but is display a lot, you could create it and cache it in onCreate to bypass the expensive image processing.

Even if that doesn't work as is, it should be enough to get you going in the right direction.

Solution 2

For Drop shadow use below code

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <gradient
    android:startColor="#ffffff"
    android:centerColor="#d3d7cf"
    android:endColor="#2e3436"
    android:angle="90" />
</shape>

Use above drawable for a background of a view

<View 
    android:id="@+id/divider" 
    android:background="@drawable/black_white_gradient"
    android:layout_width="match_parent" 
    android:layout_height="10sp"
    android:layout_below="@+id/buildingsList"/>

Solution 3

This helped me to get the shadow working so I wanted to share the working code:

private Bitmap createShadowBitmap(Bitmap originalBitmap) {
    BlurMaskFilter blurFilter = new BlurMaskFilter(5, BlurMaskFilter.Blur.OUTER);
    Paint shadowPaint = new Paint();
    shadowPaint.setMaskFilter(blurFilter);

    int[] offsetXY = new int[2];
    Bitmap shadowImage = originalBitmap.extractAlpha(shadowPaint, offsetXY);

    /* Need to convert shadowImage from 8-bit to ARGB here. */
    Bitmap shadowImage32 = shadowImage.copy(Bitmap.Config.ARGB_8888, true);
    Canvas c = new Canvas(shadowImage32);
    c.drawBitmap(originalBitmap, -offsetXY[0], -offsetXY[1], null);

    return shadowImage32;
}

Solution 4

For API 21(5.0)+ add android:elevation="4dp" or android:translationZ="4dp" to view description. Documentation

Solution 5

Always use Transparent shadow such that they could stick to any color.

shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <gradient
    android:startColor="#002e3436"
    android:endColor="#992e3436"
    android:angle="90" />
</shape>

And in View

<View 
    android:id="@+id/divider" 
    android:background="@drawable/shadow"
    android:layout_width="match_parent" 
    android:layout_height="5dp"/>

View more solutions