[Android] Combining native and web controls in Cordova based applications
AntonAleksandrov 270005D80F Visits (12253)
(This is a second part of the "Combining native and web controls in Cordova based applications". First part applies to iOS application and can be found here - http
In my previous post I've described some technical details regarding Android Cordova/Worklight based application architecture from a native views stack perspective and demonstrated a technique allowing to manipulate this view stack in order to integrate native controls with web based ones. As a reminder - though information below applies to pure Cordova apps as well it will be given in a context of Worklight based application.
Apache Cordova allows you to build mobile applications without any (or very minimal) native coding. In order to understand how this is possible lets try to understand several (but definitely not all) components that Cordova application consists of. The following image depicts the essence of a Cordova based application.
On the other hand - what if you want your application to be even more hybrid? For example having both native and web controls on a same screen? Something like this
On a picture above, the top part of the app (highlighted with green) is purely native. It is using native header from Holo theme and native Button controls. The bottom part (highlighed with blue), however, is purely web.
In order to understand how this is implemented lets first take a look at what the Cordova based app view stack actually consists of.
Android application screen is implemented using an Activity clas
During application initialization the Android OS creates a Cordova/Worklight based Activity as specified in Andr
Developer can put additional native views to the above LinearLayout, e.g. Buttons. All of those views are called children views and they can be reached programatically by invoking getChildAt() API.
As described above, in Cordova based applications the only native view that is put on top of the LinearLayout is an instance of CordovaWebView (which is a subclass of WebView). Note that this is done programmatically.
The thing we want to do in this demo is actually change default application layout to what is shown below
This means three things
2. Add native controls to the top part of the screen
1. Resize CordovaWebView so it wouldn't take the whole screen (this, in fact, will be done automatically by Android OS)
3. Implement communications between native and web controls
Ok, now that we know what we're trying to achieve we can start going into more technical and implementation details. First of all, from the code perspective this is how the application architecture will look like.
Native code consists of
1. Application native code - the one that handles native application behaviour, native controls, e.g. Button or Activity
2. MyNativeBridge Cordova plugin code - the native piece of Cordova plugin that will be responsible for bridging between native and hybrid
Let's examine the main flows that we're interested in. First one is an application startup.
First thing we want to do on an application startup is to prepare our native UI layout. This will be done in the main application Activity by using native code.
Let's see what is going to happen once native event has occurred.
I'm giving some additional explanation about the above architecture in iOS blog post video. See the video at very bottom of http
The video below is shows the complete implementation of the above functionality on the Android platform. It is highly recommended to view this video in HD quality (at least 720cc)
(A little something I forgot to mention in the video is that you need to add <preference name="ShowTitle" value="true"/> to the Cordova's config.xml file in order to make top Title bar visible)
Sample code can be downloaded from GitHub -