In previous post, we learn what a Webview is and how to display an html URL in webview: WebView in Android: Display a URL. Here we see how to use local assets like images, html codes in webview

WebView is also quite useful in displaying local content to take advantage of either HTML/CSS formatting or the pan/zoom behavior it provides to its contents. We may use the assets directory of your Android project to store resources you would like to display in a WebView, such as large images or HTML files. To better organize the assets, we may also create subdirectories under assets to store files in.

WebView.loadUrl() can display files stored under assets by using the file:///android_asset/<resource path> URL schema For example, if the file android.jpg was placed into the assets directory, it could be loaded into a WebView using the following URL:

file:///android_asset/android.jpg

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 image by supplying the URL of the resource (local asset) to the WebView 

Code Implementation:

First of all update your activity_main. xml as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <WebView
        android:id="@+id/upperView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
    <WebView
        android:id="@+id/lowerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
</LinearLayout>

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); 
                                // Getting reference to upper web view
                                WebView upperWebView = (WebView)findViewById(R.id.upperView);                                 //Zoom feature must be enabled
                                upperWebView.getSettings().setBuiltInZoomControls(true);                                 //Loading the local asset using URL
                                upperWebView.loadUrl("file:///android_asset/MindStickLOGO.jpg"); 
                                // Getting reference to lower web view
                                WebView loweWebView = (WebView)findViewById(R.id.lowerView); 
                                //creating a html string
                                String htmlString = "<h1>Header</h1><p> This is HTML text<br />"                                                                 +"<i>Formatted in italics</i></p>"; 
                                //load html content in web view
                                loweWebView.loadData(htmlString, "text/html", "utf-8"); 
                }
                @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;
                }
}

When the activity is displayed, each WebView occupies half of the screen’s vertical space. The HTML string is formatted as expected, while the large image can be scrolled both horizontally and vertically; the user may even zoom in or out

Running the application:

Hit on run button,

Local image will be displayed in the upper view with zooming feature and the html text will be shown in the lower web view

Thanks for reading this post.

Happy Coding!! J