Android tutorial – display embedded HTML file in WebView

Working on Power Schedule, I wanted to make a short help file, with some formatting. It seems there were several ways of doing this, but I chose to include an embedded HTML file into my application. It seemed easier to just edit an HTML file in an editor.
So let’s get started…

  • first, embed an html file in the app resources. For this, create the “raw” subfolder in “res” folder and add your HTML formatted file:
    Add raw HTML file
  • use a WebView view in your layout file:
    	<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    		android:id="@+id/webviewHelp android:layout_width="fill_parent"
    		android:layout_height="fill_parent"/>
    
  • use this code in your activity onCreate() method:
    		WebView webview = (WebView) findViewById(R.id.webviewHelp);
    		webview.loadData(readTextFromResource(R.raw.help), "text/html", "utf-8");
    

    where readTextFromResource is something like this:

    	private String readTextFromResource(int resourceID)
    	{
    		InputStream raw = getResources().openRawResource(resourceID);
    		ByteArrayOutputStream stream = new ByteArrayOutputStream();
    		int i;
    		try
    		{
    			i = raw.read();
    			while (i != -1)
    			{
    				stream.write(i);
    				i = raw.read();
    			}
    			raw.close();
    		}
    		catch (IOException e)
    		{
    			e.printStackTrace();
    		}
    		return stream.toString();
    	}
    

It will look something like this:
HTML file on Android

I hope it helps :)

21 thoughts on “Android tutorial – display embedded HTML file in WebView”

  1. Hi,
    I have created android application to get the contact list from android phone. In this i’m using Webview.loadurl() to load the home page(index.htm) like,
    webview.getSettings().setJavaScriptEnabled(true); webview.loadUrl(“file:///android_asset/assets/www/index.htm”);
    This is working in android emulator and phone, not working in “AcerICONIA TAB A50″
    showing an error ” webpage is not available at file:///android_asset/assets/www/index.htm ”
    Please help me to clear this.

  2. That’s another way to load the file – personally I didn’t try it, so I don’t know why it doesn’t work on Acer. Perhaps you can try loading it the way I did?

  3. Hi,

    Thanks for your reply.

    I got a solution.

    webview.loadUrl(“file:///android_asset/assets/www/index.htm”);

    in this, no need to include “assets” folder in the url.

    Answer: webview.loadUrl(“file:///android_asset/www/index.htm”);

    Thank you.

  4. Thanks this is what i was looking for when I wanted to have a page be coded in html instead of using text views in xml.

  5. myWebView.loadUrl(“file:///assets/index.html”); is not working for me on loading the webview the emulator says “Web page not found at file:///assets/index.html”
    i have placed the html file directally under assets folder in android project

  6. Hello,

    Thank you very much for the code, I have added an .gif figure the the html using , this is displayed well in the layout in java or any browser, however if I run the emulator this figure will not show.

  7. Guys, by putting your HTML in the assets instead of raw you’ll be free of the stream code, you’ll be able to include images, and you’ll be able to have links. Go for assets.

  8. I cant get mine to load at all: Html is in assets folder:

    CODE:
    Dialog dialog = new Dialog(this);
    LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View vi = inflater.inflate(R.layout.option_dialog, null);
    dialog.setContentView(vi);
    dialog.setTitle(“Standards”);
    //dialog.setCancelable(true);
    WebView wb = (WebView) vi.findViewById(R.id.webview);
    wb.loadUrl(“file:///android_asset/en_prep_opt_1.html”);
    System.out.println(“..loading url..”);
    dialog.show();

    END CODE
    I get the title, but not any content from the asset html.

    my layout just looks like this:

  9. Hi all,
    I was trying to play a swf file using webview. However, it shows a blank page. This is my code on the part of onCreate method.The file of try.swf is in the assests folder.Can anyone please help me? Thanks

    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mWebView = (WebView)findViewById(R.id.webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.loadUrl(“file:///android_asset/try.swf”);
    }

  10. Thank you for posting this. I was calling loadURL off of the WebView to show my html help file that I have stored in the raw folder, but when I localized, Android complained that it could not find the file. I switched my code to use your method and now it works like a dream. I really appreciate the time you took to post this.

  11. Hi

    Your tutorial was really helpful. It would be a great help if you can tell me how to make image icons in android,which can be clicked to fire events.

    Like if we goto menu it shows us various icons like settings, gallary etc.

    Thanks in advance

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>