Publishers of technology books, eBooks, and videos for creative people

Home > Articles

📄 Contents

  1. Creating a Basic Form
  2. Displaying Images
  3. Creating Maps and Displaying Websites
  4. Wrapping Up
  • Print
  • + Share This
This chapter is from the book

Creating Maps and Displaying Websites

The typical Android device ships with a built-in GPS receiver and an always-on network connection. This provides tremendous opportunities for developers to leverage these features and create compelling location-aware applications. Android devices include access to Google’s mapping technology, which you can use to add full-fledged navigation to your app. And the built-in Webkit browser gives you the power to create your own web-browsing applications. The next sections cover the basics of using these advanced views.

MapView

Unlike other views and classes in Android, maps are not part of the core library. They are provided by Google and are available to any application running on an Android-compatible device. Notably, this does not include devices that do not conform to the Android Compatibility Definition, such as the Kindle Fire. You will be unable to use Google Maps on those devices. However, most devices meet the Android specifications and support Google Maps integration.

You can set up your project to use maps as follows:

  1. Visit the Google APIs site (http://code.google.com/android/add-ons/google-apis/), and register for a map key. Map views are provided as part of the com.google.android.maps package, and you will need to register for a Google Maps API key in order to use this package.
  2. Using the Android SDK Manager, download the Google APIs version of the Android SDK that you intend to support. You can use this SDK to create a new AVD image that supports MapView. Make sure you select a Google APIs target for your image.
  3. Declare that your application requires the external Google Maps library to run by adding this to your manifest under the <application> element:

    <uses-library android:name="com.google.android.maps" />
  4. Google Maps requires a network connection, so you need to add the android.permission.INTERNET permission to your manifest:
    <uses-permission android:name="android.permission.INTERNET" />

With those tweaks, you can use maps in your application. You add a map view to your layout like you would add any other view:

<com.google.android.maps.MapView

    android:id="@+id/mapview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:apiKey="Your Maps API Key"
    android:clickable="true" />

Note that the element name highlighted in the code is the full package name—anytime you use a custom view that is not part of the core Android library, you need to specify the full package name. You will need to declare the ID of the MapView as mapview. Also, there are two new attributes here. The first is the apiKey attribute, which is where you will place the Google Maps API key you get from Google. This enables you to use Google’s mapping service. The second new attribute is the clickable setting. Setting this to true allows the user to tap and scroll on the MapView in your UI; setting it to false will prevent all interaction with the map.

To actually use a map view in your layout, your activity will need to extend MapActivity, which handles all the setup of the map view, and override the isRouteDisplayed method, which is required by the Google Maps license agreement and should return a Boolean that indicates whether there is active routing information displayed on the map (Figure 4.10).

Figure 4.10

Figure 4.10 A MapView example.

WebView

Android includes a Webkit-based HTML rendering engine backed by the V8 JavaScript interpreter. You can use these technologies in your own application by using the WebView class. A web view renders HTML from web URLs, files stored on the device, or arbitrary strings you create in your app. Android’s WebView includes standard browser features like history, plugins, zooming controls, and JavaScript support. You can also enable advanced gestures like pinch to zoom, providing easy navigation on touchscreen devices.

Like the map view, the web view can be added to your application with a simple XML element:

<WebView

    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

You will need to enable the INTERNET permission in your manifest for your web view to access online webpages. The web view does all downloading and rendering of webpages, and you won’t need to extend any special activities or use a special ID. With a web view in your UI, loading a webpage is as simple as adding the following code:

WebView webView = (WebView) findViewById(R.id.webview);

webView.loadUrl("http://www.google.com");

With that, you can display any webpage to the user in your custom UI layout. Note that the supplied content highlighted in the example is an actual webpage URL. It’s also possible to load an arbitrary string containing HTML for display.

The web view defaults don’t include JavaScript or Flash support. To enable that, you’ll need to use a WebSettings object:

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true);
webSettings.setPluginState(WebSettings.PluginState.ON);

This enables JavaScript and plugins—including Flash, if it’s installed—in the web view. Adding zoom controls and pinch-to-zoom functionality is also simple:

webSettings.setSupportZoom(true);

webSettings.setBuiltInZoomControls(true);

The first line indicates that the web view will support zooming its contents. The second line uses the web view’s built-in zoom controls for performing the zoom (this includes the tap-to-zoom and pinch-to-zoom functionality).

Finally, you will likely want to override the loading of new URLs in your web view. If you don’t do so, when the user taps on a new URL in the web view, the default browser will open to load the new link. To force the load to occur in your web view, add the following code:

webView.setWebViewClient(new WebViewClient() {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
});

Here the URL loading behavior is overridden, and the new URL is loaded in the existing web view. Returning true will discontinue the propagation of the event up the view hierarchy and prevent the browser from opening. Figure 4.11 shows the screen of this activity.

Figure 4.11

Figure 4.11 The web view displaying Google’s homepage

The web view allows you to present any HTML content to the user and provides an easy way to load pages from the Internet. You should take advantage of it whenever your application needs to display HTML content.

  • + Share This
  • 🔖 Save To Your Account