Developing an Android application with Android Studio and in a need to talk to an HTML/web component? Then this article is for you. It gives a step by step description of how to add any web component into your application. We show how to communicate with it in the same language that you use for the native part of your application.
Let’s get started…
Setting the Project up
First of all you need Android Studio (can be downloaded from here). At the time of writing this tutorial version of 2.3.1 of Android Studio was used. The steps shall however be general enough to be applicable to any version. Let’s create a new project with an empty activity:
Let’s put two buttons, one text area and most importantly a WebView component to the activity:
So far we’ve been using standard Android Studio tools. Now the time has come to turn the WebView into chart renderer. To do so, let’s use the DukeScript Presenter for Android and the charts library. Select File/Project Structure menu item and in the Dependencies tab add these two libraries as shown on following picture:
The project setup is finished. Now we can start writing the real application code.
First of all we need an HTML page to be displayed in the WebView. The page doesn’t have to be complex - it can contain just a single <canvas> element that will span over the area of a WebView.
Create assets directory. Right click app, choose New/Folder/Assets Folder and create your HTML file in that folder. Call it chart.html and put the following content to it:
Prepare the WebView for Java Access
The next step is to load the page into our WebView component and initialize the view
for access from Java. This is done in the
onCreate method of our
The configure method
initiates loading of the provided HTML page and returns
Executor that can be used to modify content of the page from Java
any later time. Let’s store it in a field called
Modify the HTML Content
There can be multiple WebView components in each activity. When using any API that needs
access to the HTML context, it is important to select the WebView one
intents to work with.
This is done by using the previously returned
The example is using the Charts API for Java
provided as one subproject of the whole DukeScript effort. First of all we use the
onWeb instance of
Executor associated with our
to enter the right context. Then we create new instance of bar chart (other types of charts
like line, pie, doughnut, radar, polar are also available as the
We prepare some initial values and add them to the chart. Then we bind the chart
to an existing <canvas> element on the page using
That’s it. When you execute your application, you shall see the chart taking most of your screen.
Reacting to Events
Showing static HTML content is a nice initial step, but of course, the goal is to make it live. The android activity we designed contains two buttons - let’s connect them with the chart!
This is a typical Android code. It locates your component and attaches a listener to it. When the click is triggered, it accesses the data of existing chart and modifies them by increasing either left or right column in the chart.
Reacting to Web Component Events
Of course, not only native Android components influence the web components. In a real application web components can also influence the native ones. Here is an example showing how that can be achieved:
When creating your
chart, you can attach a listener to it. It gets triggered when
a click on the chart is detected and is called back with an event object providing information about
the location of the click. In response of such click, we can locate our text view (another native
component) and change its text property.
There is a lot of innovation happening in the HTML landscape. DukeScript project gives you access to all of that from inside of your Android application and while using the same language that you use for the rest of your application.
Where to go from here?
Check the Android.configure documentation to understand possible embedding alternatives.
Read the overview javadoc page to see available Java APIs that have already been prepared and documented by the DukeScript documentation project. Choose from charts, maps, JQuery, knockout, canvas, SVG, and more…
Get the sources of here-in presented application, clone, fork, enhance. See the GitHub project.
Enjoy web components inside of your Android app done the proper Java way!