HMS Scan Kit With Navigation
HUAWEI Scan Kit scans and parses all major 1D and 2D barcodes and generates QR codes, helping quickly build barcode scanning functions into apps.
Scan Kit automatically detects, magnifies, and recognizes barcodes from a distance, and is also able to scan a very small barcode in the same way. It works even in suboptimal situations, such as under dim lighting or when the barcode is reflective, dirty, blurry, or printed on a cylindrical surface. This leads to a higher scanning success rate, and an improved user experience. Scan Kit can be integrated into both Android and iOS systems. The Android system supports barcode scanning in landscape mode.
Requirements to use Scan Kit:
- Android Studio 3.X
- JDK 1.8 or later
- SDK Platform 19 or later
To able to use Hms Scan Kit, you need to follow some instructions
1- Register as a Huawei Developer
To use these kits, register to Huawei website. You can find information in this link → https://developer.huawei.com/consumer/en/doc/10104
2- Generate a Signing Certificate Fingerprint
In AppGallery Connect, press General Information button.
In below this page, there is a SHA-256 certificate fingerprint area box.
To fill this area, you need to open a new project in Android Studio and press Gradle button in the top right corner. In tasks, android and double clicking to signingReport will generate this SHA-256 key.
This key can be seen in console. After you generated this key, you need to copy and paste to the SHA-256 certificate fingerprint.
Also, copy the signature file generated in Generating a Signing Certificate Fingerprint to the app directory of your project and configure the signature in the build.gradle file.
4- Downloading agconnect-services.json file
In General Information tab, below the page you can see the agconnect-services.json file. In order to use these kits, you need to download this file.
After downloading agconnect-services.json file, paste the to the app root directory.
5- Adding Dependencies
Configure of the Maven repository address for the HMS SDK is required for use Huawei Scan Kit.
AppGallery Connect plug-in dependency has to be added to the file.
Add Scan Kit dependency in build.gradle file in app directory.
After all these steps we are ready to use HMS Scan Kit in our apps.
Development Process:
In this article, we are going to create and read a QR Code with Huawei Scan Kit. We are going to use HMS Scan Kit inside a fragment with compatible with Navigation. We will have one activity and two fragments. Activity will include Navigation and inside of first fragment, we are going to move to Scan Fragment. Inside of scan fragment, scanning operation will be completed.
Add permissions to the Manifest File:
Creating Navigation Graph:
In order to use Navigation, we need to create a navigation layout in res folder.
Creating Main Fragment and Scan Fragment:
Create two blank fragments(Main Fragment and Scan Fragment) and delete all the codes rather than onCreateView method.
XML Structure of Main Fragment:
Initial Kotlin Structure of Main Fragment:
XML Structure of Scan Fragment:
Initial Kotlin Structure of Scan Fragment:
Adding Fragments to Navigation Graph:
Existing fragments can be added to Navigation Graph by clicking New Destination Button.
Main Fragment and Scan Fragment can be in Navigation Graph with clicking new destination button. After adding these fragments, hold and make an arrow to Scan Fragment.
After you create an arrow, in xml code of navigation action tag will be created. This tag will be useful to change fragment to Scan Kit later on.
Navigation Graph XML Code:
Main Activity XML Code:
In main activity, we need to implement the Navigation Graph. After adding navigation graph, the starting fragment(main fragment) will be initialized when opening the app. As it can be seen below, Main Activity has fragment tag included to implement Navigation.
Main Fragment Kotlin File and Navigating to Scan Fragment:
In our main fragment, we have only one button to change fragment to Scan Fragment. We need to use Navigation Controller to use these functions.
As I mentioned earlier, we used action id in navController.navigate(R.id.action_mainFragment_to_scanFragment) method, which changed the Main Fragment to Scan Fragment.
Scan Fragment Kotlin File:
Scan Fragment has only one button that starts the Scan Kit. After the qr code is scanned, result will be received and Toast Message will appear.
We need Defined Code and Request Code Scan to be defined. When the button is clicked, we need to check if the Build Version is greater than Android Marshmallow. If it is greater, we need to ask for the permissions. If the mobile phone’s build version is not greater than Android Marshmallow or if the permissions are granted, we can start to use Scan Kit.
In onActivityResult, we are going to read the QR Code value. In this example, we are going to scan the value with “Test QR” which is already created. After Scanning, a Toast message will appear.
QR Code to Scan:
Even everything seems correct, after scanning the QR code, there is not any toast message displayed.
This problem is casued of onActivityResult method is not triggered inside of the fragment after QR Code is scanned. We need to solve this problem.
Solving OnActivityResult Trigger Problem
1- Create an Interface in MainActivity. (ScanKitActivityResult Interface)
2- Override the onActivityResult method in MainActivity
3- Create a method to set Interface to Fragment
Final MainActivity Kotlin File:
We created an interface in MainActivity which we will implement in Scan Fragment. In this interface,we created onActivityResult which needs the same parameters of original onActivityResult. We created scanKitActivityResult object and equalized to ScanFragment object. In onActivityResult method, we used this object to trigger the onActivityResult method inside of the fragment.
4- Implement ScanKitActivityResult interface.
5- Implement setFragmentListener method.
Final Scan Kit Fragment Kotlin File:
After implementing ScanKitActivityResult interface,we need to implement the onActivityResult method. But we have already implemented this method in our earlier code. We casted activity to MainActivity and used setFragmentListener method in onViewCreated method. This is because when HMS Scan Kit is used, and Toast message is tried to be showed, app would be crashed due to it does not know which Fragment that it is on.
After these implementations, when Scan Kit Fragment is opened, scanKitActivityResult will be equalized to Scan Fragment in onViewCreated method. After QR Code is scanned:
1- Activity’s onActivityResult will be called.
2- Activity’s onActivityResult will call scanKitActivityResult.onActivityResult.
3- Because scanKitActivityResult is a Scan Fragment, it will call Scan Fragment’s onActivityResult method.
4- Toast message will appear successfully.
As it can be seen clearly, Scan Kit can scan QR Codes very easily. There is a link to the github of this project in reference area, if you are interested.
With HMS Scan Kit you can also use your pictures to scan barcodes(with Bitmaps). Detailed information can be find in reference.
Reference:
