Customize MobbScan document scan UI · Mobbeel for developers

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.DetectorView
        android:id="@+id/detector_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 DetectorView.

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. DetectorView properties

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

Kotlin

Java

detectorView.setMarginsListener{ marginLeft, marginTop, marginRight, marginBottom ->
    detectionTrack?.setClearZone(marginLeft, marginTop, marginRight, marginBottom)
}

DetectorView detectorView = findViewById(R.id.detector_view);
detectorView.setMarginsListener(new OnMarginsUpdates() {
    @Override
    public void onUpdate(float marginLeft, float marginTop, float marginRight, float marginBottom) {
        detectionTrack.setClearZone(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) {
        detectorView.setOrientation(rotationDegrees)
        detectorView.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) {
        detectorView.setOrientation(rotationDegrees);
        detectorView.invalidate();
    }

});

4. Visual changes

All we have seen untill now are functionality aspects of the configurations, all the UI colors, texts, and margins can be modified with the DetectorView's public methods:

Method	Result
`setText(String text)`	Sets text to show instructions
`setColorRectangleBorder(int borderColor)`	Sets color rectangle border
`setSizeRectangleBorder(float borderSize)`	Sets rectangle border anchor
`setMarginPercentagePortrait(float marginPercentagePortrait)`	Sets rectangle's margin when device is portrait
`setMarginPercentageLandscape(float marginPercentageLandscape)`	Sets rectangle's margin when device is landscape
`setBackgroundColorHex(String hexadecimalColor)`	Set background color on hexadecimal string
`getMarginLeft()`	Returs margin left point on px
`getMarginTop()`	Returs margin top point on px
`getMarginRight()`	Returs margin right point on px
`getMarginBottom()`	Returs margin bottom point on px

5. Stop the scan

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

Kotlin/Java

this.detectionTrack.stop();

6. 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();
    }
}

7. Perform scan

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