Custom Shadow background in Android

Question

I'm trying to create a custom Shadow Drawable, like the picture below

This is not a normal Material Shadow, first it has a bigger radius, and has a halo effect on all sides (top, bottom, right, left).

I've tried Gradient, but it only has a circular radius, which won't work here because this is rectangular.

I even tried making the CardView elevated to like 100 DP, but apparently the elevation has a limit.

I looked online for some solutions, and most were very complicated and limited, while others were about older implementations of shadow (back in Android 4.0)

Any idea how I can achieve a shadow like this? It's created by the designer in Adobe XD.

In my case, it often helped building up a layer-list drawable file. I know, that is it not realtime but with layer-list you can create nice shadows by putting a shadow drawable in background. I am sure that you can create a layer-list drawable also in java, so it is possible to generate it automatically. For creating layer-list: https://stackoverflow.com/questions/38143181/programmatically-create-layer-list — ValiSpaceProgramming, Jan 04 '21 at 12:10
And for creating drawable maybe as a little help: https://stackoverflow.com/questions/28578701/how-to-create-android-shape-background-programmatically — ValiSpaceProgramming, Jan 04 '21 at 12:10
Possible duplicate see this: https://stackoverflow.com/questions/15333529/how-to-provide-shadow-to-button — KyluAce, Jan 04 '21 at 13:08
None of these answers give even a close result to the desired shadow — Ahmad Sattout, Jan 11 '21 at 10:11

score 0 · Answer 1 · answered Jan 04 '21 at 12:19

0

For complex images that should scale according to screen sizes, I would export it as PNG exactly as it looked like in your image and then I would create a resizable bitmap (9-Patch file)

answered Jan 04 '21 at 12:19

F.Mysir

2,838
28
39

9-patch is very old now, I think a Vector Drawable would be much better if it was even possible – Ahmad Sattout Jan 04 '21 at 14:25

score 0 · Answer 2 · answered Aug 18 '23 at 19:12

The way I do it is by creating a ShapeDrawable subclass because I also need to draw custom shapes. Then it is easy to adjust shadows via Paint.SetShadowLayer() before drawing the shape. I write apps in .NET/Xamarin, so the example is in C# but it's similar to Java:

public class CustomShape : ShapeDrawable
{
    readonly Path _path;
    readonly Paint _paint;

    public CustomShape(Color backgroundColor, Color shadowColor, int shadowRadius, int dx, int dy) : base()
    {
        _path = <create the desired shape's path here>
        
        _paint = new Paint(PaintFlags.AntiAlias);
        _paint.Color = backgroundColor;

        _paint.SetShadowLayer(shadowRadius, dx, dy, shadowColor);
    }

    public override void Draw(Canvas canvas)
    {
        canvas.DrawPath(_path, _paint);
    }
}

If you need to update your shape or shadow, use OnBoundsChange(Rect bounds) for that instead of the constructor method.

There is also an easy way to add stroke: just create a separate stroke Paint with _strokePaint.SetStyle(Paint.Style.Stroke), and then call canvas.DrawPath(_path, _strokePaint) in Draw(Canvas canvas) after the background's DrawPath() call.

Custom Shadow background in Android

2 Answers2