Skip to content

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. Two image buttons are provided, one to close the view, and the other to open the system gallery and read the image.

QR Code View

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 using QRCodeConfig.

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, QRCodeReaderScreen.OnBarCodeDetectorListener { result ->
             // Handle the barcode result.
         })
qrcodeScreen.setBarCodeListener(this, (result)-> {
             // Handle the barcode result.
      });

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

Last update: October 29, 2020