Wednesday, October 20, 2010

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.

13 comments:

  1. 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.

    ReplyDelete
  2. dude u know anything about webview android ?

    i need to use a webpage http://gothere.sg/api/maps/getting-started.html

    but when i run my emulator is always show me that the folder is not there


    loaddata("file:///andriod_asset/...html")

    is it because i need 2 file instead of 1 ?

    the file include html and javascript

    thanks

    ReplyDelete
  3. My Own variant of a custom WebBrowser using the webview: http://www.pocketmagic.net/?p=1776

    ReplyDelete
  4. hi,

    Thanks for thanks for the valuable information ..
    i had to develop my application to select and copy text from webview in to a file..
    please suggest how to implement it..
    Thanks,
    Ayrina

    ReplyDelete
  5. Hi
    I am getting success in calling javascript from my java code but it happens at only first time. it doesn't get called never again

    ReplyDelete
    Replies
    1. 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 ?

      Delete
  6. Hi Kapil,

    It shouldn't be an issue. You might be doing something different.

    ReplyDelete
  7. Hi Kumar,

    Thanks for posting this article. It has helped me alot! :)

    Regards

    Stig Andersen
    Denmark :-)

    ReplyDelete
  8. css and html file is ok but how to aplly css and html file in android ????

    ReplyDelete
    Replies
    1. What you mean "css and html file in android" ???
      You need create, for example two files: index.html and styles.css. Then add they to your webView!

      Delete
  9. Sir/Madam css and html file is ok but how to apply css and html file in android ??

    ReplyDelete
  10. I have some issue. I create android app and create some html pages, but when i try call java method from js in which i call js method my programm down. Any ideas?
    Thnx!

    ReplyDelete