Home > DeveloperSection > Blogs > WebView in Android: Display Local Assets

WebView in Android: Display Local Assets

Android Android  Android Activity  Android Controls 
0 Comment(s)
 925  View(s)
Rate this:

WebView in Android: Display Local Assets

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:



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"




    android:orientation="vertical" >






        android:layout_weight="1" />






        android:layout_weight="1" />





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 {



                protected void onCreate(Bundle savedInstanceState) {




                                // Getting reference to upper web view

                                WebView upperWebView = (WebView)findViewById(R.id.upperView);

                                //Zoom feature must be enabled



                                //Loading the local asset using URL




                                // 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");






                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

Don't want to miss updates? Please click the below button!

Follow MindStick