If you want to deliver a web application (or just a web page) as a part of a client application, you can do it using WebView. The WebView class is an extension of Android's View class that allows you to display web pages as a part of your activity layout. It does not include any features of a fully developed web browser, such as navigation controls or an address bar. All that WebView does, by default, is show a web page. It can load a page from the internet or from your assets

 

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.

 

Step 1 

 

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

 

Create a Custom Extended web view as below :

 

Caution: If you've set your targetSdkVersion to 17 or higher, you must add the@JavascriptInterface annotation to any method that you want available to your JavaScript (the method must also be public). If you do not provide the annotation, the method is not accessible by your web page when running on Android 4.2 or higher.

 

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

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

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
public class BridgeWebView extends WebView {

    public BridgeWebView(Context context) {
        super(context);
        init(context);
    }

    public BridgeWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public BridgeWebView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }

    private void init(Context context) {
        this.setWebViewClient(new WebViewClient());
        this.addJavascriptInterface(new CSWebAppInterface(context), "jb");
        this.getSettings().setJavaScriptEnabled(true);
        this.loadUrl("file:///android_asset/jsbridge.html");
    }

    public class CSWebAppInterface {

        Context context;

        CSWebAppInterface(Context c) {
            context= c;
        }

        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(context, toast, Toast.LENGTH_SHORT).show();
        }

    }
}

 

 

Step 2

 

Open xml, of your main activity now you can view the layout as either XML or in graphical view and just replace the XML with below one:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <com.sayone.androidjsbridge.BridgeWebView
        android:id="@+id/webview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

 

 

Step 3

 

Open your main activity and paste the below code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
public class MainActivity extends Activity {
    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView= (BridgeWebView) findViewById(R.id.webview);
        getWindow().setFeatureInt(Window.FEATURE_PROGRESS,
                Window.PROGRESS_VISIBILITY_ON);
    }
}

 

 

Step 4

 

 Here is the Javascript code which invokes Android methods using the interface name ‘jb’. The interface ‘jb’ was created using method ‘addJavascriptInterface()’ by injecting the Class WebAppInterface.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; user-scalable=0;" />
    <title>Webview</title>

    <h1>JS Bridge</h1>
</head>
<body>
<input type="button" value="Call Function"
       onClick="showAndroidToast('Welcome!')" />

<script language="javascript">
  function showAndroidToast(toast) {
   jb.showToast(toast);
 }
</script>

</body>
</html>

 

Source Code 

 

Subscribe to our newsletter. Get updates on awesome happenings in the technology world!
Newsletter subscription successfull! Something went wrong! Email is already registered!

TAGS