How to create a circle clippath from an image?

Question

Imagine that I have a rectangle image. How could I create a style like the next one?

I mean, cropping the image into a circle, add the border, the shadow and the gross /shine effect. Until now, I only have tried this snippet code to crop the image: Cropping circular area from bitmap in Android but just that. I have no idea how to do the remaining components in Android.

Answer 1

An easy way to achieve this effect is to use Canvas.drawCircle() and a BitmapShader:

BitmapShader s = new BitmapShader(myPhoto, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

Paint p = new Paint();
p.setShader(s);

myCanvas.drawCircle(centerX, centerY, radius, p);

To do the shadow, simply call Paint.setShadowLayer() on the paint (this will only work if you draw the effect into an offscreen Bitmap or if your View uses a software layer – set by calling View.setLayerType() –).

The border can be drawn by drawing another circle on top, using the Paint.Style.STROKE style (that you can set by calling Paint.setStyle()).

Finally you can draw the gloss by drawing a circle, oval or Path on top of your very first circle. You'll need to use a LinearGradient shader on your paint and you'll also need to clip the gloss. You can do this in two ways:

1. If you are drawing the entire effect into a Bitmap, which is what I would recommend, simply set the paint's Xfermode to a new PorterDuffXfermode(PorterDuff.Mode.SRC_IN).
2. If you are drawing the effect directly on screen you can simply use Canvas.clipPath() to set a circular clip. Note that this will work with hardware acceleration only as of Android 4.3.