Skip to content
Related Articles
Open in App
Not now

Related Articles

Android WebView with JavaScript Interface

Improve Article
Save Article
Like Article
  • Last Updated : 30 Sep, 2022
Improve Article
Save Article
Like Article

JavascriptInterface Annotation provides the facility to create any method as the javascript Interface which means that method can be used by web components to communicate with Android. For example:

  1. To store the web-based data in Android Shared Preference, or in a local Database.
  2. To show a customized dialog box. 
  3. Storing the web content in Android Clipboard
  4. Sharing web content in various applications of Android etc.

So to understand this concept let’s create a small project where the user would be entering the basic details and that details would be shown in Android’s Dialog box. For this article, we will be using the concept of WebView.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to app > res > layout > activity_main.xml and add the below code to it. Comments are added in the code to get to know in detail. 


<?xml version="1.0" encoding="utf-8"?>

Here we have added WebView to our layout file. now we need to load a URL in this WebView, so here we are creating a simple HTML file that would be locally stored in the Assets folder of the Android project.

Step 3: Creating a HTML file



   <body bgcolor="red">
         <input id="fname" type="text" placeholder="enter your name"/>
         <input id="pswd" type="text" placeholder=" password"/>
         <button onclick="msg();">onclick</button>
      function msg(){
          var fname=document.getElementById("fname").value;
          var pswd=document.getElementById("pswd").value;
          // Dialog is javascript interface name
          // mentioned in Mainactivity.Java

Step 4: Working with the MainActivity file 

Navigate to app > java > your app’s package name > MainActivity file and add the below code to it. Comments are added in the code to get to know in detail. In this Java file, we need to enable JavaScript for the WebView and to add the javascript interface we need to provide the class name as we are adding this in the same file so we are using “webView.addJavascriptInterface(this, “Dialog”);” 


package com.geeksforgeeks.jsinterface;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    WebView webView;
    protected void onCreate(Bundle savedInstanceState) {
        webView = findViewById(;
        // opening the html file in webview
        webView.addJavascriptInterface(this, "Dialog");
    public void showMsg(String fname, String pswd) {
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Confirmation").setMessage("UserName:\t" + fname +
                        "\nPassword:\t" + pswd)
                .setPositiveButton("Ok", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialogInterface, int i) {
                        Toast.makeText(getApplicationContext(), " Data Saved Locally", Toast.LENGTH_SHORT).show();
                        // You can use shared preference or db here to store The Data

So here when the user clicks on the button of the webpage it will call the showMsg() of Android and from that method dialog box would be shown to the user. here we can save the details in the local database or we can perform various tasks by accessing the web content in android this can be done in a more dynamic way. as per the requirement.


User Input

User Input

Data parsing

Success Message

Success Message

My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!