Sunday, March 27, 2011

Displaying a Static Web Page Inside of an Android Activity

In this tutorial, learn how to use the Android WebView to display a web page that is embedded into your app, without connecting to the internet. Learn how to properly include graphics as well.

Displaying a Static Web Page Inside of an Android Activity

Why Display Static Pages?

In a previous tutorial, we showed you how to display a web page from within an Android Activity.

This is very useful, but there may be some cases in which you want to take advantage of the html rendering capabilities without having to download a file from the internet.

Why would you want to do this?
  1. Your application won't have to require an internet permission
  2. Your requested web page will load faster
  3. You can use it to display important content (instructions, help files, high scores...) without relying upon an internet connection that could be spotty or non-existent


Previous Tutorial

In this tutorial, we are going to build off the code from the previous tutorial, how to display a web page from an Android Activity. Please follow that tutorial to get started. 

Building a Static Page on the Fly

To accomplish this, we are going to remove the code that says:
webview.loadUrl("http://www.androiddom.com");

And replace it with the following code

To accomplish this, we are going to remove the code that says:
webview.loadData("<html><body><h1>Hello World!</h1></body></html>", "text/html", "UTF-8");

Run the program again, and you should be greeted with the message "Hello World." Try editing the manifest to remove the internet permission to verify that you don't need to connect to the internet anymore, even though you are using the webview.

"Hello World" displayed in the webview
As you can see, the first parameter contains the html to display.

Using String Builder

Chances are you will want to display something a lot more complex, but you still want to keep your code clean and formatted well. A good approach to handle this would be to use a StringBuilder.

The code below demonstrates this.

StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("<html><body><h1>String Builder Example</h1>");
stringBuilder.append("<p>Time to display a list</p><ol>");

for(int i=0; i<3; i++) {
 stringBuilder.append("<li>Item</li>");
}

stringBuilder.append("</ol></body></html>");

webview.loadData(stringBuilder.toString(), "text/html", "UTF-8");

Below is a screenshot of what the code displays as.

String Builder example screenshot

Loading a Saved Static Page

It is also possible to just save a static html page as an asset, and load this saved page instead of dynamically generating a page to display.

Create a simple html page, testpage.html in the assets folder for your android project. Place the following code in the file.

<html>
<body>
<h1>Page from Asset Folder</h1>

<p>
This page is saved in the assets folder of the android project.
</p>

</body>
</html>

Update the webview code to the following:

webview.loadUrl("file:///android_asset/testpage.html");

Run the program and you should get output similar to the following.

Screenshot of a page loaded from the asset folder


Adding Images

If you want to add saved images to display, simply place them in the assets folder as well. For this example we will add a picture of this "Smiley Man" to the web page.

The "Smiley Man"
Update the testpage.html code to the following.

<html>
<body>
<h1>The Smiley Man</h1>

<p>
Below is a picture of the smileyman.
</p>

<img src="file:///android_asset/smileyguy.png" />

</body>
</html>


Run the program and you should see something like this.

Screenshot of the webview displaying the smiley man.


Conclusion

WebViews can be a great way to show formatted content in an activity, and you don't need an internet connection to use them. Content can be generated dynamically, or stored in the Assets folder of your project.

7 comments:

  1. Timely Help !!

    http://som4tress.blogspot.com

    ReplyDelete
  2. Is it possible to load the graphics of a webpage locally but have the content of the page updated dynamically?

    IE a web forum through webview, where all the img files are loaded locally but the post in the forum itself are still loaded via the internet?

    ReplyDelete
  3. Hi Joshua,

    Great idea. I wrote up a small tutorial that explains how to do this.

    http://www.androiddom.com/2011/06/adding-local-images-to-android-webview.html

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. very good and to the point tutorial

    ReplyDelete
  6. Can we save a page in asset folder and load dynamically?

    ReplyDelete
  7. Any idea to load the content page wise in webview?

    ReplyDelete