Android - Use websites in your app (WebView Tutorial)

Summary
This is an Android tutorial on a really simple way to get started using the WebView.

Description
You can use a WebView to display a website the same way you would when you open a browser on your Android device.  You can use a WebView to display a saved or self-made html document, view a website, or display strings in html format.
Although it is beyond this really simple tutorial, you can bind javascript to Android code.  You can find more information on this at http://developer.android.com/guide/webapps/webview.html.

Before we begin
I'm using Eclipse (Indigo x64) with the ADT plugin on Windows 7 x64.  My target API is Android 1.6 so that the application is backwards compatible with all others beyond 1.6.


Steps

1. Create a new Android project
2. Add a WebView to your activity layout
3. Add the permission to the manifest file
4. Add the code to your Activity

1.  Create a new Android project

Go to File > New > Android Project.  For the project name, I choose "WebViewDemo".  In the build target, select Android 1.6 for compatibility.  For the package name, I choose "com.projects.WebViewDemo".

Select Finish and you should have a project that looks like Figure 1.1.

Figure 1.1

2.  Add a WebView to your activity layout

In the Project Explorer, find your project, and navigate to "res\layout\main.xml".  Open "main.xml" and you eclipse will show "main.xml" in the Graphical Layout Editor (Figure 2.1).  Just under the Graphical Layout Editor, select the tab "main.xml" (This tab is circled in Figure 2.1).  

Figure 2.1

Now that we can see the XML document.  Lets add the following code as show in Figure 2.2.

<android.webkit.WebView 

android:id="@+id/wvwMain" 

android:layout_width="fill_parent" 

android:layout_height="fill_parent">

</android.webkit.WebView>

Figure 2.2

3. Add the permission to the manifest file

Your WebView will need to access the internet and your application will need to ask for permission to do this.  

In the Project Explorer, find your project, and open "AndroidManifest.xml".  Eclipse will open the "AndroidManifest.xml" (Figure 3.1).  Just under this editor, select the tab "AndroidManifest.xml" (This tab is circled in Figure 3.1).  

Figure 3.1

Now that we can see the XML document.  Lets add the following code as show in Figure 3.2.

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

Figure 3.2

4.  Add the code to your activity

In the Project Explorer, find your project, and navigate to "res\com.projects.WebViewDemo\WebViewDemoActivity.java".  If you used a different project name or package name than the ones I used,  you will find the .java file under the names you used.  Open the ".java" file, mine is "WebViewDemoActivity.java" (Figure 4.1).  

Figure 4.1

Lets add the following code to the activity as in Figue 4.2:

Starting at the import section add:

import android.webkit.WebView;

After the Activity starts (and before the "@Override" line) add:

WebView browser;

In the OnCreate method of the Activity add:

        // find the WebView by name in the main.xml of step 2

        browser=(WebView)findViewById(R.id.wvwMain);

        

        // Enable javascript

        browser.getSettings().setJavaScriptEnabled(true);  

        

        // load a webpage

        browser.loadUrl("http://news.google.com/");

Figure 4.2

That's it!

Run your program and see the results! 

Final Notes:

You'll notice that the browser you created has no status bar or navigation URL portion at the top.  This was the goal.  For example, I make an ASP.NET website and want my android application to view only certain pages as well as control the navigation.  Another example, I could make an html document, store it locally, load it with the WebView, and bind the javascript to your Android code.  

Comments/Questions?
I'm always wanting to improve the quality of the content here.  If you have questions, want to see a better explanation, a better picture, let me know.  Thanks - Sean