Browsing the Web with WebView Android

Applications that retrieve and display content from the Web often end up displaying that data on the screen. Instead of customizing various screens with custom controls, Android applications can simply use the WebView control to display web content to the screen. You can think of the WebView control as a browser-like view.

The WebView control uses the WebKit rendering engine to draw HTML content on the screen. This content could be HTML pages on the Web or it can be locally sourced. WebKit is an open source browser engine. You can read more about it on its official website .

Using the WebView control requires the android.permission.INTERNET permission. You can add this permission to your application’s Android manifest file as follows:

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

When deciding if the WebView control is right for your application, consider that you can always launch the Browser application using an Intent. When you want the user to have full access to all Browser features, such as bookmarking and browsing, you’re better off launching into the Browser application to a specific website, letting users do their browsing, and having them return to your application when they’re done. You can do this as follows:

Uri uriUrl = Uri.parse(“http://androidbook.blogspot.com/”);
Intent launchBrowser = new Intent(Intent.ACTION_VIEW, uriUrl);
startActivity(launchBrowser);

Launching the Browser via an Intent does not require any special permissions. This means that your application is not required to have the android .permission .INTERNET permission. In addition, because Android transitions from your application’s current activity to a specific Browser application’s activity, and then returns when the user presses the back key, the experience is nearly as seamless as implementing your own Activity class with an embedded WebView.

Designing a Layout with a WebView Control

The WebView control can be added to a layout resource file like any other view. It can take up the entire screen or just a portion of it. A typical WebView definition in a layout resource might look like this:

<WebView
android:id=”@+id/web_holder”
android:layout_height=”wrap_content”
android:layout_width=”fill_parent”
/>

Generally speaking, you should give your WebView controls ample room to display text and graphics. Keep this in mind when designing layouts using the WebView control.

Loading Content into a WebView Control

You can load content into a WebView control in a variety of ways. For example, a WebView control can load a specific website or render raw HTML content. Web pages can be stored on a remote web server or stored on the device.

Here is an example of how to use a WebView control to load content from a specific website:

final WebView wv = (WebView) findViewById(R.id.web_holder);
wv.loadUrl(“http://www.perlgurl.org/”);

You do not need to add any additional code to load the referenced web page on the screen. Similarly, you could load an HTML file called webby.html stored in the application’s assets directory like this:

wv.loadUrl(“file:///android_asset/webby.html”);

If, instead, you want to render raw HTML, you can use the loadData() method:

String strPageTitle = “The Last Words of Oscar Wilde”;
String strPageContent = “<h1>” + strPageTitle +
“: </h1>”Either that wallpaper goes, or I do.””;
String myHTML = “<html><title>” + strPageTitle
+”</title><body>”+ strPageContent +”</body></html>”;
wv.loadData(myHTML, “text/html”, “utf-8”);

The resulting WebView control is shown in Figure.

WebView control used to display HTML.

WebView control used to display HTML.

Unfortunately, not all websites are designed for mobile devices. It can be handy to change the scale of the web content to fit comfortably within the WebView control. You can achieve this by setting the initial scale of the control, like this:

wv.setInitialScale(30);

The call to the setInitialScale() method scales the view to 30 percent of the original size. For pages that specify absolute sizes, scaling the view is necessary to see the entire page on the screen. Some text might become too small to read, though, so you might need to test and make page design changes (if the web content is under your control) for a good user experience.

Adding Features to the WebView Control

You might have noticed that the WebView control does not have all the features of a full browser. For example, it does not display the title of a webpage or provide buttons for reloading pages. In fact, if the user clicks on a link within the WebView control, that action does not load the new page within the view. Instead, it fires up the Browser application.

By default, all the WebView control does is display the web content provided by the developer using its internal rendering engine,WebKit. You can enhance the WebView control in a variety of ways, though. You can use three classes, in particular, to help modify the behavior of the control: the WebSettings class, the WebViewClient class, and the WebChromeClient class.

Modifying WebView Settings with WebSettings

By default, a WebView control has various default settings: no zoom controls, JavaScript disabled, default font sizes, user-agent string, and so on. You can change the settings of a WebView control using the getSettings() method. The getSettings() method returns a WebSettings object that can be used to configure the desired WebView settings. Some useful settings include

  • Enabling and disabling zoom controls using the setSupportZoom() and setBuiltIn ZoomControls() methods
  • Enabling and disabling JavaScript using the setJavaScriptEnabled() method
  • Enabling and disabling mouseovers using the setLightTouchEnabled() method
  • Configuring font families, text sizes, and other display characteristics

You can also use the WebSettings class to configure WebView plug-ins and allow for multiple windows.

Handling WebView Events with WebViewClient

The WebViewClient class enables the application to listen for certain WebView events, such as when a page is loading, when a form is submitted, and when a new URL is about to be loaded. You can also use the WebViewClient class to determine and handle any errors that occur with page loading. You can tie a valid WebViewClient object to a WebView using the setWebViewClient() method.

The following is an example of how to use WebViewClient to handle the onPageFinished() method to draw the title of the page on the screen:

WebViewClient webClient = new WebViewClient() {
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
String title = wv.getTitle();
pageTitle.setText(title);
}}; wv.setWebViewClient(webClient);

When the page finishes loading, as indicated by the call to onPageFinished(), a call to the getTitle() method of the WebView object retrieves the title for use. The result of this call is shown in Figure.

WebView control with microbrowser features such as title display.

WebView control with microbrowser features such as title display.

Adding Browser Chrome with WebChromeClient

You can use the WebChromeClient class in a similar way to the WebViewClient. However, WebChromeClient is specialized for the sorts of items that will be drawn outside the region in which the web content is drawn, typically known as browser chrome. The WebChromeClient class also includes callbacks for certain JavaScript calls, such as onJsBeforeUnload(), to confirm navigation away from a page. A valid WebChromeClient object can be tied to a WebView using the set Web Chrome Client() method. The following code demonstrates using WebView features to enable interactivity with the user. An EditText and a Button control are added below the WebView control, and a Button handler is implemented as follows:

Button go = (Button) findViewById(R.id.go_button);
go.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
wv.loadUrl(et.getText().toString());
}
});

Calling the loadUrl() method again, as shown, is all that is needed to cause the WebView control to download another HTML page for display, as shown in Figure. From here, you can build a generic web browser in to any application, but you can apply restrictions so that the user is restricted to browsing relevant materials.

WebView with EditText allowing entry of arbitrary URLs.

WebView with EditText allowing entry of arbitrary URLs.

Using WebChromeClient can help add some typical chrome on the screen. For instance, you can use it to listen for changes to the title of the page, various JavaScript dialogs that might be requested, and even for developer-oriented pieces, such as the console messages.

WebChromeClient webChrome = new WebChromeClient() {
@Override
public void onReceivedTitle
(WebView view, String title) {
Log.v(DEBUG_TAG, “Got new title”);
super.onReceivedTitle(view, title);
pageTitle.setText(title);
}
};
wv.setWebChromeClient(webChrome);

Here the default WebChromeClient is overridden to receive changes to the title of the page. This title of the web page is then set to a TextView visible on the screen.

Whether you use WebView to display the main user interface of your application or use it sparingly to draw such things as help pages, there are circumstances where it might be the ideal control for the job to save coding time, especially when compared to a custom screen design. Leveraging the power of the open source engine, WebKit, WebView can provide a powerful, standards-based HTML viewer for applications. Support for WebKit is widespread because it is used in various desktop browsers, including Apple Safari and Google Chrome, a variety of mobile browsers, including those on the Apple iOS, Nokia, Palm WebOS, and BlackBerry handsets, and various other platforms, such as Adobe AIR.


Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Android Topics