Create a CardView with a semicircle on top

Question

I am very much into designing a login screen.

Something like this:
How Do I actually cut the card from the top so as to fill the drawable on top of it? Any help w

Answer 1

This screen is very complex in terms of what can be done with the current implementation of shapes and shadows on Android. It might actually be impossible to implement correctly using official libraries. You have to solve two problems - how to cut the view and how to provide a shadow for that view.

The support CardView's shadow is created using some kind of a gradient and supports only one case - the rounded rectangle. The Lollipop's shadow can take any shape as long as the shape is convex - which is not your case. As far as I know, there's no 3rd party library which could help you with that. You'd have to make your own shadow using RenderScript blur or just provide a background with a shadow.

It's possible to cut out the circular shape at the top. It requires some custom drawing/masking, but can be done pretty easily using standard Android library. You can do that using Canvas.saveLayer/restore() + PorterDuff.Mode.CLEAR. More or less like this:

Path circle, card;
PorterDuffXfermode xfereMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
Bitmap avatar;

// make a layer to make cutting shapes possible
int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);

// draw the card and its content
canvas.drawPath(card, paint);
super.draw(canvas);

// clear the circular shape
paint.setXfermode(xfereMode);
canvas.drawPath(circle, paint);

// composite
canvas.restoreToCount(saveCount);
paint.setXfermode(null);

// draw the avatar
canvas.drawBitmap(avatar, x, y, paint);

It's not a compplete solution, but I hope you get the idea. To make a shadow, add a black filter, blur it with RenderScript and draw beneath the actual view.

It's a ton of work. Most likely will be very time consuming to implement correctly and very slow to execute. Layer composition and per-pixel operations are very slow even on modern desktop hardware.