| page.title=Hello, WebView |
| parent.title=Hello, Views |
| parent.link=index.html |
| @jd:body |
| |
| <p>A {@link android.webkit.WebView} allows you to create your own web browser Activity. In this tutorial, |
| we'll create a simple Activity that can view web pages.</p> |
| |
| <ol> |
| <li>Create a new project/Activity called HelloWebView.</li> |
| <li>Open the layout file. Insert a WebView so it looks like so: |
| <pre> |
| <?xml version="1.0" encoding="utf-8"?> |
| <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" |
| android:layout_width="wrap_content" |
| android:layout_height="wrap_content" |
| android:orientation="vertical"> |
| |
| <WebView |
| android:id="@+id/webview" |
| android:layout_width="fill_parent" |
| android:layout_height="fill_parent" |
| /> |
| |
| </LinearLayout> |
| </pre></li> |
| |
| <li>Now open the HelloWebView.java file. |
| At the top of the class, instantiate a WebView object: |
| <pre>WebView webview;</pre> |
| <p> Then add the following at the end of the <code>onCreate()</code> method:</p> |
| <pre> |
| webview = (WebView) findViewById(R.id.webview); |
| webview.getSettings().setJavaScriptEnabled(true); |
| webview.loadUrl("http://www.google.com"); |
| </pre> |
| |
| <p>This captures the WebView we created in our layout, then requests a |
| {@link android.webkit.WebSettings} object and enables JavaScript. |
| Then we load a URL.</p></li> |
| |
| <li>Because we're accessing the internet, we need to add the appropriate |
| permissions to the Android manifest file. So open the AndroidManifest.xml file |
| and, add the following as a child of the <code><manifest></code> element: |
| |
| <pre><uses-permission android:name="android.permission.INTERNET" /></pre></li> |
| |
| <li>Now run it.</li> |
| </ol> |
| <p> You now have the world's simplest web page viewer. |
| It's not quite a browser yet. It only loads the page we've requested.</p> |
| |
| <hr/> |
| |
| <p>We can load a page, but as soon as we click a link, the default Android web browser |
| handles the Intent, instead of our own WebView handling the action. So now we'll |
| override the {@link android.webkit.WebViewClient} to enable us to handle our own URL loading.</p> |
| |
| <ol> |
| <li>In the HelloAndroid Activity, add this nested private class: |
| <pre> |
| private class HelloWebViewClient extends WebViewClient { |
| @Override |
| public boolean shouldOverrideUrlLoading(WebView view, String url) { |
| view.loadUrl(url); |
| return true; |
| } |
| }</pre></li> |
| |
| <li>Now, in the <code>onCreate()</code> method, set an instance of the <code>HelloWebViewClient</code> |
| as our WebViewClient: |
| <pre>webview.setWebViewClient(new WebViewClientDemo());</pre> |
| |
| <p>This line should immediately follow the initialization of our WebView object.</p> |
| <p>What we've done is create a WebViewClient that will load any URL selected in our |
| WebView in the same WebView. You can see this in the <code>shouldOverrideUrlLoading()</code> |
| method, above—it is passed the current WebView and the URL, so all we do |
| is load the URL in the given view. Returning <var>true</var> says that we've handled the URL |
| ourselves and the event should not bubble-up.</p> |
| <p>If you try it again, new pages will now load in the HelloWebView Activity. However, you'll notice that |
| we can't navigate back. We need to handle the back button |
| on the device, so that it will return to the previous page, rather than exit the application.</p> |
| </li> |
| |
| <li>To handle the back button key press, add the following method inside the HelloWebView |
| Activity: |
| <pre> |
| @Override |
| public boolean onKeyDown(int keyCode, KeyEvent event) { |
| if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { |
| webview.goBack(); |
| return true; |
| } |
| return super.onKeyDown(keyCode, event); |
| }</pre> |
| <p>The condition uses a {@link android.view.KeyEvent} to check |
| whether the key pressed is the BACK button and whether the |
| WebView is actually capable of navigating back (if it has a history). If both are |
| <em>not</em> true, then we send the event up the chain (and the Activity will close). |
| But if both <em>are</em> true, then we call <code>goBack()</code>, |
| which will navigate back one step in the history. We then return true to indicate |
| that we've handled the event.</p> |
| </li> |
| </ol> |
| <p>When you open the application, it should look like this:</p> |
| <img src="images/hello-webview.png" width="150px" /> |
| |
| <h3>Resource</h3> |
| <ul> |
| <li>{@link android.webkit.WebView}</li> |
| <li>{@link android.webkit.WebViewClient}</li> |
| <li>{@link android.view.KeyEvent}</li> |
| </ul> |
| |
| |
| |
| |
| |