Cordova Plugin with Android AAR File for Barcode

Cordova is a mobile application development framework that enables developers to build Android, iOS and Windows Phone apps using HTML5, JavaScript, and CSS3. It uses web views to render UI elements instead of the platform’s native UI framework. Cordova can be extended to add more functionalities with plugins. There are many learning resources of Cordova plugin on GitHub. In this article, I want to share how to make a Cordova barcode plugin with a third-party Android library, an AAR file, step by step.

Environment

Cordova for Android

Initialize a new project:

cordova create simplebarcode com.dynamsoft.simplebarcode SimpleBarcode

Add Android platform:

cd simplebarcode
cordova platform add android --save

Add a button to simplebarcode\platforms\android\assets\www\index.html:

<body>
  <div class="app">
    <div id="deviceready">
      <button id="scan">scan barcode</button>
    </div>
  </div>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>

Build and run the app:

cordova android

Cordova Plugin with Android AAR File

A Cordova plugin for barcode scanning is available on GitHub. The plugin depends on barcodescanner-release-2.1.2.aar that built with ZXing - the open source barcode recognition library. What I want to do is to rebuild the plugin with Dynamsoft Barcode Reader for Android.

Here is the look of Cordova plugin folder:

- src/
  - android/
    - *.java
    - *.aar
    - *.gradle
- www/
    - *.js
- plugin.xml

Open src\android\com\phonegap\plugins\barcodescanner\BarcodeScanner.java. Invoke Activity DBR wrapped in dbr.aar within function scan():

public void scan(final JSONArray args) {
        final CordovaPlugin that = this;
        cordova.getThreadPool().execute(new Runnable() {
            public void run() {
                Intent intentScan = new Intent(that.cordova.getActivity().getBaseContext(), DBR.class);
                intentScan.setAction("com.dynamsoft.dbr");
                // avoid calling other phonegap apps
                intentScan.setPackage(that.cordova.getActivity().getApplicationContext().getPackageName());
                that.cordova.startActivityForResult(that, intentScan, REQUEST\_CODE);
            }
        });
    }

The project depends on dbr.aar and DynamsoftBarcodeReader.aar, therefore, add them to barcodescanner.gradle:

dependencies {
    compile 'com.android.support:support-v4:+'
    compile(name:'dbr', ext:'aar')
    compile(name:'DynamsoftBarcodeReader', ext:'aar')
}

Configure Activity, Permission and resource files in plugin.xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<plugin xmlns="http://www.phonegap.com/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android" id="phonegap-plugin-barcodescanner" version="6.0.5">
  <name>BarcodeScanner</name>
  <description>Use Dynamsoft Barcode Reader plugin to scan different types of barcodes.</description>
  <license>MIT</license>
  <engines>
    <engine name="cordova" version=">=3.0.0"/>
  </engines>
  <js-module src="www/barcodescanner.js" name="BarcodeScanner">
    <clobbers target="cordova.plugins.barcodeScanner"/>
  </js-module>
  <platform name="android">
    <source-file src="src/android/com/phonegap/plugins/barcodescanner/BarcodeScanner.java" target-dir="src/com/phonegap/plugins/barcodescanner"/>
    <config-file target="res/xml/config.xml" parent="/*">
      <feature name="BarcodeScanner">
        <param name="android-package" value="com.phonegap.plugins.barcodescanner.BarcodeScanner"/>
      </feature>
    </config-file>
    <config-file target="AndroidManifest.xml" parent="/manifest/application">
      <activity android:name="com.dynamsoft.demo.dynamsoftbarcodereaderdemo.DBR" android:clearTaskOnLaunch="true" android:configChanges="orientation|keyboardHidden|screenSize" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" android:windowSoftInputMode="stateAlwaysHidden" android:exported="false" />
    </config-file>
    <config-file target="AndroidManifest.xml" parent="/manifest">
      <uses-permission android:name="android.permission.CAMERA"/>
      <uses-permission android:name="android.permission.FLASHLIGHT"/>
      <uses-feature android:name="android.hardware.camera" android:required="true"/>
    </config-file>
    <framework src="src/android/barcodescanner.gradle" custom="true" type="gradleReference"/>
    <resource-file src="src/android/dbr.aar" target="libs/dbr.aar"/>
    <resource-file src="src/android/DynamsoftBarcodeReader.aar" target="libs/DynamsoftBarcodeReader.aar"/>
    <dependency id="cordova-plugin-compat" version="^1.0.0"/>
  </platform>
</plugin>

Add the plugin to Cordova project:

cordova plugin add <plugin folder>

Add button event to trigger barcode scanning in simplebarcode\platforms\android\assets\www\js\index.js:

onDeviceReady: function() {
  document.getElementById("scan").onclick = function() {
    cordova.plugins.barcodeScanner.scan(
      function (result) {
        alert("We got a barcode\n" +
              "Result: " + result.text + "\n" +
              "Format: " + result.format + "\n" +
              "Cancelled: " + result.cancelled);
      },
      function (error) {
        alert("Scanning failed: " + error);
      },
      {
        "preferFrontCamera" : false, // iOS and Android
        "showFlipCameraButton" : true, // iOS and Android
      }
    );
  }
  this.receivedEvent('deviceready');
},

Build and run the barcode reader app:

cordova plugin android barcode

cordova barcode reader result

Source Code

https://github.com/dynamsoft-dbr/cordova-plugin-android-barcode