Custom Image View

I have this image that comes back from an API, which represents t开发者_高级运维he users avatar:

However, my graphics department has designed the app to mask the image to make it look like this at runtime (to match our existing design of sharp edges, etc):

Notice the small edge cutout on the bottom left?

I'd love to be able to create a custom ImageView that handled this for me. Unfortunately I'm not sure how to go about doing that. How can I create the bottom image in a custom ImageView. Is this possible? Do I mask it? If so, how?

Thanks!

Using Path and xfer modes to draw on canvas can do the trick. Check this answer how to draw pic to Closed curve area

I think the easiest way to do is to use 2 ImageViews, one with the photo and other above it with a mask for the photo, in your case it would be all transparent except the bottom left to create the cutout with the background color.

You may be able to use android.graphics.Path to draw the complex shape you want. I found this very helpful for a simple custom View, but it seems like you can do a lot with it: http://developer.android.com/reference/android/graphics/Path.html

Simple code sample for a shaded rectangle:

private Path mRectanglePath;
...
// draw the path
mRectanglePath = new Path();
mRectanglePath.addRect(mLeft, mTop, mRight, mBottom, Path.Direction.CW);   

// draw the fill
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setAlpha(64);
canvas.drawPath(mRectanglePath, paint);