As always, let's not start coding until we have a good idea about how we want our app to look. Thankfully, we really only have to focus on the map view. We've already covered the look and feel of our document manager in the previous project, and it's not changed much here. Furthermore, since a good portion of the view will actually be taken up by the interactive map provided by Google, there's not even a lot we have to do there.
Once again, get your pencil and paper out or your favorite graphics editor; we'll be using them to design our wireframe and then build out any of the assets we might need later on.
The following screenshot gives a final mockup of our map view:
At first glance, this appears like a pretty simple view—and it is—but don't let that fool you. There's a lot of power underneath!
Let's go over the various items:
- The Back button will take the user back to the document management interface. For Android, of course, this button will not be present; the device's physical back button will do the trick.
- The title on the navigation bar will be the title of the document. The user can tap on it to change the document via a prompt alert from our framework.
- The button with the globe is intended to be the find me button. The view will automatically do this when shown, but one of the hallmarks of an interactive map is that you should be able to explore it on your own without constantly being dragged back to your current position. This button is intended to re-center your map after you've done some exploration.
- The button with the red dot is the record button. When tapped the view will begin to record your position (as often as it changes) and draw a line following your progress. If tapped again, it will stop tracking your location.
- Below the navigation bar is the Google Map (here, an X image). This will, of course, be populated from Google. Moving the map with your finger will, of course, pan the map, but more importantly, we will catch this event so that we can unlock the map from your current location.
- The downward pointing arrow is a representation of the typical Google Marker; this will indicate your current position.
- The line is a representation of some path already recorded; it will indicate every update in your path during the recording.
Now that we've defined how everything should work together, let's go into our graphics program and create the graphical assets we'll need.
The documents view will be as follows:
The map view will be as follows:
Generally, we've used the same assets as for our previous project, though our document image has changed to a map. We'll also need to use the images on our buttons, one for the standard find me icon, and two for the various states of the record button—a circle (for record) and a pause icon (not shown). These icons are from App-Bits' free icon set available at http://app-bits.com/free-icons.html. You might want to go ahead and download that set as well, if you haven't already.
In this task we've covered how the user interface will be designed and how the various pieces of it will work. We skipped discussing the document manager since it is virtually identical to the prior project, the only thing that has changed is the image we're using and the file extension.