·    WebView is a view widget that can be embedded in any layout to display web content, both local and remote, in your application.

·    WebView is based on the same open source WebKit technology that powers the Android Browser application, affording applications the same level of power and capability.

·   WebView has some very desirable properties when displaying assets downloaded from the Web, not the least of which are two-dimensional scrolling (horizontal and vertical at the same time) and zoom controls.

·    A WebView can be the perfect place to house a large image, such as a stadium map, in which the user may want to pan and zoom around. Here we will discuss how to do this with both local and remote assets

Pre-Requisites:

1.       Ellipse SDK

2.       Android SDK

3.       ADT plugin

Or Android Studio and a compatible version of JAVA SDK

Install and configure the above utilities.

Now create a new Android project namely “WebViewSample”.

Implementation objective:

Displaying an HTML page or image by supplying the URL of the resource to the WebView

Code Implementation:

Display a URL

The simplest case is displaying an HTML page or image by supplying the URL of the resource to the WebView. The following are a handful of practical uses for this technique in your applications:

·    Provide access to your corporate site without leaving the application.

·   Display a page of live content from a web server, such as an FAQ section, that can be changed without requiring an upgrade to the application.

·   Display a large image resource that the user would want to interact with using pan/zoom.

Now we see how to loads a very popular web page inside the content view of an activity instead of within the browser  

Now navigate toMainActivity.java and add this code:

package com.example.webviewsample;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebView;

public class MainActivity extends Activity {
                @Override
                protected void onCreate(Bundle savedInstanceState) {
                                super.onCreate(savedInstanceState);
                                setContentView(R.layout.activity_main);
                                //Create a webview 
                             WebView webView = new WebView(this);
                                // Enable JavaScript support
                                webView.getSettings().setJavaScriptEnabled(true); 
                             //Load URL in web view
                                webView.loadUrl("http://www.google.com/");                              //set webview in UI
                                setContentView(webView); 
                } 
                @Override
                public boolean onCreateOptionsMenu(Menu menu) { 
                                // Inflate the menu; this adds items to the action bar if it is present.                                 getMenuInflater().inflate(R.menu.main, menu);                                 return true; 
                } 
}

Note: By default, WebView has JavaScript support disabled. Be sure to enable JavaScript in the WebView.WebSettings object if the content you are displaying requires it. 

Important: If the content you are loading into WebView is remote, AndroidManifest.xml must declare that it uses the android.permission.INTERNET permission.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.webviewsample"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.webviewsample.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Running the application:

Hit on run button,

Google Website (URL) will be loaded and displayed inside the Web view in our app

Next, we see how to implement local assets to display in webview and use zooming feature in webview :

WebView in Android: Display Local Assets

Thanks for reading this post.

Happy Coding!!J