Customize the View with HMS Scan Kit

Hi Everyone,

In this article we’ll practice how to build a custom view using HMS Scan SDK.

HUAWEI Scan Kit scans and parses all major 1D and 2D barcodes and generates QR codes, helping you quickly build barcode scanning functions into your apps.

HUAWEI Scan Kit automatically detects, magnifies, and identifies barcodes from a distance, and is also able to scan a very small barcode in the same way.

Custom view is literally designing a unique camera view layout for your apps which allows you to:

✔️Beautify your UI
✔️Improve user-experience
✔️Customize colors and theme
✔️Add Flash Button

What Will We Design?

Here is an example activity, developed with customized view of HMS scan kit.

Preparations

Activate Scan Kit SDK on AG Connect and implement SDK on your project.
Follow instructions on the link below:
https://developer.huawei.com/consumer/en/doc/development/HMS-Guides/scan-preparation-4

Development Steps

1st Start with Accessing Android Permissions

Modify your AndroidManifest.xml and add permission list.

<! — Camera permission → 
<uses-permission android:name=”android.permission.CAMERA” /> 
<! — File reading permission → 
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” /> 
<! — Used feature → 
<uses-feature android:name=”android.hardware.camera” /> 
<uses-feature android:name=”android.hardware.camera.autofocus” />

2nd Add a Button for Scanning

The button will firstly request permissions from user since we need explicitly need permissions from user to access camera or local storage. Secondly, if permissions are granted, the button will trigger scanning activity.

FirstActivity.java

activity_first.xml

3Create SecondActivity and Customize It

This step is the theme of the article as it shows how to customize the scan view on your app. Create an empty activity and design it with the code below:

activity_second.xml

Change background colors or alpha levels as you wish.

Create a resource file:

/drawable/scanbox.xml

}|]Scanner Customized View

SecondActivity.java

Congratulations!

You achieved to create customized view with HMS Scan kit.