This Android post shows how to display a WebView inside a Dialog, that renders a website to the user. Since the WebView can load just about any web page, it’s possible to provide any information to users without launching the web browser, so they never have to leave the application.
For this tutorial, all code had been developed and tested in Android 2.1, both on an emulator and on a real device. As usual, an example application with the code featured in this tutorial is available for download at the end of the post.
The first thing required to place a WebView inside a dialog is to create a custom Dialog. After that, a WebView can be added to it. The easiest way to do that is to create a new Android layout file (in Eclipse, just right click the Project folder and select New -> Android XML file). Then, add the following code:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <RelativeLayout android:id="@+id/rl_relativeLayout" android:layout_width="fill_parent" android:layout_height="250dip" android:layout_gravity="center_horizontal" android:layout_margin="10dip" > <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Latest Updates:" android:textAppearance="?android:attr/textAppearanceMedium" android:textStyle="bold" android:layout_centerHorizontal="true"/> <WebView android:id="@+id/wb_webview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_below="@id/tv_title" android:layout_marginTop="5dip"/> </RelativeLayout> <Button android:id="@+id/bt_close" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dip" android:layout_marginRight="10dip" android:text="Close" /> </LinearLayout>
There’s nothing special about this layout XML file. The root of the layout is just a LinearLayout ViewGroup and a RelativeLayout that holds a TextView and the WebView. In Eclipse, this layout preview looks like this:
For this tutorial, a main.xml has also been created. It’s the first View that the application displays and it just holds a button that launches the WebView dialog. Since there’s nothing more than that, there’s no need to explain it in detail.
At the beginning of this Activity, four View objects are being declared: a Dialog, a WebView and two Button objects (lines 15 through 22). Next the OnCreate() method is being defined. Inside it, the first View to be initialized is the one that launches the WebView dialog. It’s being inflated from the main.xml file (line 33). Then, a new OnClickListener is set for this button, defining that the dialog should be displayed if the former ever gets pressed (lines 36 through 44).
Next, the webViewDialog is initialized by passing the current context to the constructor (line 47). Right after that line, the title of the currently initialized dialog is removed (line 49) and it’s inflated with the View elements defined at the webviewdialog.xml file (line 51). Lastly, this Dialog instance is set to be dismissed when the back key is pressed (line 53).
The second Button instance is then initialized by inflating it with data from the webviewdialog.xml file (line 56). Note that, instead of calling the findViewById() method from WebViewDialogActivity, it has been called from the Dialog instance (webViewDialog). That’s because the ViewParent for this View is webViewDialog, and not the root View of this Activity. Just like the first button, the OnClickListener is being defined, however, this time, it assigns a different action to the button: it should dismiss the dialog when it has been pressed (lines 58 through 66).
Back to the code, lines 79 and 81 clear the current cache and make the defined URL to be loaded by the WebView. For this example, the WebView will load a HTML located at the html folder at the root of the SD card. This folder has also been included in the source code. Therefore, to correctly execute the example project, push the folder onto the target device using ADB commands or Eclipse. It’s worth mentioning that the WebView can load any offline and online URL, for example www.41post.com, just by passing it to the loadUrl() method – it doesn’t have to necessarily be a local HTML file.
After placing the html folder in the SD card and executing the app, you will get the following:
This code basically checks whether the user agent is AndroidWebView. Case that’s true, the styleandroidwv.css file is loaded. If it’s not, the page is rendered normally with the style.css file. Therefore, the user agent name for the WebView has to be unique in order for this type of filtering to work.
By doing so, it’s possible to correctly render an existing website inside a WebView with minor alterations to the existing HTML and scripts placed on the sever side. At the official WebView Documentation page, there are other examples of DOM meta tags that can be used to further customize how the website is displayed based on the device screen density. Also, it explains how the elements rendered by the WebView are scaled by default.
One last thing: don’t forget to add the Internet access permission to the manifest file, like this: