Android WebView Complete Example Tutorial

The WebView class allows you to display web pages as a part of your activity layout. WebView becomes helpful  when your application frequently displays content from online resources.It simplifies task of performing a network request, parsing the data and rendering it in other Android layout. We can directly make HTTP request to an URL and load the returned HTML into WebView.


In this tutorial I am going to demonstrate usage  of WebView.



WebView in Layout :
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/webview"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"/>

Loading Web Page in WebView :

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.google.com");

Loading html file from your SDCard or Assets or RAW folder.
webView.loadUrl("file:///android_res/raw/test.html");//from raw folder
webView.loadUrl("file:///android_asset/test.html");//from asset folder

Loading html String content :

String html="<html><body>Hello <b>Android</b> Web View</body></html>";
webview.loadData(html, "text/html", "utf-8");


Setting Permission on AndroidManifest.xml :

 <uses-permission android:name="android.permission.INTERNET" />

Enabling JavaScript in WebView :
JavaScript is disabled in the webpages loaded in WebView by default.

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Changing the UserAgent in WebView :
If your Web Application is to be used only in your Android application, then you can define a custom user agent string with setUserAgentString(), then query the custom user agent in your web page to verify that the client requesting your web page is actually your Android application.
webSettings.setUserAgentString("CUSTOM_UA");

Overriding Page Navigation so link open within your WebView :
When the user clicks a link from a web page in your WebView, the default web browser opens and loads the destination URL. However, you can override this behavior for your WebView, so links open within your WebView.
To achieve this you need to setWebViewClient to your WebView.

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());
Here MyWebViewClient class 

private class MyWebViewClient extends WebViewClient {
 @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) {
    return true;
}
}
The above class overrides all URL loading and loads them into your WebView.
We can add few codes such as following to make more interactive. Which overrides URL loading for specific host only.

private class MyWebViewClient extends WebViewClient {
 @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) {
   if (Uri.parse(url).getHost().equals("www.example.com")) {
     // do not override; let my WebView load the page
     return false;
   }
 return true;
 }
}

For more topics about WebView , don't forget to visit my posts:





6 comments :

  1. Excellent and concise explanation!

    ReplyDelete
  2. It's nice, thanks.

    ReplyDelete
  3. i am getting error on this line

    "if (Uri.parse(url).getHost().equals("www.example.com"))"

    it says Uri cannot be resolved

    ReplyDelete

Your Comment and Question will help to make this blog better...