Integrating Hybrid App (Cordova) with Native App (Java android app) — Part 1

Problem statement: You have a wonderful application written in one of the hybrid frameworks let's say using Cordova. Now you want to integrate this application with an existing Android application. The integration should be that you should be able to launch the hybrid application from the Native application, and we are not talking about Mobile deep linking. We are talking about opening a hybrid application within the native application so that to the end-user the user experience should be seamless. How would you do it?

Solution: As we already know the hybrid application run in the web view when running on the device. We will be using the same web view to accomplish our task. The only catch will be the web view will be running inside the android application we want to integrate with. This should be pretty easy if you are not using any Cordova plugin. In this case, all you need to do is point to the index.html or the launch HTML page of your application. However, I don't think that your hybrid application is not using any Cordova plugin. So let's see how we tackle this problem.

Step1: Create a simple Cordova application. Just follow the steps mentioned here. Once you have the application ready make sure to add the android platform and the build for android.

Step2: Create a basic java android application by following the steps here.

Once you have the native and hybrid applications ready all we need to do integrate them. So let's see how we can do it.

After the successful build of your hybrid application for the android platform, you should have the assets folder created for you. The path of the assets folder should be “hybridApplication\platforms\android\app\src\main\assets\www”

Now go to your android application and add an assets folder if it is not there already. And just copy the www folder in the android asset folder. This is how your project folder structure should look like.

Now we want to add Cordova functionality to our Java application. Go to build.gradle file and edit it. Under the dependencies section add a dependency for Cordova. At the time of writing, we have framework 9 of Cordova, so I am going to add the same. Hit save and rebuild your project.

implementation 'org.apache.cordova:framework:9.0.0'

Once your project has built without any error go to “MainActivity.java” file and modify the class to extend CordovaActivity instead of AppCompatActivity. Also, replace the onCreate function with the following

@Override
public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    // enable Cordova apps to be started in the background
    Bundle extras = getIntent().getExtras();
    if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
        moveTaskToBack(true);
    }

    // Set by <content src="index.html" /> in config.xml
    loadUrl(launchUrl);
}

Build your project and just launch it on your physical device or emulator. If everything goes okay you should see something like this running. And bammm you got your hybrid app running within a native app.

Will be continuing with adding a plugin in the next post …..

The source code for this example is available at github