Android WebView, Javascript and CSS

      14 Comments on 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 JSInterface.java method, which in turn calls the same Javascript method.
      c. Exit: This button basically closes/exits the app, by calling the JSInterface.java method which is bound to the HomeActivity.java via OnExitAppListener.java
      d. Alert: This shows an alert which is basically an AlertDialog in Android.

Calling a Javascript method from your Java code:
webView.loadUrl(“javascript:jsToggle()”);

Calling a Java method from Javascript:
window.jsinterface.nativeToggle();
/*
  // 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 SampleChromeClient.java 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.
 @Override
 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.

14 thoughts on “Android WebView, Javascript and CSS”

  1. prerna

    Hi,
    I have to make use of HTML,CSS & JavaScript into creating a Android widget. Help me out in developing this and provide information that weather this is possible or not.

    Prerna.

    ↓
    1. Anonymous

      Hi ! Have you figure out this problem ? if you did , please tell me how . i execute some javascript after i load one page in the fuction of onPageFinished(WebView view, String url),and then i need to do some other things , and after that i come back to the webview ,but how and where can i execute the rest of javascript ?

      ↓

  11. Pingback: Android WebView doesn't load jQuery - DexPage

Leave a Reply