Android WebView, Javascript and CSS

Using WebViews on Android is pretty interesting. I have come across some situations where I had to use a WebView to display some HTML content. Displaying HTML content is pretty straight-forward. But when it comes to controlling the web view, it gets a little complex. Things like showing alerts, manipulating divs and controlling the activity (closing/finishing). This example shows a few techniques that will get you going with Javascript and CSS with WebView.

1. CSS: Applying CSS is just the same as you would do with normal HTML pages. The sample_page.html in the assets folder refers to the sample_style.css file in the same folder. One thing you might notice is how we get the rounder corners for the divs. This CSS attribute does the trick.

             -webkit-border-radius: 5px;

2. Javascript: To make it simpler, I have used the JQuery library. The mobile version released recently gave some errors. So, I have used the normal library available. The jquery-1.4.2.min.js also resides in the assets folder and is referenced in the sample_page.html.

3. All together: In the sample_page.html I have a header, a body and the controls. The controls have four buttons
      a: JToggle: This toggles the visibility of the body section. This is a pure javascript method call from the html.
      b: NToggle: This also toggles the visibility of the body section. But it does it differently. The javascript calls to the method, which in turn calls the same Javascript method.
      c. Exit: This button basically closes/exits the app, by calling the method which is bound to the via
      d. Alert: This shows an alert which is basically an AlertDialog in Android.

Calling a Javascript method from your Java code:

Calling a Java method from Javascript:
  // Before using the above code, you have to inject the interface object which
  // has a name “jsinterface”
  webView.addJavascriptInterface(jsInterface, “jsinterface”);

Controlling the Alerts from Javascript:
The which extends the WebChromeClient has several methods which provide hooks which allow you to customize their behaviour. For an example, you can override the behaviour of the alert function and do whatever you want. You can show your own dialog with Yes/No buttons and depending on the input, you can send back the result to your Javascript code.
 public boolean onJsAlert(WebView view, String url, String message, JsResult result)
     url = “Sample App Alert”;
     return super.onJsAlert(view, url, message, result);

You can checkout the whole source code here. It’s ready to run. Let me know if you have any issues.