How to bind Javascript code to Android code?

In this post, I will walk you through an interesting topic on how to bind Javascript code to Android code that means you can call Android code from inside Javascript function.

Sounds interesting??

Prerequisite:

You must have the knowledge of Android Webview to understand Android Javascript binding. If you are new to Android Webview I would recommend you to take a look at Android WebView Layout

When developing a web application that’s designed specifically for the WebView in your Android application, you can create interfaces between your JavaScript code and client-side Android code. For example, your JavaScript code can call a method in your Android code to display a Dialog, instead of using JavaScript’s alert() function.

Here are the steps for binding Javascript code to Android code and at end of this article I have provided link to create simple Android application to bind Javascript and Android code.

Step 1: Create a class with set of methods that are to be invoked by Javascript code

Include following class in your Android application whose methods are to be exposed to Javascript code

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

In this example, the WebAppInterface class allows the web page to create a Toast message, using the showToast() method.

Step 2: Bind Javascript and Android code

To bind a new interface between your JavaScript and Android code, call addJavascriptInterface() method, passing it a class instance to bind to your JavaScript and an interface name that your JavaScript can call to access the class.

Syntax of addJavascriptInterface() method

addJavascriptInterface(Object object, String name);

object – the Java object to inject into this WebView’s JavaScript context.
name – the name used to expose the object in JavaScript

You can bind this class to the JavaScript that runs in your WebView with addJavascriptInterface() and name the interface as Android as shown below:

 WebView browser;
 browser=(WebView)findViewById(R.id.webkit);   
 browser.getSettings().setJavaScriptEnabled(true);
 browser.addJavascriptInterface(new WebAppInterface(this), "Android");        
 browser.loadUrl("http://example.com/example1.html");

Step 3: Create HTML code to invoke exposed Android methods

Create example1.html with below html code which will call showToast() method when button is clicked.

<html>
<head>
<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>
</head>
<body>
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
</body>
</html>

When you run this application in Android device or emulator, you can see Toast message saying ‘Hello Android’ when button is clicked.

I have developed simple Android application – Binding JavaScript and Android Code – Example to demonstrate binding of Javascript and Android code.

If you feel this article is helpful and interesting please spread a word about it to your friends and colleagues by sharing the article in Facebook or Twitter.

You are always welcome to provide your comments and feedback from comment box.
Reference
Android Javascript Binding
[pgwriteforus]
[pgfeedback]

Related Articles

Author: Udhay

Share This Post On
468 ad
Join now to get more access to our Android Tutorials

Join now to get more access to our Android Tutorials

Once you Join, you will receive Mail containing latest Android Tutorials once a month !!

I promise I wont spam you !!

You have Successfully Subscribed!

Pin It on Pinterest

Shares