---
title: "WebView in Android: Display Local Assets"  
description: "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 c"  
author: "Anonymous User"  
published: 2015-09-22  
updated: 2018-03-13  
canonical: https://www.mindstick.com/blog/10955/webview-in-android-display-local-assets  
category: "android"  
tags: ["android", "android activity", "android controls"]  
reading_time: 5 minutes  

---

# 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](https://www.mindstick.com/interview/22836/WebView%20in%20Android%20Display%20a%20URL#.VgFcaFy6bIU). 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](https://www.mindstick.com/forum/33405/how-to-get-the-build-version-number-of-your-android-application) project to store [resources](https://yourviews.mindstick.com/view/293/renovation-causes-wastage-of-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](https://www.mindstick.com/interview/34311/can-you-store-files-blobs-in-indexeddb) 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](https://www.mindstick.com/blog/10942/android-studio-vs-eclipse) and a compatible version of JAVA SDK

Install and [configure](https://answers.mindstick.com/qa/51511/how-to-configure-client-and-repository-in-informatica-power-center) the above utilities.

Now create a new Android project namely “WebViewSample”.

[Implementation](https://www.mindstick.com/forum/33764/how-to-implementation-of-class-in-c-sharp) objective:

Displaying an image by supplying the URL of the resource (local asset) to the WebView

\
Code Implementation:

First of all [update your](https://answers.mindstick.com/qa/32325/how-often-should-you-update-your-cover-photo-for-your-company-page) 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](https://www.mindstick.com/forum/158678/how-can-center-align-an-element-both-horizontally-and-vertically-using-css); 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

![WebView in Android: Display Local Assets](https://www.mindstick.com/blogs/cc6eee1b-7811-4367-9db1-d9ee9efc5705/images/f0fc002b-439a-4d3b-a5f1-e9869d82773f.png)

Thanks for reading this post.

Happy Coding!! J

---

Original Source: https://www.mindstick.com/blog/10955/webview-in-android-display-local-assets

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.