How to develop location based Android App

In this tutorial, I’ll show you how you can develop an app that allows you to record list of addresses and view the address on the Google Maps. I will also show you how to view your current location on the Google Map. The coding will be done using MIT App Inventor.

What will be covered in this tutorial?  In this tutorial, you’ll learn the basics of:

• List manipulation – creating lists, appending items to lists
• ListPicker – adding items to lists, persisting to database
• LocationSensor – detecting current location for displaying on Google Maps
• ActivityStarter – used to start-up Google Maps for current or predefined address
• Notifier – displaying messages
• TinyDB – persisting data (lists) into database
• Misc. – text manipulation, basic validation

We will be working toward the design shown in Figure-1 blow:

Figure-1

 

Figure-2 below is showing you, at high level, how the components are arranged in our design editor. It also shows you the non-visible components (e.g. TinyDb, ActivityStarter, LocationSensor, Notifier). that are used in the sample app. It also shows you the ListPicker. Please note that ListPicker can be dropped anywhere in the design editor because using the blocks, we set that hidden.

Figure-2

 

Assumption: This tutorial assumes you know the basics of App Inventor. For additional tutorials, please see HERE.

App Inventor Blocks

We define 2 global variables.

• tagAddress  a variable is a constant and will be used, as a tag, for storing / retrieving data from our database.
• listLocations – a variable that be used to store / manipulate list of addresses

We now create a procedure that can be invoked when the app is started (initialized). The procedure sets up the initial state of some of the components. Some of these settings could have been done from the design editor, but for demo purpose and clarification, we are using a procedure. In the procedure, we also check our database to find out if there are any stored addresses. If no data, then we just use an empty list.

Figure-3

Viewing stored locations

We use a button, btnViewLocations, that user can tap to view all user-specified addresses in a ListPicker. If validation goes through (e.g. address list not empty), this button will invoke our ListPicker.Open to display the addresses. The ListPicker component has been set to not-visible (see our init procedure in top figure). The blocks for the clicked event of this button is shown below. When button is clicked, we check to see if our listLocations contains any data. If not, display error message, otherwise we open our ListPicker using ListPicker1.Open block:

Figure-4

 

Adding new addresses:

To add a new address, we have dropped a button (btnAddLocation ‘Add Location’). We also use a button (btnCancel ‘Cancel’) to cancel the process of adding.  We also use a button btnAddLocatoinhelp ‘Location Help’) to display what type of addresses can be entered. The blocks looks like below:

Figure-5

 

When btnAddLocation is clicked, we make our address data entry visible (using screen arrangement), allowing user to enter address. If user clicks on cancel, we make the arrangement hidden again. Using this approach, we keep the screen simple and avoid the clutter. We also provide a button (btnSubmit ‘Submit’), allow user to indicate that they want to store data. The data entry arrangement looks like below:

Figure-6

 

When user taps on btnSubmit ‘Submit’ button, we perform basic validation to ensure data has been submitted. If validation does not pass, we display error message. Otherwise, we invoke a procedure that appends the new address to our list. We also store the updated list into our database. Once address is added, we hide our arrangement again.  Blocks below shows how this logic is done:

Figure-7

 

When user selects an address from the opened ListPicker, we display the address in the device and allow user to tap on btnViewMap ‘View on Map’ to see the selected address on the Google Map. Figure-8 shows the blocks for ListPicker.AfterPicking and Figure-9 shows how it is displayed on the device or emulator.

Figure-8

 

Figure-9

 

When the btnViewMap ‘View on Map’, we validate to ensure that an address already has been selected. If not, display error message otherwise we use blocks shown in Figure-10 to show address:

Figure-10

 

The above blocks will open the map and the output will be like image below:

Figure-11

 

Viewing current location on the map

We have dropped in a button, btnMyLocation ‘My location on the map’ that can be clicked to view current location on the map. It will use LocationSensor to get the current address and will use blocks shown in Figure-12 to show current location on the map:

Figure-12

 

Download source / apk

• Click HERE to download .apk
• Click HERE to download source