Custom Image View

Question

I have this image that comes back from an API, which represents the 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!

Answer 1

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.

Answer 2

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);

Answer 3

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