How to draw rectangle on a camera preview in android

Question

Actually I don't understand how to implement the rectangle on the camera preview. Everything working well, but I don't know the way to put the rectangle border like this link. Please anyone help me. Thanks.

package com.example.redsignal.eventbizz;
public class CameraActivity extends AppCompatActivity {

public static final String FRAGMENT_TAG = "camera";
private static final int REQUEST_CAMERA_PERMISSIONS = 931;
private static final int REQUEST_PREVIEW_CODE = 1001;
@Bind(R.id.settings_view)
CameraSettingsView settingsView;
@Bind(R.id.flash_switch_view)
FlashSwitchView flashSwitchView;
@Bind(R.id.front_back_camera_switcher)
CameraSwitchView cameraSwitchView;
@Bind(R.id.record_button)
RecordButton recordButton;
@Bind(R.id.cameraLayout)
View cameraLayout;
Button btn_orc, btn_qr;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_camera);
    ActionBar actionBar = getSupportActionBar();
    actionBar.hide();
    ButterKnife.bind(this);
    btn_orc = (Button) findViewById(R.id.btn_orc);
    btn_orc.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(CameraActivity.this, CameraActivity.class);
            startActivity(intent);
            TastyToast.makeText(CameraActivity.this, "BCR Mode", TastyToast.LENGTH_LONG, TastyToast.INFO);
            finish();
        }
    });
    btn_qr = (Button) findViewById(R.id.btn_qr);
    btn_qr = (Button) findViewById(R.id.btn_qr);
    btn_qr.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Intent intent = new Intent(CameraActivity.this, QRCameraActivity.class);
            startActivity(intent);
            TastyToast.makeText(CameraActivity.this, "QR Mode", TastyToast.LENGTH_LONG, TastyToast.INFO);
            finish();
        }
    });
    if (Build.VERSION.SDK_INT > 15) {
        final String[] permissions = {
                Manifest.permission.CAMERA,
                Manifest.permission.RECORD_AUDIO,
                Manifest.permission.WRITE_EXTERNAL_STORAGE,
                Manifest.permission.READ_EXTERNAL_STORAGE};

        final List<String> permissionsToRequest = new ArrayList<>();
        for (String permission : permissions) {
            if (ActivityCompat.checkSelfPermission(this, permission) != PackageManager.PERMISSION_GRANTED) {
                permissionsToRequest.add(permission);
            }
        }
        if (!permissionsToRequest.isEmpty()) {
            ActivityCompat.requestPermissions(this, permissionsToRequest.toArray(new String[permissionsToRequest.size()]), REQUEST_CAMERA_PERMISSIONS);
        } else addCamera();
    } else {
        addCamera();
    }
}


@OnClick(R.id.flash_switch_view)
public void onFlashSwitcClicked() {
    final CameraFragmentApi cameraFragment = getCameraFragment();
    if (cameraFragment != null) {
        cameraFragment.toggleFlashMode();
    }
}

@OnClick(R.id.front_back_camera_switcher)
public void onSwitchCameraClicked() {
    final CameraFragmentApi cameraFragment = getCameraFragment();
    if (cameraFragment != null) {
        cameraFragment.switchCameraTypeFrontBack();
    }
}

@OnClick(R.id.record_button)
public void onRecordButtonClicked() {
    final CameraFragmentApi cameraFragment = getCameraFragment();
    if (cameraFragment != null) {
        cameraFragment.takePhotoOrCaptureVideo(new CameraFragmentResultAdapter() {

                                                   @Override
                                                   public void onPhotoTaken(byte[] bytes, String filePath) {
                                                       Toast.makeText(getBaseContext(), "onPhotoTaken " + filePath, Toast.LENGTH_SHORT).show();
                                                   }
                                               },
                "/storage/self/primary",
                "photo0");
    }
}

@OnClick(R.id.settings_view)
public void onSettingsClicked() {
    final CameraFragmentApi cameraFragment = getCameraFragment();
    if (cameraFragment != null) {
        cameraFragment.openSettingDialog();
    }
}



@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    if (grantResults.length != 0) {
        addCamera();
    }
}

@RequiresPermission(Manifest.permission.CAMERA)
public void addCamera() {
    cameraLayout.setVisibility(View.GONE);
    cameraLayout.setVisibility(View.VISIBLE);

    final CameraFragment cameraFragment = CameraFragment.newInstance(new Configuration.Builder()
            .setCamera(Configuration.CAMERA_FACE_REAR).build());
    getSupportFragmentManager().beginTransaction()
            .replace(R.id.content, cameraFragment, FRAGMENT_TAG)
            .commitAllowingStateLoss();

    if (cameraFragment != null) {


        cameraFragment.setStateListener(new CameraFragmentStateAdapter() {

            @Override
            public void onCurrentCameraBack() {
                cameraSwitchView.displayBackCamera();
            }

            @Override
            public void onCurrentCameraFront() {
                cameraSwitchView.displayFrontCamera();
            }

            @Override
            public void onFlashAuto() {
                flashSwitchView.displayFlashAuto();
            }

            @Override
            public void onFlashOn() {
                flashSwitchView.displayFlashOn();
            }

            @Override
            public void onFlashOff() {
                flashSwitchView.displayFlashOff();
            }



            @Override
            public void shouldRotateControls(int degrees) {
                ViewCompat.setRotation(cameraSwitchView, degrees);
                ViewCompat.setRotation(flashSwitchView, degrees);
            }

            @Override
            public void onRecordStatePhoto() {
                recordButton.displayPhotoState();
            }

        });

        cameraFragment.setControlsListener(new CameraFragmentControlsAdapter() {
            @Override
            public void lockControls() {
                cameraSwitchView.setEnabled(false);
                recordButton.setEnabled(false);
                settingsView.setEnabled(false);
                flashSwitchView.setEnabled(false);
            }

            @Override
            public void unLockControls() {
                cameraSwitchView.setEnabled(true);
                recordButton.setEnabled(true);
                settingsView.setEnabled(true);
                flashSwitchView.setEnabled(true);
            }

            @Override
            public void allowCameraSwitching(boolean allow) {
                cameraSwitchView.setVisibility(allow ? View.VISIBLE : View.GONE);
            }

            @Override
            public void allowRecord(boolean allow) {
                recordButton.setEnabled(allow);
            }

        });

    }
}

private CameraFragmentApi getCameraFragment() {
    return (CameraFragmentApi) getSupportFragmentManager().findFragmentByTag(FRAGMENT_TAG);
}

  <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


    <RelativeLayout
        android:id="@+id/cameraLayout"
        android:visibility="gone"
        tools:visibility="visible"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:paddingTop="10dp">

            <com.github.florent37.camerafragment.widgets.CameraSettingsView
                android:id="@+id/settings_view"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                tools:ignore="RtlHardcoded" />

            <com.github.florent37.camerafragment.widgets.FlashSwitchView
                android:id="@+id/flash_switch_view"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerInParent="true" />

            <com.github.florent37.camerafragment.widgets.CameraSwitchView
                android:id="@+id/front_back_camera_switcher"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="15dp"
                tools:ignore="RtlHardcoded" />

        </RelativeLayout>

        <!--android:background="#82000000"-->
        <RelativeLayout
            android:id="@+id/record_panel"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="@android:color/transparent"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">

            <com.github.florent37.camerafragment.widgets.RecordButton
                android:id="@+id/record_button"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_centerInParent="true"
                android:layout_marginLeft="50dp"
                android:layout_marginRight="50dp" />
            <Button
                android:id="@+id/btn_qr"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginTop="30dp"
                android:layout_toLeftOf="@+id/btn_orc"
                android:layout_toStartOf="@+id/btn_orc"
                android:background="@drawable/qr_scan" />

            <Button
                android:id="@+id/btn_orc"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="7dp"
                android:layout_marginRight="5dp"
                android:layout_alignTop="@+id/btn_qr"
                android:background="@drawable/bcr_scan"
                tools:ignore="RtlHardcoded" />

 </RelativeLayout>

    </RelativeLayout>

</FrameLayout>

the link is not working.. do you want to just draw a rectangle over the preview or do you also want that the area inside the rectangle is the only one where your qr scanner works? — Katharina, Jul 17 '17 at 11:42
https://lh3.googleusercontent.com/K78yAKNNnX4V-5aIPmqvvlYVJU_pgCh65N_B-iZ0W8hSC0jgeFGh8TiUb6ZIEXjfmvDX=h900 — Rawal Hussain Khan Ali, Jul 17 '17 at 11:51
just draw a rectangle over the preview. Actually i want a preview for Bussiness Card Scanning. https://lh3.googleusercontent.com/K78yAKNNnX4V-5aIPmqvvlYVJU_pgCh65N_B-iZ0W8hSC0jgeFGh8TiUb6ZIEXjfmvDX=h900 . Just like the above example @Katharina — Rawal Hussain Khan Ali, Jul 17 '17 at 11:56
Hi and welcome to Stack Overflow, please read how to create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) and also check [How to Ask Good Questions](https://stackoverflow.com/help/how-to-ask) so you increase your chances to get feedback and useful answers. — DarkCygnus, Jul 17 '17 at 18:06
@Katharina can u please help me in this view http://en.ccint.com/static/images/move/qnw_1.mp4. know i have all the things working fine but i want to create a view like this — Rawal Hussain Khan Ali, Jul 19 '17 at 05:56
so this is that custom `Shape` i was talking about (this is a complete, working, custom shape code, just pass it to `ShapeDrawable` constructor): https://pastebin.com/CfEfWQpz — pskink, Jul 19 '17 at 06:02
here you have `ShapeDrawable` constructors: https://developer.android.com/reference/android/graphics/drawable/ShapeDrawable.html — pskink, Jul 19 '17 at 06:27
specifically that one which takes `Shape` parameter: `public ShapeDrawable(Shape s)` — pskink, Jul 19 '17 at 06:59
[this](https://pasteboard.co/GBCN9Ow.png) is what your view will look like if you use that custom `Shape` class - an outer rectangle with four diagonal lines at the corners - the whole `Path` is created inside `onResize` method — pskink, Jul 19 '17 at 07:34
you should follow Katharina answer below with overlay `View` and instead of using `android:background="@drawable/your_shape"` call `setBackground(shapeDrawable)` on that view — pskink, Jul 19 '17 at 07:41

Katharina · Accepted Answer · 2017-07-17T12:19:05.133

3

To acchieve this you can just put your camera preview into a FrameLayout and place a transparent View with this rect inside above the camera preview.

First we are going to create the rectangle:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
            android:width="1dp"
            android:color="@color/white"
            android:dashGap="8dp"
            android:dashWidth="8dp" />

    <corners android:radius="8dp" />

Then you can put this view over your preview:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <!-- this is your preview - whatever it looks like -->
        <View   
            android:layout_width="match_parent"
            android:layout_height="match_parent" />   

         <!-- overlay - customize padding and stuff  -->
         <View   
            android:layout_width="match_parent" 
            android:layout_height="match_parent"
            padding="32dp"
            android:background="@drawable/your_shape" />  
</FrameLayout>

EDIT:

after taking a look at your layout the task can be solved by just placing htis view:

     <View
        padding="32dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/record_panel"
        android:layout_alignParentTop="true"
        android:background="@drawable/your_shape" />

as last item of the layout with the id cameraLayout

edited Jul 17 '17 at 12:19

answered Jul 17 '17 at 12:00

Katharina

1,612
15
27

in snippet my layout – Rawal Hussain Khan Ali Jul 17 '17 at 12:11
you have to replace the first view with your layout - I don't know what it looks like – Katharina Jul 17 '17 at 12:13
Thanks :) Great Favour – Rawal Hussain Khan Ali Jul 17 '17 at 12:28
Can u please recommend a bossiness card scanner – Rawal Hussain Khan Ali Jul 17 '17 at 12:29
nope sorry - I have no experience with such scanners - I just know a bit about layouting ;) – Katharina Jul 17 '17 at 12:39
i want to detect my card like this http://en.ccint.com/static/images/move/qnw_1.mp4 – Rawal Hussain Khan Ali Jul 17 '17 at 13:25
https://stackoverflow.com/a/22250026/5052976 check out this answer.. or just google it - I did the same ;) – Katharina Jul 17 '17 at 13:41
can u help me out in view – Rawal Hussain Khan Ali Jul 18 '17 at 05:34
1

Really nice solution, like it when it is easy :) – Rémi P Oct 09 '18 at 13:48

Sahil Bansal · Answer 2 · 2019-11-12T12:31:49.310

For drawing any kind of view over the camera preview, make an overlay means draw canvas of any shape like for phone makes a canvas of rectangle with a particular colour, this overlay will cover the entire screen.

Now make this over translucent by changing the alpha of the canvas.

Now draw another canvas of your required shape like circle and rectangle and make it transparent.

The code is as follows:

   public class DrawOnTop extends View {
    int screenCenterX = 0;
    int screenCenterY = 0;
    int radius = 50;

    public DrawOnTop(Context context, int screenCenterX, int screenCenterY, int radius) {
        super(context);
        this.screenCenterX = screenCenterX;
        this.screenCenterY = screenCenterY;
        this.radius = radius;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(getResources().getColor(R.color.white));
        paint.setAlpha(130);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawPaint(paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawCircle(screenCenterX, screenCenterY, radius, paint);
        super.onDraw(canvas);
    }
}

How to draw rectangle on a camera preview in android

2 Answers2