frameworks/base/docs/html/resources/tutorials/views/hello-webview.jd

   1 page.title=Web View
   2 parent.title=Hello, Views
   3 parent.link=index.html
   4 @jd:body
   5
   6 <p>{@link android.webkit.WebView} allows you to create your own window for viewing web pages (or even
   7 develop a complete browser). In this tutorial, you'll create a simple {@link android.app.Activity}
   8 that can view and navigate web pages.</p>
   9
  10 <ol>
  11    <li>Create a new project named <em>HelloWebView</em>.</li>
  12    <li>Open the <code>res/layout/main.xml</code> file and insert the following:
  13 <pre>
  14 &lt;?xml version="1.0" encoding="utf-8"?>
  15 &lt;WebView  xmlns:android="http://schemas.android.com/apk/res/android"
  16     android:id="@+id/webview"
  17     android:layout_width="fill_parent"
  18     android:layout_height="fill_parent"
  19 />
  20 </pre>
  21   </li>
  22
  23    <li>Now open the <code>HelloWebView.java</code> file.
  24       At the top of the class, declare a {@link android.webkit.WebView} object:
  25 <pre>WebView mWebView;</pre>
  26   <p>Then use the following code for the {@link android.app.Activity#onCreate(Bundle) onCreate()}
  27   method:</p>
  28 <pre>
  29 public void onCreate(Bundle savedInstanceState) {
  30     super.onCreate(savedInstanceState);
  31     setContentView(R.layout.main);
  32
  33     mWebView = (WebView) findViewById(R.id.webview);
  34     mWebView.getSettings().setJavaScriptEnabled(true);
  35     mWebView.loadUrl("http://www.google.com");
  36 }
  37 </pre>
  38   <p>This initializes the member {@link android.webkit.WebView} with the one from the
  39   {@link android.app.Activity} layout; requests a {@link android.webkit.WebSettings} object with
  40   {@link android.webkit.WebView#getSettings()}; and enables JavaScript for the {@link
  41   android.webkit.WebView} with {@link android.webkit.WebSettings#setJavaScriptEnabled(boolean)}.
  42   Finally, an initial web page is loaded with {@link
  43   android.webkit.WebView#loadUrl(String)}.</p>
  44   </li>
  45
  46   <li>Because this application needs access to the Internet, you need to add the appropriate
  47   permissions to the Android manifest file. Open the <code>AndroidManifest.xml</code> file
  48   and add the following as a child of the <code>&lt;manifest></code> element:
  49
  50     <pre>&lt;uses-permission android:name="android.permission.INTERNET" /></pre></li>
  51
  52   <li>While you're in the manifest, give some more space for web pages by removing the title
  53   bar, with the "NoTitleBar" theme:
  54 <pre>
  55 &lt;activity android:name=".HelloGoogleMaps" android:label="@string/app_name"
  56      <strong>android:theme="@android:style/Theme.NoTitleBar"</strong>&gt;
  57 </pre>
  58   </li>
  59
  60   <li>Now run the application.
  61   <p>You now have a simplest web page viewer.
  62   It's not quite a browser yet because as soon as you click a link, the default Android Browser
  63   handles the Intent to view a web page, because this {@link android.app.Activity} isn't
  64   technically enabled to do so. Instead of adding an intent filter to view web pages, you can
  65   override the {@link android.webkit.WebViewClient} class and enable this {@link
  66   android.app.Activity} to handle its own URL requests.</p>
  67   </li>
  68
  69   <li>In the <code>HelloAndroid</code> Activity, add this nested class:
  70 <pre>
  71 private class HelloWebViewClient extends WebViewClient {
  72     &#64;Override
  73     public boolean shouldOverrideUrlLoading(WebView view, String url) {
  74         view.loadUrl(url);
  75         return true;
  76     }
  77 }
  78 </pre>
  79   </li>
  80   <li>Then towards the end of the {@link android.app.Activity#onCreate(Bundle)} method, set an
  81   instance of the <code>HelloWebViewClient</code> as the {@link android.webkit.WebViewClient}:
  82    <pre>mWebView.setWebViewClient(new HelloWebViewClient());</pre>
  83
  84     <p>This line can go anywhere following the initialization of the {@link
  85     android.webkit.WebView} object.</p>
  86     <p>This creates a {@link android.webkit.WebViewClient} that will load any URL selected from this
  87     {@link android.webkit.WebView} into the same {@link android.webkit.WebView}. The
  88     {@link android.webkit.WebViewClient#shouldOverrideUrlLoading(WebView,String)} method is passed
  89 the current    {@link android.webkit.WebView} and the URL requested, so all it needs to do is load
  90 the URL in    the given view. Returning <code>true</code> says that the method has handled the URL
  91 and the    event should not propagate (in which case, an Intent would be created that's handled by
  92 the    Browser application).</p>
  93     <p>If you run the application again, new pages will now load in this Activity.
  94     However, you can't navigate back to previous pages. To do this, you need to handle the BACK
  95     button on the device, so that it will return to the previous page, rather than exit the
  96     application.</p>
  97     </li>
  98
  99   <li>To handle the BACK button key press, add the following method inside the
 100   <code>HelloWebView</code> Activity:
 101 <pre>
 102 &#64;Override
 103 public boolean onKeyDown(int keyCode, KeyEvent event) {
 104     if ((keyCode == KeyEvent.KEYCODE_BACK) &amp;&amp; mWebView.canGoBack()) {
 105         mWebView.goBack();
 106         return true;
 107     }
 108     return super.onKeyDown(keyCode, event);
 109 }
 110 </pre>
 111     <p>This {@link android.app.Activity#onKeyDown(int,KeyEvent)} callback method will be called
 112     anytime a button is pressed while in the Activity. The condition inside uses the {@link
 113     android.view.KeyEvent} to check whether the key pressed is the BACK button and whether the
 114     {@link android.webkit.WebView} is actually capable of navigating back (if it has a history). If
 115     both are true, then the {@link android.webkit.WebView#goBack()} method is called,
 116     which will navigate back one step in the {@link android.webkit.WebView}
 117     history.Returning <code>true</code> indicates that the event has been handled. If this condition
 118     is not met, then the event is sent back to the system.</p>
 119 </li>
 120 <li>Run the application again. You'll now be able to follow links and navigate back through the
 121 page history.</li>
 122 </ol>
 123 <p>When you open the application, it should look like this:</p>
 124 <img src="images/hello-webview.png" width="150px" />
 125
 126 <h3>Resource</h3>
 127 <ul>
 128 <li>{@link android.webkit.WebView}</li>
 129 <li>{@link android.webkit.WebViewClient}</li>
 130 <li>{@link android.view.KeyEvent}</li>
 131 </ul>