Android – Create a Vignette effect | Alessandro Crugnola

Let’s say you want to want to dynamically apply a “vignette” on an ImageView.
Something like this:

These are basically 4 steps we need in order to accomplish the task:

Create a Paint using the PorterDuff.Mode.DST_OUT as Xfermode
Create a RadialGradient and assign to our Paint object as a Shader
Alter the gradient matrix using the setLocalMatrix method.
Use canvas.saveLayer when drawing

1. Paint using PorterDuff.Mode.DST_OUT

This is needed in order to draw an “hole” in our back background.

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));

2. Create the RadialGradient shader:

This is required in order to draw a radial gradient “hole” in our black background. Thus revealing the background image using a “vignette” filter.

final int[] colors = new int[]{0xff000000, 0xff000000, 0};
final float[] anchors = new float[]{0, 0.5f, 1};
Shader shader = new android.graphics.RadialGradient(0, 0, 1, colors, anchors, Shader.TileMode.CLAMP);
paint.setShader(shader);

3. Alter the gradient matrix

The again, in order to create a real vignette effect we need to draw a custom “oval”, otherwise the result of draw something using the radialgradient shader will result in a simple circle. Instead, if we alter its matrix we can modify its aspect ratio, giving it the oval shape:

Matrix matrix = new Matrix();
matrix.postTranslate(rect.centerX(), rect.centerY());
matrix.postScale(rect.width() / 2, rect.height() / 2, rect.centerX(), rect.centerY());
shader.setLocalMatrix(matrix);

4. Draw on a canvas

Now we need to draw our objects on a real canvas. We need to save the current layer using Canvas.saveLayer because otherwise everything we previously drawn will be erased by our paint. But because we’re using saveLayer, we actually are drawing on an offscreen bitmap.

// save current status
// 'pBitmapRect' is the current Bitmap rectangle
canvas.saveLayer(pBitmapRect, mPaint, Canvas.ALL_SAVE_FLAG);
// draw the black background
canvas.drawRect(pBitmapRect, mBlackPaint);
// draw the vignette on the black background using our radial gradient
canvas.drawOval(tempRect2, mPaintShader);
canvas.restore();