Green Screen effect on ImageView

Question

My goal is to have a "green screen" effect for an ImageView and a border. I have a png border with a somewhat thick solid outline, the shape is irregular, and is transparent both inside and outside the border. I want to use it as a border of another image, say a photo, and because the border shape is irregular, some parts of the photo may lie outside of the border.

All this contraption sits at the center of a layout with a complex gradient background, so I cannot just cheat the border imageview and fill the outside part with color similar to the underlying parent background.

My initial idea is to use some image editing tool to fill the inside and outside of the png with different colors (green inside, black outside), place the image behind it, and perform some pixel magic with the resulting bitmap such that all black pixels outside the border will "punch through" the whole canvas thus showing the parent background (the complex gradient background), and all green pixels inside the border will become transparent and reveal the photo behind it.

This sounds somewhat too complicated for a simple-looking goal so I'm postponing the implementation (not even sure if it's possible) until I'm convinced that:

A. There is no existing library I can use with the same effect

B. There is a better solution that results to the same effect, but is a lot less complex.

Answer 1

Got it to work using Bitmap.setPixel

public static Bitmap combine(Bitmap b1, Bitmap b2) {
    try {
        int maxWidth = b1.getWidth();
        int maxHeight = b1.getHeight();
        Bitmap bmOverlay = Bitmap.createBitmap(maxWidth, maxHeight, b1.getConfig());
        Canvas canvas = new Canvas(bmOverlay);
        canvas.drawBitmap(b2, 0, 0, null);
        canvas.drawBitmap(b1, 0, 0, null);
        for (int index = 0; index < bmOverlay.getWidth(); index++) {
            for (int index2 = 0; index2 < bmOverlay.getHeight(); index2++) {
                if (bmOverlay.getPixel(index, index2) == Color.rgb(0, 255, 0)) { // or whatever outside color you set on your png
                    bmOverlay.setPixel(index, index2, Color.TRANSPARENT);
                }
            }
        }
        return bmOverlay;
    } catch (Exception e) {
        e.printStackTrace();
        return null;
    }
}

The trick is to leave the inside of the border as transparent, then fill the outside with a solid color (such as #00ff00) with a tolerance of 0. Won't work as well with shadowed or alpha gradient borders, but should be fine for solid colors.

Usage:

Bitmap b1 = BitmapFactory.decodeResource(getResources(), R.drawable.profile_pic_border_alt);
Bitmap b2 = BitmapFactory.decodeResource(getResources(), R.drawable.panggap);
b2 = ThumbnailUtils.extractThumbnail(panggap, border.getWidth(), border.getHeight());

Bitmap b = combine(b1, b2);
imageView.setImageBitmap(b);