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?
- Your application won't have to require an internet permission
- Your requested web page will load faster
- 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
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 |
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" |
<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.
Timely Help !!
ReplyDeletehttp://som4tress.blogspot.com
Is it possible to load the graphics of a webpage locally but have the content of the page updated dynamically?
ReplyDeleteIE 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?
Hi Joshua,
ReplyDeleteGreat 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
This comment has been removed by the author.
ReplyDeletevery good and to the point tutorial
ReplyDeleteCan we save a page in asset folder and load dynamically?
ReplyDeleteAny idea to load the content page wise in webview?
ReplyDelete