Customize MobbScan MRZ scan UI

If you need more extensive customization for your detection camera UI, you can define your own layout and just ask MobbScan to draw the camera stream during the detection process in a specific view in your layout.

For this, MobbScan Android SDK provides a library with two different camera UIs examples that can be easily integrated with your custom camera view.

1. Layout modification

You will have to include two elements to your custom layout so MobbScan can use them to draw the camera and the feedback messages.

<?xml version="1.0" encoding="utf-8"?>
<YOUR_LAYOUT>
    ...
   <FrameLayout
        android:id="@+id/camera_view_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black" />

    <com.mobbeel.mobbscan.ux.FocusView
        android:id="@+id/focus_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    ...
</YOUR_LAYOUT>

Once you have declared your elements on the layout, you have to set the properties on the FocusView.

2. Set portrait mode on the activity

Note: MobbScan handles the rotation of the device in a different way as it is usual. Because of this, all the activities that implements custom scan layouts must be set to vertical (portrait) orientation in the AndroidManifest.xml file.

...
<activity
        android:name="com.mobbeel.mobbscan.DocumentDetectionActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait"
        android:theme="@style/AppTheme.NoActionBar" />
...

3. FocusView properties

The FocusView component exposes a method called setMarginListener. This method is used to paint a clear zone in which the MRZ will have to be placed. It is a listener due to the need of updated this values in the case of the device being rotated.

Kotlin

Java

focusView.setMarginsListener{ marginLeft, marginTop, marginRight, marginBottom ->
    detectionTrack?.setMRZClearZone(marginLeft, marginTop, marginRight, marginBottom)
}

FocusView focusView = findViewById(R.id.focus_view);
focusView.setMarginsListener(new OnMarginsUpdates() {
    @Override
    public void onUpdate(float marginLeft, float marginTop, float marginRight, float marginBottom) {
        detectionTrack.setMRZClearZone(marginLeft, marginTop, marginRight, marginBottom);
    }
});

Knowing that MobbScan handles the orientation in a different way, if you want to change the view's orientation call the method exposed on detectorView setOrientation:

Kotlin

Java

 MobbScanAPI.getInstance().setIdDocumentDetectionFeedbackListener(object : IDDocumentDetectionFeedbackListener {

    override fun onIDDocumentDetection(p0: MobbScanDetectionFeedbackResult?) {
        // Give real-time feedback to the user...
    }

    override fun onNewOrientationDetected(rotationDegrees: Int) {
        focusView.setOrientation(rotationDegrees)
        focusView.invalidate()
    }

})

MobbScanAPI.getInstance().setIdDocumentDetectionFeedbackListener(new IDDocumentDetectionFeedbackListener() {

    @Override
    public void onIDDocumentDetection(MobbScanDetectionFeedbackResult result, MobbScanDetectionResultData resultData, MobbScanAPIError error) {
        // Give real-time feedback to the user                                   
    }

    @Override
    public void onNewOrientationDetected(final int rotationDegrees) {
        focusView.setOrientation(rotationDegrees);
        focusView.invalidate();
    }

});

4. Stop the scan

You can stop the detection process at any time by using:

Kotlin/Java

this.detectionTrack.stop();

5. Handle camera resources

In order to release the camera resources properly, you will need to add the following code to your Activity lifecycle methods:

Kotlin

Java

override fun onResume() {
    super.onResume()
    detectionTrack?.onResume()
}

override fun onPause() {
    super.onPause()
    detectionTrack?.onPause()
}

override fun onDestroy() {
    super.onDestroy()
    detectionTrack?.onDestroy()
}

@Override
protected void onPause() {
    super.onPause();
    if (this.detectionTrack != null) {
        this.detectionTrack.onPause();
    }
}

@Override
protected void onResume() {
    super.onResume();
    if (this.detectionTrack != null) {
        this.detectionTrack.onResume();
    }
}

@Override
protected void onDestroy() {
    super.onDestroy();
    if (this.detectionTrack != null) {
        this.detectionTrack.onDestroy();
    }
}

5. Perform scan

When the UI is as you want it, you can continue with the scan as a standard one, look at the MRZ scan guide if you have any question.