CODEWITHSUNDEEP
androidimagecanvasbitmapandroid-camera
Webster
Webster

Reputation: 1153

Android - Set Image overlay with background color outside of bitmap using canvas

I was working on a Camera Activity Overlay, I've successfully created opaque color outside of the rectangle (opaque black). And also I've successfully created a small rectangle inside the big rectangle. Please see below picture. As you can see , the small rectangle has a blue background on it. The problem is, I want to make the blue background outside the image (bitmap), not covering the image. The problem is, if I change the image with transparent fill, the blue background will cover it all. How can I make the blue background only cover the outside of the image? I already tried to find all possible answers from google, but no luck for me, maybe I started with wrong approach, need advice.

enter image description here

Here's my code

bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
    Canvas osCanvas = new Canvas(bitmap);

    RectF outerRectangle = new RectF(0, 0, getWidth(), getHeight());

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(getResources().getColor(R.color.opaque_black));
    paint.setAlpha(99);
    osCanvas.drawRect(outerRectangle, paint);


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

    paint.setColor(Color.TRANSPARENT);
    paint.setStyle(Paint.Style.FILL);
    RectF r1 = new RectF(
            (float) (xStartingPoint),
            (float) (yStartingPoint),
            (float) (parentWidth),
            (float) (parentHeight));

    osCanvas.drawRoundRect(r1, (float) (cornerRadiusRatio * parentHeight),
            (float) (cornerRadiusRatio * parentHeight), paint);

    paint.setStrokeWidth(strokeWidth);
    paint.setColor(getResources().getColor(R.color.colorDeepSky));
    paint.setStyle(Paint.Style.STROKE);

    RectF r2 = new RectF(
            (float) (xStartingPoint),
            (float) (yStartingPoint),
            (float) (parentWidth),
            (float) (parentHeight));

    osCanvas.drawRoundRect(r2, (float) (cornerRadiusRatio * parentHeight),
            (float) (cornerRadiusRatio * parentHeight), paint);

    if (callbackMsg.equals(AppConstant.KTP_SELF)) {
        paint.setColor(getResources().getColor(R.color.colorDeepSky));

        drawRect(osCanvas, paint,
                (float) (xChildStartingPoint),
                (float) (yChildStartingPoint),
                (float) (childWidth + xChildStartingPoint + 0.3 * childWidth),
                (float) (childHeight + 0.7 * yChildStartingPoint));
    }

    RectF outerRectangle2 = new RectF(
    (float) xChildStartingPoint,
    (float) yChildStartingPoint,
    (float) (childWidth + xChildStartingPoint + 0.3 * childWidth),
    (float) (childHeight + 0.7 * yChildStartingPoint));

    Paint paint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint2.setColor(getResources().getColor(R.color.blue));
    paint2.setAlpha(99);
    osCanvas.drawRect(outerRectangle2, paint2);

    Rect r3 = new Rect(
            (int) (xChildStartingPoint),
            (int) (yChildStartingPoint),
            (int) (childWidth + xChildStartingPoint + 0.3 * childWidth),
            (int) (childHeight + 0.7 * yChildStartingPoint));

    paint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint2.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
    paint2.setColor(Color.TRANSPARENT);
    paint2.setStyle(Paint.Style.FILL);
    Bitmap mbitmap = BitmapFactory.decodeResource(getResources(),R.drawable.icon_profile2);
    osCanvas.drawBitmap(mbitmap, null, r3, paint2);

Thanks

Upvotes: 1

Views: 2469

Answers (1)

Webster
Webster

Reputation: 1153

Okay, found the answer

I'm using PorterDuff with DST_OUT mode

Note: Use DST_OUT if you want to make the image background transparent and the outside area filled with color Use DST_IN if you want to make the outside area filled with color

Here's the code, im using Kotlin

    var paint2 = Paint(Paint.ANTI_ALIAS_FLAG)
        paint2.color = resources.getColor(R.color.opaque_black)
        osCanvas.drawRect(outerRectangle2, paint2)

        paint2 = Paint(Paint.ANTI_ALIAS_FLAG)
        val r3 = Rect(
                xChildStartingPoint.toInt(),
                yChildStartingPoint.toInt(),
                (childWidth + xChildStartingPoint + 0.3 * childWidth).toInt(),
                (childHeight + 0.7 * yChildStartingPoint).toInt())

        paint2.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
        val mBitmap = BitmapFactory.decodeResource(resources, R.drawable.selfie_outline)
        osCanvas.drawBitmap(mBitmap, null, r3, paint2)

Upvotes: 1

Related Questions