Image Display and Interaction with Android WebViews

In this tutorial, we will work through the basics of using a WebView to display images within your app, configuring the automated interaction controls from within your Java code. We will also explore various options for importing images into a WebView, including loading images from Web locations, from the device Gallery, and from within the app's directory structure.

Step 1: Create an Android Project

If you do not already have an app you are working with, start a new Android project in Eclipse. In your app's main Activity class, or whatever Activity you want to display images within, add the following import statements before your class declaration opening line:

import android.app.Activity;
import android.content.Intent;
import android.database.Cursor;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;

You may not need all of these depending on how you plan on loading your images. If you plan on loading your images over the Web, you need to add Internet permission to your project Manifest. Open the Manifest and add the following line anywhere inside the parent "manifest" element:

<uses-permission android:name="android.permission.INTERNET" />

Step 2: Create the App Layout

We are going to use a single WebView inside a Linear Layout to explore displaying images. Inside your project's main XML layout file, or whichever one you want to use for the Activity in question, add the following layout outline:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">

</LinearLayout>

Inside this main Linear Layout, first add your WebView as follows:

<WebView android:id="@+id/pic_view"
	android:layout_width="fill_parent"
	android:layout_height="0dp"
	android:layout_weight="1" >
</WebView>

We will use the ID attribute to identify the WebView in Java. Since the layout is going to include other elements, we specify a weight along with the general layout properties. To demonstrate loading the images from three different locations, we are also going to add three buttons. If you only plan on using one of the loading methods, feel free to alter this. After the WebView, still inside the main Linear Layout, add the following additional Linear Layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:padding="3dp">
	<Button
		android:id="@+id/pick_btn"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/pick" />
	<Button
		android:id="@+id/load_btn"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/load" />
	<Button
		android:id="@+id/app_btn"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/local" />
</LinearLayout>

Here we include three buttons inside a second Linear Layout, with ID attributes so that we can implement button clicks in Java. You will also need to add the following to your Strings XML file, which you should find in the app's "res/values" directory:

<string name="pick">Gallery</string>
<string name="load">Web</string>
<string name="local">App</string>

Step 3: Prepare for Loading Images

In your app Activity class, alter your opening class declaration line to implement click listeners as follows:

public class PictureViewerActivity extends Activity implements OnClickListener {

Alter the class name to suit your own. Now add the following inside the class declaration, before the "onCreate" method:

private WebView picView;

Your "onCreate" method should already be there, but if not add it as follows:

@Override
public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);

}

This is standard code to create the Activity. Inside this method, after the existing code, retrieve a reference to your WebView and alter its display color as follows:

picView = (WebView)findViewById(R.id.pic_view);
picView.setBackgroundColor(0);

This will allow us to load images into the WebView while the app runs. The WebView displays with a white background by default, which we are overriding here. After the "onCreate" method, still inside the class declaration, add the outline of your "onClick" method as follows:

public void onClick(View v) {

}

We will add code to handle each button click inside this method.

Step 4: Load an Image from the Gallery

Let's start by allowing the user to load an image from the Gallery on their own device. First, add an instance variable inside your class declaration, but before the "onCreate" method:

private final int IMG_PICK = 1;

This will allow us to respond to the user returning from the Gallery after choosing an image. Inside the "onCreate" method, after the existing code, add the following to retrieve a reference to the "pick" button and assign a click listener to it:

Button pickBtn = (Button)findViewById(R.id.pick_btn);
pickBtn.setOnClickListener(this);

Now we can respond to button clicks. Inside the "onClick" method, add the following:

if (v.getId() == R.id.pick_btn) {
	Intent pickIntent = new Intent();
	pickIntent.setType("image/*");
	pickIntent.setAction(Intent.ACTION_GET_CONTENT);
	//we will handle the returned data in onActivityResult
	startActivityForResult(Intent.createChooser(pickIntent, "Select Picture"), IMG_PICK);
}

This will take the user to another application to select an image. Depending on which apps they have installed, they may need to select an app from a list. For example, on my device I receive two choices on pressing the "pick" button:

When the user chooses an image, they will return to the app and the "onActivityResult" method will fire. Add it to your class declaration as follows:

protected void onActivityResult(int requestCode, int resultCode, Intent data) {
	if (resultCode == RESULT_OK) {

	}
}

Inside the "if" statement, add the following to check that the user is returning from the Intent we started for them to choose an image:

if (requestCode == IMG_PICK) {

}

Inside this "if" statement, we can retrieve the data returned from the Gallery app, which will be the URI of the image the user picked:

Uri pickedUri = data.getData();

We will build a String representing the path for the image, which we need to load the image into the WebView. We are using the same technique explored in more detail in Displaying Images with an Enhanced Gallery. Add the following code:

String imagePath = "";
String[] imgData = { MediaStore.Images.Media.DATA };
Cursor imgCursor = managedQuery(pickedUri, imgData, null, null, null);
if(imgCursor!=null) {
	int index = imgCursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
	imgCursor.moveToFirst();
	imagePath = imgCursor.getString(index);
}
else
	imagePath = pickedUri.getPath();

Now we have a reference to the image location and can load it into the WebView:

picView.loadUrl("file:///"+imagePath);

You can run your app now to test it loading the Gallery image - you may need to run it on an actual device as the emulator does not normally have images stored on it.

Next we will handle loading from the Web and the app directory, before exploring configuration options for the WebView.

Step 5: Load an Image from the Web

Now for a simpler option. To load an image from the Web, we simply need the URL. First, back in the "onCreate" method, implement button clicks on your "load" button as follows:

Button loadBtn = (Button)findViewById(R.id.load_btn);
loadBtn.setOnClickListener(this);

In the "onClick" method, after the "if" statement in which we handled the "pick" button, add the following, altering it to suit your own image URL:

else if(v.getId() == R.id.load_btn) {
picView.loadUrl("http://developer.android.com/images/brand/google_play_logo_450.png");

Here we are simply loading one of the Android Google Play image resources for demonstration, but you can of course alter it to reflect an image of your choice. If you want the user to enter their chosen image you can add an editable text-field to capture this. The image will load providing the device has a functioning Internet connection:

Step 6: Load an Image From the App Directory Structure

You may have images within your application package that you wish to display in a WebView. We will explore two possible ways to achieve this. First, back in your "onCreate" method, handle button clicks:

Button appBtn = (Button)findViewById(R.id.app_btn);
appBtn.setOnClickListener(this);

Add another branch to the "if" and "else" statements in your "onClick" method as follows:

else if(v.getId() == R.id.app_btn) {

}

To display only an image in the WebView, you can simply specify its URL:

picView.loadUrl("file:///android_asset/mypicture.jpg");

This loads a JPEG image file stored in the app's "assets" folder and named "mypicture.jpg".

The WebView is naturally designed to display HTML content, so you may wish to display the image as an HTML "img" element along with other Web markup. To do so, you can save an HTML file in the app's "assets" folder with an "img" element inside it, for example:

<html>
<head>
</head>
<body>
<img src="file:///android_asset/mypicture.jpg"/>
</body>
</html>

You may include other HTML content in this file if you want it to display in your WebView along with the image. To load the HTML, alter the "loadURL" line as follows:

picView.loadUrl("file:///android_asset/imagepage.html");

This works for an HTML file saved as "imagepage.html" in the "assets" folder, so alter it to suit the name of your own file. This code is all you need to load the image within the HTML file.

Step 7: Configure WebView Image Interaction

You can set some of the details of how the user interacts with your image inside the WebView from your Java Activity code. In the "onCreate" method, after your button listener code, add the following:

picView.getSettings().setBuiltInZoomControls(true);
picView.getSettings().setUseWideViewPort(true);

This instructs the app to use the standard zoom controls and wide View Port for your WebView. There are other options you can explore here, such as setting the default zoom level. Now when the user interacts with your WebView, they can double-tap and pinch to zoom, as well as using the buttons and sliding to scroll/ pan:

Conclusion

Making use of default Android resources such as the WebView allows you to quickly exploit interaction models your users will already be familiar with, as well as letting you focus on the unique aspects of your applications. The WebView renders HTML pages, so you can also enhance your apps by using Web technologies such as CSS and JavaScript. As you can see from the above example, you can effectively integrate the WebView with other Android UI items.

HIGHLIGHTS OF THE DAY