·    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

WebView in Android: Display a URL

 

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

 

 

 

  Modified On Mar-13-2018 02:04:38 AM

Leave Comment