Android WebView Example

By | January 28, 2014

Android WebView Allows us to embed web page inside the activity , In this tutorial we will see an example of webview rendering html markups from online resource and also from asset folder of your project.


Lets See An Example

Project Detail

Project Name WebViewDemo
Package com.pavan.webviewdemo
Minimum SDK API 8
Target SDK API 17
Theme Holo Light with Dark Action Bar

1. XML Layout

file: activity_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
    android:layout_width=”fill_parent”
    android:layout_height=”fill_parent”
    android:orientation=”vertical” >

    <WebView
        android:id=”@+id/webview”
        android:layout_width=”fill_parent”
        android:layout_height=”fill_parent” />

</LinearLayout>

2. Activity

1.  Loading URL

You Can Render the HTML markups from either of the three ways inside the onCreate() method of your activity class

         1.a   Loading Page from network.
         1.b   Loading Page from asset.
         1.c  Loading Markup from inside java code.

        1.a Loading Page
        from Network
        1.b Loading page
        from inside asset folder
        1.c Loading Markup from inside java code

          1 a. Loading Page from Network .

              To Load Page from network your need to add Internet Permission inside the AndroidManifest.xml file
               

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

        call the loadUrl() on webview object inside the onCreate() method of your activity class and pass the url as a parameter to it .

        mwebview = (WebView) findViewById(R.id.webview);
        mwebview.loadUrl(“http://www.tutorialsbuzz.com”);

         OR

          1.b  Loading page from inside asset folder .

        file: index.html

        <html>
         <body style=”background-color:#FFBD9D;font-size:16pt”>
          <div>
             welcome to “www.tutorialsbuzz.com”
             <br/>Loading from Asset Folder
          </div>
         </body>
        </html>

        mwebview = (WebView) findViewById(R.id.webview);
        mwebview.loadUrl(“file:///android_asset/index.html”);

        OR

           1.c  Loading Markup from inside java code .

        mwebview = (WebView) findViewById(R.id.webview);

        String data = “<html>” +
           “<body style=’background-color:#FFBD9D;font-size:16pt’>” +
           “<div>Welcome To www.tutorialsbuzz.com</div><br/>Rendering from Markup Code” + “</body>” + “</html>”
           
        mwebview.loadData(data, “text/html”, “UTF-8”);

        2.  WebView Settings

          2.a  Enabling JavaScript

        webSettings.setJavaScriptEnabled(true);

          2.b  Enabling BuiltInZoomControls

        webSettings.setBuiltInZoomControls(true);

        3. Back KeyEvent Press Handling

        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
         if ((keyCode == KeyEvent.KEYCODE_BACK) && mwebview.canGoBack()) {
          mwebview.goBack();
          return true;
         }
         return super.onKeyDown(keyCode, event);
        }

        4. Page Navigation Handling

        file: WebViewClient.java

        package com.pavan.webviewdemo;

        import android.webkit.WebView;

        public class WebViewClient extends android.webkit.WebViewClient {
         @Override
         public boolean shouldOverrideUrlLoading(WebView view, String url) {
          return false;
         }

        }

        Finally The Activity Class Looks Like

        file: MainActivity.java

        package com.pavan.webviewdemo;

        import android.app.Activity;
        import android.os.Bundle;
        import android.view.KeyEvent;
        import android.webkit.WebSettings;
        import android.webkit.WebView;

        public class MainActivity extends Activity {

         WebView mwebview;

         @Override
         protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);

          mwebview = (WebView) findViewById(R.id.webview);
          mwebview.loadUrl(“http://www.tutorialsbuzz.com”);

          WebSettings webSettings = mwebview.getSettings();
          webSettings.setJavaScriptEnabled(true);
          webSettings.setBuiltInZoomControls(true);

          mwebview.setWebViewClient(new WebViewClient());
         }

         @Override
         public boolean onKeyDown(int keyCode, KeyEvent event) {
          if ((keyCode == KeyEvent.KEYCODE_BACK) && mwebview.canGoBack()) {
           mwebview.goBack();
           return true;
          }
          return super.onKeyDown(keyCode, event);
         }

        }