Skip to main content

AR Overlay | Android Document Scanner

Introduction​

The Barcode AR Overlay can be enabled to display and select recognized barcodes in an augmented-reality fashion. Each recognized barcode will be presented on the barcode overlay by a colored frame and text. Tapping on a barcode will deliver this barcode as a result to the delegate of the barcode scanner. These tapped/delivered barcodes can be highlighted with a different color. The text for each barcode is customizable.

The Barcode AR Overlay is available for the Classic Components Barcode Scanner as well as for the RTU UI Barcode Scanner.

Classic components​

BarcodeScannerView allows the enabling of a barcode selection overlay, which displays a contour of the barcode in front of the camera preview (AR-like). It is possible to customize the polygon itself and also the view shown below the barcode contour (which might be used for displaying a text value or an image corresponding to the barcode).

To enable the barcode selection overlay, the following functions are required:

barcodeScannerView.selectionOverlayController.setEnabled(true)
barcodeScannerView.viewController.apply {
    // This is important for Selection Overlay to work properly
    barcodeDetectionInterval = 0
}

To set up a custom view for the result below the contour, use the following methods:

// Simple result storage to showcase the custom view
private val resultsMap = hashMapOf<String, Long>()
// Setting a Factory for the Views
barcodeScannerView.selectionOverlayController.setBarcodeItemViewFactory(object : BarcodePolygonsView.BarcodeItemViewFactory {
    override fun createView(): View {
        val inflater = LayoutInflater.from(this@BarcodeScannerViewActivity)
        return inflater.inflate(R.layout.custom_view_for_ar, barcodeScannerView, false)
    }
})
// Setting a binding callback when the View is bound to the corresponding barcode
barcodeScannerView.selectionOverlayController.setBarcodeItemViewBinder(object : BarcodePolygonsView.BarcodeItemViewBinder {
    override fun bindView(view: View, barcodeItem: BarcodeItem, shouldHighlight: Boolean) {
        val textWithExtension = barcodeItem.textWithExtension
        val progressView = view.findViewById<ProgressBar>(R.id.custom_ar_view_progress)
        if (!resultsMap.containsKey(textWithExtension)) {
            // TODO: here we emulate loading info from the database/internet
            resultsMap[textWithExtension] = System.currentTimeMillis() + 2500
        }
        val valueTextView = view.findViewById<TextView>(R.id.custom_ar_view_value)
        val resultIsReady = resultsMap[textWithExtension]!! < System.currentTimeMillis()
        progressView.isVisible = !resultIsReady
        valueTextView.isVisible = resultIsReady
        valueTextView.text = textWithExtension
    }
})

Set appearance configuration:

barcodeScannerView.selectionOverlayController.setBarcodeAppearanceDelegate(object :
            BarcodePolygonsView.BarcodeAppearanceDelegate {
            override fun getPolygonStyle(
                defaultStyle: BarcodePolygonsView.BarcodePolygonStyle,
                barcodeItem: BarcodeItem
            ): BarcodePolygonsView.BarcodePolygonStyle {
                return defaultStyle.copy(
                    strokeWidth = overlayStrokeWidth,
                    fillColor = overlayPolygonColor,
                    fillHighlightedColor = overlayHighlightedPolygonColor,
                    strokeColor = overlayPolygonColor,
                    strokeHighlightedColor = overlayHighlightedPolygonColor,
                )
            }

            override fun getTextViewStyle(
                defaultStyle: BarcodePolygonsView.BarcodeTextViewStyle,
                barcodeItem: BarcodeItem
            ): BarcodePolygonsView.BarcodeTextViewStyle {
                return defaultStyle.copy(
                    textColor = overlayTextColor,
                    textHighlightedColor = overlayTextHighlightedColor,
                    textContainerColor = overlayTextContainerColor,
                    textContainerHighlightedColor = overlayTextContainerHighlightedColor,
                    textFormat = overlayTextFormat
                )
            }
        })

Scan And Count​

Scan And Count allows you to effortlessly capture 1D and 2D barcodes with a single tap. You can scan multiple codes per scan and scan as many times as you want. The scanner automatically tracks the number of times each code has been detected over multiple scans. These codes are stored as an array in the countedBarcodes property.

The Scan And Count feature can be integrated into the application using classic components.

barcodeCounterView.initCamera()
val scanbotSDK = ScanbotSDK(this)
val barcodeDetector = scanbotSDK.createBarcodeDetector()

// whether to run detection on snapped image or on the preview
barcodeCounterView.viewController.setCaptureMode(CaptureMode.IMAGE)

barcodeCounterView.initDetectionBehavior(
    barcodeDetector,
    object : IBarcodeScanCountViewCallback {
        override fun onScanAndCountStarted() {
            //here you can start to show some progress animation
        }

        override fun onLicenseError() {
            //stop progress animation
        }

        override fun onScanAndCountFinished(barcodes: List<BarcodeItem>) {
            //stop progress animation
            // `barcodes` - list of barcodes of last scan
        }

        override fun onCameraOpen() {
            //camera is initialized and preview is shown
        }
    }
)

To get all scanned barcodes and their count for the whole session:

val scannedBarcodes = barcodeCounterView.camera.countedBarcodes

Set appearance configuration:

    barcodeCounterView.counterOverlayController.setBarcodeAppearanceDelegate(object :
        BarcodePolygonsStaticView.BarcodeAppearanceDelegate {
        override fun getPolygonStyle(
            defaultStyle: BarcodePolygonsStaticView.BarcodePolygonStyle,
            barcodeItem: BarcodeItem
        ): BarcodePolygonsStaticView.BarcodePolygonStyle {
            return defaultStyle.copy(
                drawPolygon = drawPolygon,
                strokeWidth = strokeWidth,
                strokeColor = strokeColor,
                fillColor = fillColor,
                cornerRadius = cornerRadius,
            )
        }
    })

Want to scan longer than one minute?

Generate your free "no-strings-attached" Trial License and properly test the Scanbot SDK.

Get your free Trial License

What do you think of this documentation?

On this page

Scroll to top