TUTORIAL. BUILDING A SIMPLE MAPPING APPLICATION

Transcription

1 Cleveland State University CIS493. Mobile Application Development Using Android TUTORIAL. BUILDING A SIMPLE MAPPING APPLICATION The goal of this tutorial is to create a simple mapping application that we will call Adonde? We assume you have installed the most recent Android SDK [1], you have obtained a Google Maps API key [3], and your Eclipse IDE includes the ADT plugin [2]. The user of this application will type in a valid address and a map of the given place will be drawn on the phone s screen. Figure 1-(Left) depicts on a road map the location of Cleveland State University. The expected input is an address such as 123 Main Ave. Cleveland OH, or a location such as Rock and Roll Hall of Fame. Observe the map includes a view control to zoom in and out. You can also touch the screen and drag the map on any direction. As you already know, when a new Android application is created the Eclipse ADT provides the basic skeleton of the solution. The code is stored in a package inside the /src folder; resources such as pictures, files, etc. are stored in the /res subdirectory (see Figure 1-Right). In our example the class Adonde extends Android s native MapActivity interface which provides means of displaying and navigating a map held in a MapView container. The GUI definition holding the MapView widget- is stored as an XML document in the /res/layout/main.xml file. The AndroidManifest.xml file contains a list of all the activities, and special permissions requested by the application. Now we are ready to work on the program. Figure 1: (Left) Screen-shot of the Android Adonde application showing a map and coordinates of Cleveland State University. (Right) Structure of the app shown from Eclipse s Package Explorer. V. Matos Adonde Tutorial - 1

2 CREATING THE APPLICATION STEP 1. Open the AndroidManifest.xml file and add the following statement as a child of the <application> element: <uses-library android:name="com.google.android.maps" /> We need Internet access to retrieve the Google Maps tiles, so the application must request the INTERNET permissions. In the AndroidManifest file, add the following statement as a child of the <manifest> element: <uses-permission android:name="android.permission.internet" /> STEP 2. Now open the main layout file for your project. Define a nested linear layout to hold the GUI component as indicated below. <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:layout_height="fill_parent" android:orientation="vertical" xmlns:android=" > <TextView android:id="@+id/mycaption" android:layout_width="wrap_content" android:text="address/coordinates" /> <LinearLayout android:orientation="horizontal" > <EditText android:id="@+id/myaddress" android:layout_width="260px" android:hint="enter location (address)" android:textsize="18sp" /> <Button android:id="@+id/mybtnsearch" android:layout_width="59px" android:text="go" /> </LinearLayout> <com.google.android.maps.mapview android:id="@+id/mymap" android:apikey= "Your personal Google Maps key goes here" android:layout_height="350px" android:clickable="true" /> </LinearLayout> A personal Google Map Key is required for each developer. V. Matos Adonde Tutorial - 2

3 The android:clickable= true clause consents to user-interaction with the map. The android:apikey attribute holds the public Google Maps API Key obtained after you register with the Google Maps service[5]. STEP 3. Now open the Adonde.java file. Instead of a general purpose Activity class we want to override the specialized MapActivity interface. We also need to add our rendition of the mandatory isroutedisplayed() method. Change the class declaration to: public class HelloMapView extends MapActivity protected boolean isroutedisplayed() { return false; Continue working with the Adonde class, now add a definition for our class variables private TextView lblcaption; private EditText txtaddress; private Button btnsearch; private MapView mymap; private double lat, lon; We proceed overriding the oncreate method. Here the GUI components introduced in the XML layout will be wired-up to the Java objects defined above. A call to findviewbyid associates the internal object identifier given to a GUI object to its corresponding class variable. For instance txtaddress is the object handler for the GUI EditText control defined as protected void oncreate(bundle icicle) { super.oncreate(icicle); setcontentview(r.layout.main); txtaddress = (EditText) findviewbyid(r.id.myaddress); lblcaption = (TextView) findviewbyid(r.id.mycaption); btnsearch = (Button) findviewbyid(r.id.mybtnsearch); mymap = (MapView) findviewbyid(r.id.mymap); mymap.setbuiltinzoomcontrols(true); The method setcontentview loads the GUI file (main.xml) on the screen. The last statement adds zooming capabilities to the MapView. Now we introduce the command button and its listener. Type in the following code: btnsearch = (Button) findviewbyid(r.id.mybtnsearch); btnsearch.setonclicklistener(new OnClickListener() { public void onclick(view v) { geoc = new Geocoder(getApplicationContext()); V. Matos Adonde Tutorial - 3

4 String inputaddress = txtaddress.gettext().tostring(); try {//make an Address list with top 3 matches List<Address> lstfoundaddresses = geoc.getfromlocationname( inputaddress, 3); if (lstfoundaddresses.size() == 0) showmsg("nothing found - Invalid address"); else { navigatetolocation(lstfoundaddresses.get(0), mymap ); catch (Exception e) { showmsg(e.getmessage()); // onclick ); // btnsearch GeoCoder is an Android class used to associate a physical address to its coordinate values (stored in a GeoPoint as latitude and longitude in microdegrees). When the command button is pressed the string in the txtaddress box is passed as a GeoCoder object to the method getfromlocationname. This method makes an Internet call to the Google Maps Service server and returns a list of the best n matches. In our example we ask for 3 options, however we just look at the first address and ignore the rest of the list. This process is called reverse geo-coding because we go from a textual address to a numeric coordinate value. The method navigatetolocation draws the map centered on the given latitude and longitude pair. Continue the tutorial by entering the code: public void navigatetolocation( Address adr, MapView map) { try { //covert coordinate microdegrees to integer values double latitude = adr.getlatitude() * ; double longitude = adr.getlongitude() * ; lblcaption.settext("lat:" + latitude + " Lon: " + longitude); GeoPoint geopt = new GeoPoint((int) latitude, (int) longitude); MapController mapctrl = map.getcontroller(); mapctrl.animateto(geopt); // move map to the GeoPt mapctrl.setzoom(17); // zoom at chosen level mapctrl.setcenter(geopt); // center the map on GeoPt map.setsatellite(false); // display road-map view map.settraffic(false); // do not show traffic info catch (Exception e) { showmsg( e.getmessage() ); // navigatetolocation In this fragment the coordinates found earlier are used to center the corresponding map. In our example the location is displayed using a zooming factor of 17 (max is 21), and intentionally disregard satellite and traffic view. The map is clickable therefore it could be dragged and resized. We need just to add our showmsg method; it is used to display messages that fade from the screen after a few seconds. V. Matos Adonde Tutorial - 4

5 private void showmsg(string themsg){ Toast.makeText(getApplicationContext(),theMsg, Toast.LENGTH_SHORT).show(); //showmsg at this point our application is ready to run! 6. REFERENCES [1] Android Developer s Guide available at: [2] Eclipse IDE Plugin for Android. Available at Accessed Feb [3] Obtaining a Google Maps API Key. Available at Accessed Feb [1] Matos, Victor. CIS493 Special Topics in Computer Science. Available at: Accessed February [2] Matos, Victor and Ben Blake. I am OK - A Conceptual Model for a Global Emergency System and Its Societal Impact. International Journal of Technology, Knowledge and Society. Vol. 2 No. 5, pp.7-18, January V. Matos Adonde Tutorial - 5