Javascript Interface for Android and Javascript communication

The following is an example of two way communication between Android code and Javascript in a WebView.

Enable internet permission and register the WebViewActivity class

<uses-permission android:name="android.permission.INTERNET"/>

<activity android:name=".WebViewActivity"/>

The layout for the WebViewActivity class

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android=""
    android:layout_height="fill_parent" />

The for communcating between Android and javascript.

import android.content.Context;
import android.os.Build;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class WebAppInterface {
    Context mContext;

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

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

    public int getAndroidVersion() {
        return android.os.Build.VERSION.SDK_INT;

    public void showAndroidVersion(String versionName) {
        Toast.makeText(mContext, versionName, Toast.LENGTH_SHORT).show();


The WebView class

import android.os.Bundle;
import android.util.Log;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebViewActivity extends AppCompatActivity {

    protected void onCreate(Bundle savedInstanceState) {

        WebView webView = (WebView) findViewById(;

        webView.addJavascriptInterface(new WebAppInterface(this), "AndroidInterface"); // To call methods in Android from using js in the html, AndroidInterface.showToast, AndroidInterface.getAndroidVersion etc
        WebSettings webSettings = webView.getSettings();
        webView.setWebViewClient(new MyWebViewClient());
        webView.setWebChromeClient(new MyWebChromeClient());

    private class MyWebViewClient extends WebViewClient {
        public void onPageFinished (WebView view, String url) {
            //Calling a javascript function in html page
            view.loadUrl("javascript:alert(showVersion('called by Android'))");

    private class MyWebChromeClient extends WebChromeClient {
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            Log.d("LogTag", message);
            return true;

The html file in assets folder, index.html

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


      body, html {
        height: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #F89821;
        background-color: #ffffff;
        padding: 20px;
        margin-bottom: 100px;

      <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
      <input type="button" value="Show Version" onClick="showVersion('called within the html')" />
      <p id="version"></p>
      <script type="text/javascript">
        <!-- Sending value to Android -->
        function showAndroidToast(toast) {

        <!-- Getting value from Android -->
        function showVersion(msg) {
            var myVar = AndroidInterface.getAndroidVersion();
            document.getElementById("version").innerHTML = msg + " You are running API Version " + myVar;

Search within Codexpedia

Custom Search

Search the entire web

Custom Search