| page.title=Web View |
| parent.title=Hello, Views |
| parent.link=index.html |
| @jd:body |
| |
| <p>{@link android.webkit.WebView} allows you to create your own window for viewing web pages (or even |
| develop a complete browser). In this tutorial, you'll create a simple {@link android.app.Activity} |
| that can view and navigate web pages.</p> |
| |
| <ol> |
| <li>Create a new project named <em>HelloWebView</em>.</li> |
| <li>Open the <code>res/layout/main.xml</code> file and insert the following: |
| <pre> |
| <?xml version="1.0" encoding="utf-8"?> |
| <WebView xmlns:android="http://schemas.android.com/apk/res/android" |
| android:id="@+id/webview" |
| android:layout_width="fill_parent" |
| android:layout_height="fill_parent" |
| /> |
| </pre> |
| </li> |
| |
| <li>Now open the <code>HelloWebView.java</code> file. |
| At the top of the class, declare a {@link android.webkit.WebView} object: |
| <pre>WebView mWebView;</pre> |
| <p>Then use the following code for the {@link android.app.Activity#onCreate(Bundle) onCreate()} |
| method:</p> |
| <pre> |
| public void onCreate(Bundle savedInstanceState) { |
| super.onCreate(savedInstanceState); |
| setContentView(R.layout.main); |
| |
| mWebView = (WebView) findViewById(R.id.webview); |
| mWebView.getSettings().setJavaScriptEnabled(true); |
| mWebView.loadUrl("http://www.google.com"); |
| } |
| </pre> |
| <p>This initializes the member {@link android.webkit.WebView} with the one from the |
| {@link android.app.Activity} layout; requests a {@link android.webkit.WebSettings} object with |
| {@link android.webkit.WebView#getSettings()}; and enables JavaScript for the {@link |
| android.webkit.WebView} with {@link android.webkit.WebSettings#setJavaScriptEnabled(boolean)}. |
| Finally, an initial web page is loaded with {@link |
| android.webkit.WebView#loadUrl(String)}.</p> |
| </li> |
| |
| <li>Because this application needs access to the Internet, you need to add the appropriate |
| permissions to the Android manifest file. Open the <code>AndroidManifest.xml</code> 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>While you're in the manifest, give some more space for web pages by removing the title |
| bar, with the "NoTitleBar" theme: |
| <pre> |
| <activity android:name=".HelloGoogleMaps" android:label="@string/app_name" |
| <strong>android:theme="@android:style/Theme.NoTitleBar"</strong>> |
| </pre> |
| </li> |
| |
| <li>Now run the application. |
| <p>You now have a simplest web page viewer. |
| It's not quite a browser yet because as soon as you click a link, the default Android Browser |
| handles the Intent to view a web page, because this {@link android.app.Activity} isn't |
| technically enabled to do so. Instead of adding an intent filter to view web pages, you can |
| override the {@link android.webkit.WebViewClient} class and enable this {@link |
| android.app.Activity} to handle its own URL requests.</p> |
| </li> |
| |
| <li>In the <code>HelloAndroid</code> Activity, add this nested class: |
| <pre> |
| private class HelloWebViewClient extends WebViewClient { |
| @Override |
| public boolean shouldOverrideUrlLoading(WebView view, String url) { |
| view.loadUrl(url); |
| return true; |
| } |
| } |
| </pre> |
| </li> |
| <li>Then towards the end of the {@link android.app.Activity#onCreate(Bundle)} method, set an |
| instance of the <code>HelloWebViewClient</code> as the {@link android.webkit.WebViewClient}: |
| <pre>mWebView.setWebViewClient(new HelloWebViewClient());</pre> |
| |
| <p>This line can go anywhere following the initialization of the {@link |
| android.webkit.WebView} object.</p> |
| <p>This creates a {@link android.webkit.WebViewClient} that will load any URL selected from this |
| {@link android.webkit.WebView} into the same {@link android.webkit.WebView}. The |
| {@link android.webkit.WebViewClient#shouldOverrideUrlLoading(WebView,String)} method is passed |
| the current {@link android.webkit.WebView} and the URL requested, so all it needs to do is load |
| the URL in the given view. Returning <code>true</code> says that the method has handled the URL |
| and the event should not propagate (in which case, an Intent would be created that's handled by |
| the Browser application).</p> |
| <p>If you run the application again, new pages will now load in this Activity. |
| However, you can't navigate back to previous pages. To do this, you 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 |
| <code>HelloWebView</code> Activity: |
| <pre> |
| @Override |
| public boolean onKeyDown(int keyCode, KeyEvent event) { |
| if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { |
| mWebView.goBack(); |
| return true; |
| } |
| return super.onKeyDown(keyCode, event); |
| } |
| </pre> |
| <p>This {@link android.app.Activity#onKeyDown(int,KeyEvent)} callback method will be called |
| anytime a button is pressed while in the Activity. The condition inside uses the {@link |
| android.view.KeyEvent} to check whether the key pressed is the BACK button and whether the |
| {@link android.webkit.WebView} is actually capable of navigating back (if it has a history). If |
| both are true, then the {@link android.webkit.WebView#goBack()} method is called, |
| which will navigate back one step in the {@link android.webkit.WebView} |
| history.Returning <code>true</code> indicates that the event has been handled. If this condition |
| is not met, then the event is sent back to the system.</p> |
| </li> |
| <li>Run the application again. You'll now be able to follow links and navigate back through the |
| page history.</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> |