I'm trying to develop a small custom view for my personal project. I'm facing a small trouble as to how to provide elevation effect or drop shadow effect for the view that I created.
It is a rectangle with concave semi circles on the left and right edge. I'm able to provide shadow for the whole rectangle but not for the concave semi circles and this is my problem.
This is the image of what I currently have and if we look at the left and right semi circles, we can see that they do not have elevation.
Below is the code for same -
private void init(AttributeSet set) {
rect = new RectF();
this.setLayerType(LAYER_TYPE_SOFTWARE, paint);
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setShadowLayer(8f, 4f, 4f, Color.rgb(197, 197, 197));
eraser = new Paint(Paint.ANTI_ALIAS_FLAG);
eraser.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
dashLine = new Paint(Paint.ANTI_ALIAS_FLAG);
dashLine.setColor(Color.BLACK);
dashLine.setStyle(Paint.Style.STROKE);
dashLine.setStrokeWidth(1);
dashLine.setPathEffect(new DashPathEffect(new float[]{10, 10}, 0));
path = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
rect.left = RECT_PADDING;
rect.top = RECT_PADDING;
rect.right = getWidth() - RECT_PADDING;
rect.bottom = getHeight() - RECT_PADDING;
paint.setColor(Color.WHITE);
//Canvas draws rectangle
canvas.drawRoundRect(rect, 20, 20, paint);
//Canvas draws scallop on left and right edges of rectangle
canvas.drawCircle(RECT_PADDING, rect.bottom / 2, 20, eraser);
canvas.drawCircle(rect.right, rect.bottom / 2, 20, eraser);
//Dashed line between both the scallops
path.moveTo(RECT_PADDING + 40, rect.bottom / 2);
path.lineTo(rect.right - 40, rect.bottom / 2);
canvas.drawPath(path, dashLine);
}
I know this happens because eraser.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); clears everything that comes in its area which includes a part of the rectangle and its shadow.
How to resolve this issue or is there any alternative?
Thanks in advance.
