How to draw a transparent rectangle in the center?

Question

I'm using CameraX to scan QR. For the UI side, I need to create a translucent black background along with a transparent box in the center (of given side [or of given padding if the side can be calculated]).

I tried using different solutions on stackoverflow but for some reason was unable to achieve this. Currently, I'm trying to use this solution to create a square of given side (width/height) but am unable to do so. I tried modifying the code provided in the first answer here How to create a 'transparent circle inside rectangle' shape in XML in Android?, but it isn't working as expected.

Code:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class QROverlay extends View {
    private Paint mTransparentPaint;
    private Paint mSemiBlackPaint;
    private RectF rectF;
    private Path mPath = new Path();

    private int cx = 0;
    private int cy = 0;
    private final int SIDE = 10;

    public QROverlay(Context context) {
        super(context);
        initPaints();
    }

    public QROverlay(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaints();
    }

    public QROverlay(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaints();
    }

    private void initPaints() {
        mTransparentPaint = new Paint();
        mTransparentPaint.setColor(Color.TRANSPARENT);
        mTransparentPaint.setStrokeWidth(10);

        mSemiBlackPaint = new Paint();
        mSemiBlackPaint.setColor(Color.parseColor("#A6000000"));
        mSemiBlackPaint.setStrokeWidth(10);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mPath.reset();

        RectF rectF = new RectF(
                getLeft() + 100, getTop() + 100, getRight() - 100, getBottom() - 100
        );

//        mPath.addCircle(canvas.getWidth() / 3, canvas.getHeight() / 3, 0, Path.Direction);
        mPath.addRect(rectF, Path.Direction.CW);
        mPath.setFillType(Path.FillType.INVERSE_EVEN_ODD);

        canvas.drawRect(rectF, mTransparentPaint);

        canvas.drawPath(mPath, mSemiBlackPaint);
        canvas.clipPath(mPath);
        canvas.drawColor(Color.parseColor("#A6000000"));
    }
}

Could someone please help me out with this code?

score 1 · Accepted Answer · answered Sep 04 '21 at 21:04

1

There are many ways and many different aspects to think about while drawing this view. What I generally do is to check some of the qr scanner libraries and see how they are implementing this particular view. Then you can create more or less the same view and add it on top of the camera preview view.

For example complete code for such a view can be found here together with this.

answered Sep 04 '21 at 21:04

Orcun

650
1
7
16

The approach I used was basically creating the inverse layout instead (using Canvas) – Shuba. . S hetty Sep 05 '21 at 19:08

score 0 · Answer 2 · answered Sep 16 '21 at 18:51

If you are using jetpack compose Here is how to draw to draw a rectangle with fade-in and fade-out animation.

@Composable
fun CustomRectangle() {
    val alpha = rememberInfiniteTransition()
    val alphaState by alpha.animateFloat(
        initialValue = 0.0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 2000),
            repeatMode = RepeatMode.Reverse
        )
    )
    Canvas(modifier = Modifier.fillMaxSize()) {
        val canvasWidth = size.width
        val canvasHeight = size.height
        var rectangleWidth = 500f
        var rectangleHeight = 700f

        drawRect(
            color = Color.Black,
            topLeft = Offset(
                (canvasWidth / 2) - (rectangleWidth / 2),
                (canvasHeight / 2) - (rectangleHeight / 2)
            ),
            size = Size(width = rectangleWidth, height = rectangleHeight),
            alpha = alphaState
        )
    }
}

How to draw a transparent rectangle in the center?

2 Answers2