How to add rectangle overlay to camera screen using EasyImage in AndroidStudio

Question

I have this code which runs when the user presses a button:

    fun takeImage(fragment: Fragment?) {
        Dexter.withActivity(fragment?.activity)
                .withPermissions(Manifest.permission.CAMERA, Manifest.permission.WRITE_EXTERNAL_STORAGE)
                .withListener(object : BaseMultiplePermissionsListener() {
                    override fun onPermissionsChecked(report: MultiplePermissionsReport?) {
                        if (report?.areAllPermissionsGranted() == true)
                            EasyImage.openChooserWithGallery(fragment, fragment?.getString(R.string.select_image), 0)
                        else
                            // Show Error
                    }
                })
                .check()
    }

I want the camera to open with a white rectangle as a placeholder, so the user can fit the card that needs to be photographed in it, something like this: https://i.stack.imgur.com/QurcT.png

I am using EasyImage to open camera view, how should I do that rectangle?

score 0 · Answer 1 · answered Dec 13 '18 at 15:18

You can use the camera kit https://github.com/CameraKit/camerakit-android It uses a surfaceview, it in it you can customize the camera however you want.

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/white"
    android:fitsSystemWindows="true">

    <com.camerakit.CameraKitView
        android:id="@+id/cameraKitView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignTop="@+id/maskView"
        android:layout_alignBottom="@+id/maskView"
        android:adjustViewBounds="true"
        android:keepScreenOn="true"
        app:camera_flash="off"
        app:camera_focus="auto"
        app:camera_permissions="camera" />

    <br.com.getninjas.pro.view.SquareImageView
        android:id="@+id/maskView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/mask_camera_toolbar"
        tools:background="@drawable/ic_document_selfie_mask" />

Sample image

How to add rectangle overlay to camera screen using EasyImage in AndroidStudio

1 Answers1