Native Android bridging to Ionic Cordova

We need to use native components in hybrid code for different scenarios. We might, for example, not find the hybrid plugin that provides our required functionality. In such case, we need to implement the native functionality and integrate it into our hybrid code.

There are several ways for such integration, depending on the nature of the native element you are accessing and the framework and different technologies you are using in your hybrid app. React Native, as an example, provides React Native Bridge. Or, if you are using Cordova you can create Cordova plugins for such pupose.

In this tutorial we will learn how to integrate native Android code into an Ionic hybrid app by calling native code from JavaScript through the Cordova plugin  we’ll create.

1. Setting up the sample projects

We will first need to prepare our native code as a library to consume it in hybrid app. I created a sample listview library module here for this purpose. You can follow this guide to create a library module from scratch, or to convert your app module into a library.  We will be having the following sample ui  :

we will first launch this native ui from javascript call .Then, the native addItem() function will be invoked through JavaScrpit to add items to a list, that will be parsed later in Ionic ui as follows :

 Then after adding an item from native Android, we will remove an item through JS code by invoking native’s removeItem() to do the work.  

In our case we will be using an IBM MFP Cordova project as sample.
Use the following command to create a blank ionic mfp application :

  cordova create projectName --template cordova-template-mfp

You can build you own IBM MFP cordova sample app, or you can clone this repo for source code. It contains the native library, Ionic sample app, and Cordova plugin code.

If you are new to IBM MFP and want to explore it through this tutorial, you can check my previous tuorial on IBM MFP .

2. Creating a Cordova plugin

As simple as it can be put, a basic cordova plugin is :

1. a plugin.xml file that names the plugin, points to the JS code that assigns platform-specific souce code and  configurations to the project that includes it, and perfoms few other functions. You can learn more about plugin.xml here.

2. a package.json file required by cordova to properly install the plugin. Even though we wont be publishing the plugin to the npm registery and we’ll use it only locally, we still need this file.

3. a myPlugin.js file, or the javascript binding file, which will define the API by which our Ionic Cordova project may interact with this plugin.

4. a myPlugin.java file : with the plugin.xml and plugin.js files defined, we have a sort of an API that will allow our Ionic Cordova code to access the native functionalies and return values. We need to implement that native”  bridge code ” now through myPlugin.java .

We will have then our myPlugin project folder as a www folder including the js binding file, and an src folder for the native (Android or iOS) bridge code, along with the package.json and the plugin.xml files as shown below :

Below is an example of what could myPlugin.js be :

BridgingDemo.js :

cordova.define("com.test.bridgingdemo.BridgingDemo", function(require, exports, module) {
var exec = require('cordova/exec');

exports.getAllItems= function(success, fail) {
        console.log("BrdgingDemo getAllItems() called -- -- ");
        exec(success, fail, PLUGIN_NAME, 'getAllItems', []);
};

exports.removeItem = function(itemCount, success, fail) {
        console.log("BrdgingDemo removeItem() called -- -- ");
        var options = {};
        options.itemCount = itemCount;
        exec(success, fail, PLUGIN_NAME, 'removeItem', [options]);
};

});

The native Android code or our ” bridge code ” will use the Android library we made to use its functionalities. Whatever code we want to use from the Native Android project, we will access through this file given that our project is now a library module.

Below is an example of what could myPlugin.Java be :

 import com.example.ionicnativebridging

 public class BridgingDemo extends CordovaPlugin {

    public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException {
        if(action.equals("removeItem"))
        {
            String itemCount = args.getJSONObject(0).getString("itemCount");
            this.removeItem(callbackContext,itemCount,this.cordova.getActivity());
        }
        else if(action.equals("getAllItems"))
        {
            this.removeAppliance(callbackContext, this.cordova.getActivity());
        }
    return true;
    }


    private boolean removeItem(CallbackContext callbackContext, int itemCount, Context appContext) {
        cordova.getThreadPool().execute(new Runnable() {
            public void run() {
                MyDemoLibrary.remove(itemCount);
                Log.d("D","remove called -- --");
                callbackContext.success();
            }
        });
        return true;
    }

    private boolean  getAllItems(CallbackContext callbackContext, Context appContext) {
        Log.d("D","test -- -- ");
        return true;
    }
    
}
   
}

Check the repo provided above for the full code of our sample Cordova plugin .

3. Calling native code from JavaScript 

In order to call the ” bridge code ” we wrote in myPlugin.java, we have to first install the plugin to our Ionic Cordova project, then perform a simple call of cordova.plugins.myPlugin.removeItem() .

Use the below command to add your plugin :

  cordova plugin add ..\myPlugin\

Use the below call to test your plugin through the  Cordova app :

cordova.plugins.myPlugin.removeItem(someItemCount, function(result) {
      console.log('call succeded');
    }, function(err) {
      console.log('error -- -- '+error);
    });

Before closing up I need to mention that the use of MFP for this tutorial came from the simplified possibility of launching native screens from cordova apps provided by the WL.NativePage.show() API  ( which can be altered for other methods ofcourse ). Once you clone and launch the sample app, you will see that we are launching a Native UI from Cordova through the following call :

WL.NativePage.show('com.example.ionicnativebridging.MainActivity',
            function () {
                //
            }, null);

There is always different ways to do things ! But this is the simplest I could put ” creating cordova plugins ” and ” hybrid to native bridging ” in !

Please comment here or email me for questions or tutorials requests . 🙃

1

Error happened.