QRCode View¶
The QRCode view is based on Google's CameraX and ML Kit barcode scanning libraries. It handles the camera stream and image transformation for barcode detection in real-time. It supports two modes: single and multi. In single mode, it only detects one barcode at a time. In multi mode, it can detect multiple barcodes at a time. In addition, the QRCode view supports extension functions, such as customized view, gesture operation, and auto flash.
Setting up QRCode View¶
Set up QRCode view using the following procedure.
- Declare the
QRCodeReaderScreenin the layout of your activity or fragment.
<com.sap.cloud.mobile.fiori.qrcode.QRCodeReaderScreen
android:id="@+id/qr_reader"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.sap.cloud.mobile.fiori.qrcode.QRCodeReaderScreen>
- Gets the instance of
QRCodeReaderScreen.
var qrcodeScreen = findViewById<`QRCodeReaderScreen`>(R.id.qr_reader)
QRCodeReaderScreen qrcodeScreen = findViewById(R.id.qr_reader);
- Configure the
QRCodeview usingQRCodeConfig.
Note
QRCodeConfig is optional. The QRCode view provides a default value.
// New instance of QRCodeConfig.
var qrCodeConfig = QRCodeConfig.Builder()
// Set up the barcode format. The default value is Barcode.FORMAT_QR_CODE.
.setBarCodeFormat(Barcode.FORMAT_ALL_FORMATS)
// Set up the camera scan interval. The default value is 16 milliseconds.
.setScanInterval(50)
// Set up camera auto-focus. The default value is true.
.setAutoFocus(true)
.build()
// Set the config to qrcodeScreen.
qrcodeScreen.setQRConfig(qrCodeConfig)
// New instance of QRCodeConfig.
QRCodeConfig qrCodeConfig = new QRCodeConfig.Builder()
// Set up the barcode format. The default value is Barcode.FORMAT_QR_CODE.
.setBarCodeFormat(Barcode.FORMAT_ALL_FORMATS)
// Set up the camera scan interval. The default value is 16 milliseconds.
.setScanInterval(50)
// Set up camera auto-focus. The default value is true.
.setAutoFocus(true)
.build();
// Set the config to qrcodeScreen.
qrcodeScreen.setQRConfig(qrCodeConfig);
- Configure the barcode detector listener to get the barcode scan result.
qrcodeScreen.setBarCodeListener(this, object: QRCodeReaderScreen.OnMultiBarCodeDetectorListener {
override fun onBarcodeDetected(barcode: String?) {
//handle single barcode scan result
}
override fun onMultiBarcodeDetected(barcodes: MutableList<String>?) {
//handle multi barcodes scan result
}
})
qrcodeScreen.setBarCodeListener(this, new QRCodeReaderScreen.OnMultiBarCodeDetectorListener() {
@Override
public void onBarcodeDetected(String barcode) {
//handle single barcode scan result
}
@Override
public void onMultiBarcodeDetected(List<String> barcodes) {
//handle multi barcodes scan result
}
});
Switch Between Single and Multi Scan Mode¶
The user can switch between single- and multi-scan mode using QRCodeConfig.
QRCodeConfig codeConfig = new QRCodeConfig.Builder()
.setBarCodeFormat(Barcode.FORMAT_ALL_FORMATS)
.isSupportMultiMode(true).build();
// refresh the config to qrcodeScreen.
qrcodeScreen.setQRConfig(qrCodeConfig);
val codeConfig = QRCodeConfig.Builder()
.setBarCodeFormat(Barcode.FORMAT_ALL_FORMATS)
.isSupportMultiMode(true).build();
// refresh the config to qrcodeScreen.
qrcodeScreen.setQRConfig(qrCodeConfig);
Custom QRCode View¶
Note
All the XML attributes have default values.
<com.sap.cloud.mobile.fiori.qrcode.QRCodeReaderScreen
android:id="@+id/qr_reader"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:isShowFrameContainer="true"
app:isDrawMask="true"
app:isShowScanAnimation="true"
app:frameCornerLineColor="@color/onboarding_blue_50"
app:frameContainerRatio="0.5"
app:isShowHintText="true"
app:hintText="Position QR code or barcode in this frame"
app:frameCornerLength="30dp"
app:frameCornerLineWidth="4dp"
app:isAutoShowFlash="true"
app:isDrawKeywordUnderLine="true"
app:urlKeyword="this"
app:urlLink="http://www.sap.com" />
</com.sap.cloud.mobile.fiori.qrcode.QRCodeReaderScreen>
The following table shows all the available XML attributes of custom QRCode and their explanations.
|XML attributes| |
|-----|-----|
| app:isDrawMask | Draw the mask outside of the frame container |
| app:maskColor | the mask color |
| app:isAutoShowFlash | auto show flash icon according to ambient light |
| app:isShowScanAnimation | whether to show scan animation |
| app:scanLineHeight | scan line height |
| app:isShowFrameContainer | whether to show the frame container |
| app:frameCornerLineColor | frame container corner line color |
| app:frameContainerRatio | the ratio of frame container width in screen width |
| app:frameCornerLength | frame container corner line length |
| app:frameCornerLineWidth | frame container corner line width |
| app:frameContainerCornerRadius | frame container corner radius |
| app:frameContainerLineColor | frame container line color |
| app:frameContainerWidth | frame container width, if set the frameContainerRatio will not work |
| app:frameContainerHeight | frame container height, if set the frameContainerRatio will not work |
| app:isShowHintText | whether to show the hint text under the frame container |
| app:hintText | hint text under the frame container |
| app:hintTextColor | hint text color |
| app:hintTextSize | hint text size |
| app:urlKeyword | URL keyword in hint text|
| app:urlLink | keyword URL link |
| app:keywordColor | keyword color |
| app:isDrawKeywordUnderLine | is draw the line under the keyword |
| app:keywordUnderLineColor | keyword under line color|
| app:multiBarcodeOverlayStrokeWidth | the barcode rectangle line width in multi mode |
| app:multiBarcodeOverlayColor | the barcode rectangle color |
Close the QRCode View¶
To close the QRCode view, set up a click listener for the Close Image button.
qrcodeScreen.setCloseReaderButtonOnClickListener{
finish()
}
qrcodeScreen.setCloseReaderButtonOnClickListener((view)->{
finish();
});
Detecting a Barcode by Scanning a Saved Barcode Image¶
The QRCode view scans the barcode from a saved image by default. Click the photo library of QRCodeReaderScreen and select the barcode image. The result will be passed in OnMultiBarCodeDetectorListener. The developer does not need handle this part of the code.
Re-Scan Option¶
The QRCode view provides a re-scan option, where you can decide to stop or restart the barcode scanning process.
// Stop the barcode scan.
qrcodeScreen.stopScan()
// Restart the barcode scan.
qrcodeScreen.reStartScan()
// Stop the barcode scan.
qrcodeScreen.stopScan();
// Restart the barcode scan.
qrcodeScreen.reStartScan();
Gesture Operation¶
The QRCode view supports gesture operation, meaning that the user can zoom in or out to adjust the barcode distance. The user double-clicks to zoom in or out.
URL Link Option¶
Note
The URL link can only be specified if the hint text is set up and also contains the keyword.
<com.sap.cloud.mobile.fiori.qrcode.QRCodeReaderScreen
android:id="@+id/qr_reader"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:isShowHintText="true"
app:hintText="Position QR code or barcode in this frame"
app:isDrawKeywordUnderLine="true"
app:urlKeyword="this"
app:urlLink="http://www.sap.com" />
</com.sap.cloud.mobile.fiori.qrcode.QRCodeReaderScreen>
Auto Flash Option¶
The QRCode view supports an auto flash option, where the flash icon will be displayed based on the ambient light.
<com.sap.cloud.mobile.fiori.qrcode.QRCodeReaderScreen
android:id="@+id/qr_reader"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:isAutoShowFlash="true" />
</com.sap.cloud.mobile.fiori.qrcode.QRCodeReaderScreen>