1 page.title=Hello, WebView 2 parent.title=Hello, Views 3 parent.link=index.html 4 @jd:body 5 6 <p>A {@link android.webkit.WebView} allows you to create your own web browser Activity. In this tutorial, 7 we'll create a simple Activity that can view web pages.</p> 8 9 <ol> 10 <li>Create a new project/Activity called HelloWebView.</li> 11 <li>Open the layout file. Insert a WebView so it looks like so: 12 <pre> 13 <?xml version="1.0" encoding="utf-8"?> 14 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 15 android:layout_width="fill_parent" 16 android:layout_height="fill_parent" 17 android:orientation="vertical"> 18 19 <WebView 20 android:id="@+id/webview" 21 android:layout_width="fill_parent" 22 android:layout_height="fill_parent" 23 /> 24 25 </LinearLayout> 26 </pre></li> 27 28 <li>Now open the HelloWebView.java file. 29 At the top of the class, instantiate a WebView object: 30 <pre>WebView webview;</pre> 31 <p> Then add the following at the end of the <code>onCreate()</code> method:</p> 32 <pre> 33 webview = (WebView) findViewById(R.id.webview); 34 webview.getSettings().setJavaScriptEnabled(true); 35 webview.loadUrl("http://www.google.com"); 36 </pre> 37 38 <p>This captures the WebView we created in our layout, then requests a 39 {@link android.webkit.WebSettings} object and enables JavaScript. 40 Then we load a URL.</p></li> 41 42 <li>Because we're accessing the internet, we need to add the appropriate 43 permissions to the Android manifest file. So open the AndroidManifest.xml file 44 and, add the following as a child of the <code><manifest></code> element: 45 46 <pre><uses-permission android:name="android.permission.INTERNET" /></pre></li> 47 48 <li>Now run it.</li> 49 </ol> 50 <p> You now have the world's simplest web page viewer. 51 It's not quite a browser yet. It only loads the page we've requested.</p> 52 53 <hr/> 54 55 <p>We can load a page, but as soon as we click a link, the default Android web browser 56 handles the Intent, instead of our own WebView handling the action. So now we'll 57 override the {@link android.webkit.WebViewClient} to enable us to handle our own URL loading.</p> 58 59 <ol> 60 <li>In the HelloAndroid Activity, add this nested private class: 61 <pre> 62 private class HelloWebViewClient extends WebViewClient { 63 @Override 64 public boolean shouldOverrideUrlLoading(WebView view, String url) { 65 view.loadUrl(url); 66 return true; 67 } 68 }</pre></li> 69 70 <li>Now, in the <code>onCreate()</code> method, set an instance of the <code>HelloWebViewClient</code> 71 as our WebViewClient: 72 <pre>webview.setWebViewClient(new HelloWebViewClient());</pre> 73 74 <p>This line should immediately follow the initialization of our WebView object.</p> 75 <p>What we've done is create a WebViewClient that will load any URL selected in our 76 WebView in the same WebView. You can see this in the <code>shouldOverrideUrlLoading()</code> 77 method, above—it is passed the current WebView and the URL, so all we do 78 is load the URL in the given view. Returning <var>true</var> says that we've handled the URL 79 ourselves and the event should not bubble-up.</p> 80 <p>If you try it again, new pages will now load in the HelloWebView Activity. However, you'll notice that 81 we can't navigate back. We need to handle the back button 82 on the device, so that it will return to the previous page, rather than exit the application.</p> 83 </li> 84 85 <li>To handle the back button key press, add the following method inside the HelloWebView 86 Activity: 87 <pre> 88 @Override 89 public boolean onKeyDown(int keyCode, KeyEvent event) { 90 if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { 91 webview.goBack(); 92 return true; 93 } 94 return super.onKeyDown(keyCode, event); 95 }</pre> 96 <p>The condition uses a {@link android.view.KeyEvent} to check 97 whether the key pressed is the BACK button and whether the 98 WebView is actually capable of navigating back (if it has a history). If both are 99 <em>not</em> true, then we send the event up the chain (and the Activity will close). 100 But if both <em>are</em> true, then we call <code>goBack()</code>, 101 which will navigate back one step in the history. We then return true to indicate 102 that we've handled the event.</p> 103 </li> 104 </ol> 105 <p>When you open the application, it should look like this:</p> 106 <img src="images/hello-webview.png" width="150px" /> 107 108 <h3>Resource</h3> 109 <ul> 110 <li>{@link android.webkit.WebView}</li> 111 <li>{@link android.webkit.WebViewClient}</li> 112 <li>{@link android.view.KeyEvent}</li> 113 </ul> 114 115 116 117 118 119
