Friend Share, A new way to add friends featuring Huawei Scan Kit

HUAWEI Scan Kit scans and parses all major 1D and 2D barcodes and generates QR codes, helps us quickly to build barcode scanning functions into our apps.

Scan Kit automatically detects, magnifies, and recognizes barcodes from a distance, and also to scan a very small barcode in the same way. It works even in sub-optimal 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.

  1. Ordering Food
  2. View Product Information
  3. Making Payments
  4. Registering For Events
  5. Connecting to WiFi networks
  6. Adding Contacts
  7. Opening Websites
  8. Finding Location
  1. EAN-8
  2. EAN-13
  3. UPC-A
  4. UPC-E
  5. Codabar
  6. Code 39
  7. Code 93
  8. Code 128
  9. ITF
  10. QR code
  11. Data Matrix
  12. PDF417
  13. Aztec

In this article we will learn how to generate QR Code and add our friends into our contact list using Huawei Scan Kit.

  1. Must have a Huawei Developer Account
  2. Must have a Huawei phone with HMS 4.0.0.300 or later
  3. Must have a laptop or desktop with Android Studio , Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
  1. First we need to create a project in android studio.
  2. Get the SHA Key. For getting the SHA key, refer to this article.
  3. Create an app in the Huawei app gallery connect.
  4. Provide the SHA Key in App Information Section.
  5. Provide storage location.
  6. After completing all the above points we need to download the agconnect-services.json from App Information Section. Copy and paste the json file in the app folder of the android project.
  7. Copy and paste the below class path inside the dependencies of buildscript (project build.gradle file)
classpath 'com.huawei.agconnect:agcp:1.3.1.300'

8. Copy and paste the below maven url inside the repositories of buildscript and allprojects (project build.gradle file)

maven {url 'http://developer.huawei.com/repo/'}

9) Copy and paste the below plugin in the app build.gradle file dependencies section.

implementation 'com.huawei.hms:scan:1.1.3.301'

10) If the project is using progaurd, copy and paste the below code in the progaurd-rules.pro file.

-ignorewarnings
-keepattributes *Annotation*
-keepattributes Exceptions
-keepattributes InnerClasses
-keepattributes Signature
-keepattributes SourceFile,LineNumberTable
-keep class com.hianalytics.android.**{*;}
-keep class com.huawei.updatesdk.**{*;}
-keep class com.huawei.hms.**{*;}

11) The HUAWEI Ads SDK requires the following permissions:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

Now sync the app.

In this demo, user will login with Huawei Id. After that user will edit profile and save it to generate QR code. Once QR code is generated user can download or share the code to his/her friends to add him/her in user list using this app. Now, if user wants to add his/her friends, then user needs to get friends QR code and scan the code to add in his/her list.

  1. Required content to generate QR code.
JSONObject objContent = new JSONObject();
objContent.put("name", edtName.getText().toString());
objContent.put("phone", edtPhone.getText().toString());
objContent.put("email", edtEmail.getText().toString());
objContent.put("image",Utility.getUserImage(this));
String content = objContent.toString();

2. Need to set width and height, and specify the barcode format.

int type = HmsScan.QRCODE_SCAN_TYPE;
int width = 500;
int height = 500;

3. Need to initialize HmsBuildBitmapOption and set optional parameters.

The optional parameters are as follows:

a) setBitmapBackgroundColor(): Set the background color of a barcode. If we do not call this API, white is used by default.

b) setBitmapColor(): Set the barcode color. If we do not call this API, black is used by default.

c) setBitmapMargin(): Set the border width of a barcode. If we do not call this API, the default border width 1 is used.

HmsBuildBitmapOption options = new HmsBuildBitmapOption.Creator()
.setBitmapBackgroundColor(Color.WHITE)
.setBitmapColor(Color.BLACK)
.setBitmapMargin(3).create();

4. Need to call the buildBitmap API to generate a barcode.

Bitmap qrBitmap = ScanUtil.buildBitmap(content, type, width, height, options);

In this way, we can generate QR code. After generating the code we can download or share to anyone to add you in their friend list.

In this article, Customized View mode is used in order to scan QR Code. In Customized View mode, we do not need to worry about developing the scanning process or camera control. Scan Kit will do all these tasks for us. However, we need to design the scanning UI.

  1. Need to create a XML layout where we will design our scanning UI.
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:my_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- customize layout needed by scankit for camera preview -->
<FrameLayout
android:id="@+id/rim"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#C0C0C0"></FrameLayout>
<!-- customize back button view -->
<ImageView
android:id="@+id/back_img"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentStart="true"
android:layout_marginStart="12dp"
android:layout_marginTop="4dp"
android:gravity="center"
android:padding="12dp"
android:src="@drawable/back" />
<!-- customize scanning mask -->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:alpha="0.1"
android:background="#FF000000" />

<!-- customize scanning viewfinder -->
<ImageView
android:id="@+id/scan_view_finder"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:background="@drawable/scanningframe" />
</RelativeLayout>

We also need a scanning frame in the middle and set that scanning frame as background in scan_view_finder image as shown in the above code.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="3dp" android:color="#e1ffff"/>
<solid android:color="#1f00BCD4"/>
<corners android:radius="5dip"/>
<padding
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
</shape>

2. Create a ScaningActivity class and get screen density to calculate viewfinder’s rect. Here SCAN_FRAME_SIZE is 300.

DisplayMetrics dm = getResources().getDisplayMetrics();
float density = dm.density;

mScreenWidth = getResources().getDisplayMetrics().widthPixels;
mScreenHeight = getResources().getDisplayMetrics().heightPixels;

int scanFrameSize = (int) (SCAN_FRAME_SIZE * density);

3. Calculate viewfinder’s rect, it is in the middle of the layout. Set scanning area (Optional, rect can be null, if not configure, default is in the center of layout).

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;

4. 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 it can be slightly smaller than the scanning area.

Now, initialize RemoteView instance, and set calling back for scanning result. Set the barcode formats we want Scan Kit to support. Here we have used ALL_SCAN_TYPE as format. This format will support for all codes.

RemoteView remoteView = new RemoteView.Builder().setContext(this).setBoundingBox(rect).setFormat(HmsScan.ALL_SCAN_TYPE).build();
remoteView.onCreate(savedInstanceState);
remoteView.setOnResultCallback(new OnResultCallback() {
@Override
public void onResult(HmsScan[] result) {
//judge the result is effective
if (result != null && result.length > 0 && result[0] != null && !TextUtils.isEmpty(result[0].getOriginalValue())) {
Intent intent = new Intent();
intent.putExtra(SCAN_RESULT, result[0]);
setResult(RESULT_OK, intent);
ScanningActivity.this.finish();
}
}
});

5. Add remoteView to framelayout.

FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
FrameLayout frameLayout = findViewById(R.id.rim);
frameLayout.addView(remoteView, params);

6. Manage remoteView lifecycle.

@Override
protected void onStart() {
super.onStart();
remoteView.onStart();
}

@Override
protected void onResume() {
super.onResume();
remoteView.onResume();
}

@Override
protected void onPause() {
super.onPause();
remoteView.onPause();
}

@Override
protected void onDestroy() {
super.onDestroy();
remoteView.onDestroy();
}

@Override
protected void onStop() {
super.onStop();
remoteView.onStop();
}

7. Check for camera and storage permission.

@Override
public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
if (permissions == null || grantResults == null || grantResults.length < 2 || grantResults[0] != PackageManager.PERMISSION_GRANTED || grantResults[1] != PackageManager.PERMISSION_GRANTED) {
return;
}

if (requestCode == DEFINED_CODE) {
//start your activity for scanning barcode
this.startActivityForResult(new Intent(this, ScanningActivity.class), REQUEST_CODE_SCAN);
}

}

8. Create onActivityResult method in order to get result after QR code is scanned and save the result in a list.

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
//receive result after your activity finished scanning
super.onActivityResult(requestCode, resultCode, data);
if (resultCode != RESULT_OK || data == null) {
return;
}
if (requestCode == REQUEST_CODE_SCAN) {
HmsScan hmsScan = data.getParcelableExtra(ScanningActivity.SCAN_RESULT);
if (hmsScan != null && !TextUtils.isEmpty(hmsScan.getOriginalValue())) {

try {
JSONObject jsonObj = new JSONObject(hmsScan.getOriginalValue());
ArrayList<Friends> friendList = new ArrayList<>();
friendList.add(new Friends(jsonObj.get("name").toString(),jsonObj.get("phone").toString(),jsonObj.get("email").toString(),jsonObj.get("image").toString()));
friendsHelper.insertAllFriends(friendList);
showList();
} catch (JSONException e) {
e.printStackTrace();
}

}
}
}

Coming Soon…

  1. https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/service-introduction-0000001050041994
  2. https://developer.huawei.com/consumer/en/codelab/ScanKit/index.html#0

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store