Making Android interacting with Web App

Jul 5, 2017 · 4 min read

Android App and Web App is like two different world, but at times we still have to make them work together. It’s not ideal world, but what has to be done, has to be done.

Sample App (with Code)

For the purpose of this tutorial, I provide an App with an WebView on the top part, and a native Android View at the bottom part. Both have similar view widget, and I pass input text across both of them, as show in the GIF below.

The code could be access from The webApp is basically a JavaScript run HTML page stored in the asset folder (you could get it work with internet loaded webpage as well).

This shows they could communicate with each other. To know how this is done, reads on.

Native App to Web App

For communicate from Native App to Web App, it is relatively simple. You just need to either load the JavaScript using loadUrl from the webView or use the evaluateJavascript function as below.

my_web_view.evaluateJavascript("javascript: " +
"updateFromAndroid(\"" + edit_text_to_web.text + "\")",

It is basically calling a JavaScript function updateFromAndroid(message) that I have defined in my webApp, that is use to update the Text in the WebView.

function updateFromAndroid(message){
nativeText.nodeValue = message;

The evaluateJavascript function also allow some callback, which I didn’t use over here.

Web App to Native App

For communicate back from Web App to native App, we will be doing something more complex. It is basically injecting a JavaScript function into the webApp. To do that, you need to

1. Define a Callback Interface

private inner class JavaScriptInterface {
fun textFromWeb(fromWeb: String) {
txt_from_web.text = fromWeb

Here I have a textFromWeb defined that receive a String to show it on my TextView. You could have more than one callback functions defined in the interface.

2. Add JavaScript Interface in the WebView

my_web_view.addJavascriptInterface(JavaScriptInterface(), JAVASCRIPT_OBJ)

As you have the interface, you could use addJavascriptInterface to add it your webView, and link it with name, which I call JAVASCRIPT_OBJ here.

3. Define a class as hook in your webApp

You need a placeholder where you could inject your function into. Here I defined in the webApp js file as below, placing it in the global window scope

window.androidObj = function AndroidClass(){};

4. Inject your function into the defined hook class object

I use loadUrl to inject a newly define function textToAndroid, that receive a message and call to my (previously provided) JavaScript Interface JAVASCRIPT_OBJ.textFromWeb(message) function.

my_web_view.loadUrl("javascript: " +
"window.androidObj.textToAndroid = function(message) { " +
JAVASCRIPT_OBJ + ".textFromWeb(message) }")

Note also, I perform the injection after the initial webpage loaded i.e. onPageFinished. This is needed to ensure we have all androidObj defined.

5. Make call to the Injected Function

Now within your Javascript, you could make call to textToAndroid(message) accordingly as per your need. In my case, when the button click, I’ll make a call. This will then updated the TextView in my Android’s view.

button.addEventListener ("click", function() {

Additional notes:


Upon exit, we should remember to clean up e.g.

override fun onDestroy() {


In case you need to debug your javascript, you could refers to

It would looks like the normal inspect source chrome browser… Would be handy for many debugging.

Inject Cookies

Also if you like to manually add some cookies, you could do it with

val cookieManager = CookieManager.getInstance()
cookieManager.setCookie(“”, “key=value”)

I hope you don’t have to deal with WebView as much, and have more things done on Native. But if you do, hope this would come handy.

Differences will always exist, but division doesn’t always have to result. ~Beth Moore~

I hope you appreciate this post and it’s helpful for you. Do share with others.

You could check out my other interesting topics here.

Follow me on medium, Twitter or Facebook for little tips and learning on Android, Kotlin etc related topics. ~Elye~


Written by


Learning and Sharing Android and iOS Development

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade