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
QRCodeReaderScreen
in 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
QRCode
view 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>