Customized View

In Customized View mode, you do not need to worry about developing the scanning process or camera control. Scan Kit will do all these tasks for you. However, you will need to design the scanning UI. This can also be easily completed based on sample code.

Before using this mode, ensure that hardware acceleration is not disabled for your app. That is, ensure that the value of hardwareAccelerated is true. Otherwise, the black screen may occur on some models.

Service Process

The process of using Scan Kit in Customized View mode is as follows.

A user launches an app and sends a request of scanning a barcode.
The app checks whether it has the camera access and file read permissions.
The app initializes the customized view to build the scanning UI and start scanning.
If the scanning is successful, the HMS Core Scan SDK calls the onResult API of the app to pass the scanning result.
The app encapsulates the scanning result and sends it to the user.

Development Process

Customizing the elements on the scanning UI
For details, please refer to Custom Elements for the Scanning UI in Customized View Mode.

Developing the function of scanning barcodes using the camera

Create a RemoteView and load it to the activity layout.

Bind the camera preview screen to the remote view and set the scanning area.
In the preview stream, Scan Kit recognizes only the image in the scanning area. (To better magnify the captured image, it is recommended that the scanning box be placed in the middle of the screen and be slightly smaller than the scanning area.)
Set the barcode formats you want Scan Kit to support, initialize the RemoteView, and set UI elements.
Scan Kit that supports only certain barcode formats will scan faster. For example, if only the QR code and DataMatrix code need to be detected, use the setFormat(HmsScan.QRCODE_SCAN_TYPE, HmsScan.DATAMATRIX_SCAN_TYPE) method to set Scan Kit to support only the two types of barcodes. If scanning barcodes in all formats supported by Scan Kit is acceptable for you, you do not need to call the setFormat method to specify the barcode format.
Load the RemoteView to the activity. The sample code is as follows:

Java
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_defined);
    // Bind the camera preview layout.
    frameLayout = findViewById(R.id.rim);
    // Set the scanning area. Set the parameters as required.
    DisplayMetrics dm = getResources().getDisplayMetrics();
    float density = dm.density;
    mScreenWidth = getResources().getDisplayMetrics().widthPixels;
    mScreenHeight = getResources().getDisplayMetrics().heightPixels;
    // Set the width and height of the barcode scanning box to 300 dp.
    final int SCAN_FRAME_SIZE = 300;
    int scanFrameSize = (int) (SCAN_FRAME_SIZE * density);
    Rect rect = new Rect();
    rect.left = mScreenWidth / 2 - scanFrameSize / 2;
    rect.right = mScreenWidth / 2 + scanFrameSize / 2;
    rect.top = mScreenHeight / 2 - scanFrameSize / 2;
    rect.bottom = mScreenHeight / 2 + scanFrameSize / 2;
    // Initialize the remote view. Use setContext() to pass the context (mandatory), use setBoundingBox() to set the scanning area, and use setFormat() to set the barcode format. Then call the build() method to create the remote view. Set the non-consecutive scanning mode by using the setContinuouslyScan method (optional).
    remoteView = new RemoteView.Builder().setContext(this).setBoundingBox(rect).setContinuouslyScan(false).setFormat(HmsScan.QRCODE_SCAN_TYPE, HmsScan.DATAMATRIX_SCAN_TYPE).build();
    // Load the customized view to the frameLayout of the activity.
    remoteView.onCreate(savedInstanceState);
    FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
    frameLayout.addView(remoteView, params);
}

Kotlin
override fun onCreate(savedInstanceState:Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_defined)
    // Bind the camera preview layout.
    frameLayout = findViewById(R.id.rim)
    // Set the scanning area. Set the parameters as required.
    val dm = getResources().getDisplayMetrics()
    val density = dm.density
    mScreenWidth = getResources().getDisplayMetrics().widthPixels
    mScreenHeight = getResources().getDisplayMetrics().heightPixels
    // Set the width and height of the barcode scanning box to 300 dp.
    val SCAN_FRAME_SIZE = 300
    val scanFrameSize = (SCAN_FRAME_SIZE * density).toInt()
    val rect = Rect()
    rect.left = (mScreenWidth / 2 - scanFrameSize / 2).toInt()
    rect.right = (mScreenWidth / 2 + scanFrameSize / 2).toInt()
    rect.top = (mScreenHeight / 2 - scanFrameSize / 2).toInt()
    rect.bottom = (mScreenHeight / 2 + scanFrameSize / 2).toInt()
    // Initialize the remote view. Use setContext() to pass the context (mandatory), use setBoundingBox() to set the scanning area, and use setFormat() to set the barcode format. Then call the build() method to create the remote view. Set the non-consecutive scanning mode by using the setContinuouslyScan method, which is optional.
    remoteView =  RemoteView.Builder().setContext(this).setBoundingBox(rect).setContinuouslyScan(false).setFormat(HmsScan.QRCODE_SCAN_TYPE, HmsScan.DATAMATRIX_SCAN_TYPE).build()
    // Load the customized view to the frameLayout of the activity.
    remoteView.onCreate(savedInstanceState)
    val params = FrameLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT)
    frameLayout.addView(remoteView, params)
}

Set a result callback listener for the RemoteView to obtain the scanning result object HmsScan. For the information contained in this object, please refer to Parsing Barcodes.

Java
@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    // Subscribe to the recognition result callback event.
    remoteView.setOnResultCallback(new OnResultCallback() {
        @Override
        public void onResult(HmsScan[] result) {
            // Obtain the scanning result object HmsScan.
            ...
        } 
    });
}

Kotlin
override
fun onCreate(savedInstanceState:Bundle?) {
    …
    // Subscribe to the recognition result callback event.
    remoteView?.setOnResultCallback(OnResultCallback {
            // Obtain the scanning result object HmsScan.
            ...
    })
}

Set a lifecycle listener for the RemoteView.

Java
@Override
protected void onStart() {
    super.onStart();
    // Listen to the onStart method of the activity.
    remoteView.onStart();
}
@Override
protected void onResume() {
    super.onResume();
    // Listen to the onResume method of the activity.
    remoteView.onResume();
}
@Override
protected void onPause() {
    super.onPause();
    // Listen to the onPause method of the activity.
    remoteView.onPause();
}
@Override
protected void onStop() {
    super.onStop();
    // Listen to the onStop method of the activity.
    remoteView.onStop();
}
@Override
protected void onDestroy() {
    super.onDestroy();
    // Listen to the onDestroy method of the activity.
    remoteView.onDestroy();
}

Kotlin
override
protected fun onStart() {
    super.onStart()
    // Listen to the onStart method of the activity.
    remoteView?.onStart()
}
override
protected fun onResume() {
    super.onResume()
    // Listen to the onResume method of the activity.
    remoteView?.onResume()
}
override
protected fun onPause() {
    super.onPause()
    // Listen to the onPause method of the activity.
    remoteView?.onPause()
}
override
protected fun onStop() {
    super.onStop()
    // Listen to the onStop method of the activity.
    remoteView?.onStop()
}
override
protected fun onDestroy() {
    super.onDestroy()
    // Listen to the onDestroy method of the activity.
    remoteView?.onDestroy()
}

Set other optional listeners for the RemoteView.

Java
protected void onCreate(Bundle savedInstanceState) {
    ...
    // Call back this API under dim lighting to control the flashlight button.
    flushBtn = findViewById(R.id.flush_btn);
    remoteView.setOnLightVisibleCallback(new OnLightVisibleCallBack() {
        @Override
        public void onVisibleChanged(boolean visible) {
            if(visible){
                flushBtn.setVisibility(View.VISIBLE);
            } 
        } 
    });
    ...
}

Kotlin
protected fun onCreate(savedInstanceState:Bundle?) {
    …
    // Call back this API under dim lighting to control the flashlight button.
    flushBtn = findViewById(R.id.flush_btn)
    remoteView?.setOnLightVisibleCallback(OnLightVisibleCallBack{
            if(it){
                flushBtn?.setVisibility(View.VISIBLE)
            } 
    })
    …
}

(Optional) Pause or resume barcode scanning.
1. After successfully scanning a barcode, if you want to perform other operations without ending the current activity, call the API for pausing barcode scanning.
```
Java
remoteView.pauseContinuouslyScan();
```
```
Kotlin
remoteView!!.pauseContinuouslyScan();
```
2. If you want to scan again, call the API for resuming barcode scanning. The activity will start receiving the scanning result again.
```
Java
remoteView.resumeContinuouslyScan();
```
```
Kotlin
remoteView!!.resumeContinuouslyScan();
```
  Pausing barcode scanning will reset the camera's focal length. For example, if the focal length is adjusted to zoom in, it will be restored to the initial state after the barcode scanning is paused and then resumed.
(Optional) Set the non-consecutive scanning mode.
The setContinuouslyScan method is used. By default, the value of the input parameter of setContinuouslyScan is true, indicating that the consecutive scanning mode is used. In this mode, scanning results are returned consecutively. If false is passed to setContinuouslyScan, the non-consecutive scanning mode is used. In this mode, the same barcode is returned only once.
```
Java
// Set setContinuouslyScan to false to enable non-consecutive scanning.
remoteView = new RemoteView.Builder().setContext(this).setContinuouslyScan(false).build();
```
```
Kotlin
// Set setContinuouslyScan to false to enable non-consecutive scanning.
remoteView = RemoteView.Builder().setContext(this).setContinuouslyScan(false).build()
```
(Optional) Set whether to return the original image after successful scanning.
Use the enableReturnBitmap method to enable the function of returning the original image after successful scanning. By default, the original image is not returned. You can use getOriginalBitmap of the HmsScan object to obtain the result.
```
Java
remoteView = new RemoteView.Builder().setContext(this).enableReturnBitmap().build();
```
```
Kotlin
remoteView = RemoteView.Builder().setContext(this).enableReturnBitmap().build()
```
If the original image submitted by the user needs to be returned after code scanning, notify the user. In addition, you must comply with local laws and regulations.
If you want to add the function of scanning barcodes from images, use the Bitmap mode.
1. Set the button for going to the album.
2. For details, please refer to Scanning Barcodes from Images.

目录

Customized View

Service Process

Development Process