How To Build An Android Map App - Hive Programmers

Greetings to my favorite science community online, StemSocial.

It's @skyehi and since it's the weekend, programming tutorial came in early, well at least based on my time zone. I'm really excited to be back to continue my series on Android App development tutorials for beginners.

For today's blog we're going to be building a really special App and it's my way of introducing you to special location based functionalities on Android.

We're going to be building basic Android Map like Google maps. However it wouldn't be as complicated as the Google maps since this is a tutorial for beginners.

Our App will be able to display the map using Google services and we would be integrating location-based functionalities into the application.

Original Image Source by Boskampi from Pixabay

Tools Required

Now guys, if you're new to my series, this part is for you. You would need to have certain softwares downloaded and installed on your computer to be able to go through with this tutorial.

You would need to install Android Studio IDE which is the platform on which we'll be building our Android Apps.

You would also need to ensure that Java Developer Kit software is successfully installed on your computer.

If you're having troubles downloading or installing any of this softwares, please let me know in the comments section and I'll be of help.

However here's a video I think can help you go through the steps with no problems.

Setting Up Our Project

At this point, I'll assume everyone has successfully installed the required softwares. We'll start by launching Android Studio and creating a new project.

As we usually do with these tutorials, please choose the Empty Activity template to make building the app less complicated.

Also, you'll have the option to choose a suitable App name and package name.

---

Adding Google Maps API Key

Alright guys, this is the first time I'm introducing in my tutorials series the use of Google API.

It's a very necessary step because in order for us to be able to utilize Google Maps, our App would require an API key.

To do this we need to go to the Google cloud website. Here's the link to the website guys;

Google Cloud Console

When you get to the website, follow the prompts to create a new project, activate the "Maps SDK for Android," and generate your API key. This should be a very simple process guys and if you're having troubles with that, let me know in the comments section.

Now that we have our API key, we need to add the key to the AndroidManifest.xml file.

Here's how your code should look like.

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>

Designing the Layout

It's now time to design the layout. This will certainly be the easiest part of our work because all we need to do is to utilize the Google Map layout API. It will be done in a simple fragment layout inside our activity_main.xml file.

So guys open activity_main.xml file and integrate a fragment to hold the map.

Here's how your code should look like;

<fragment
    android:id="@+id/mapFragment"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Setting Up The Google Maps

It's now time for the backend code. This is the part where we use the Google Map API to build our map and determine which location the marker on the map will be.

The code will be written inside our MainActivity.java file. We will start by initializing the map within the onCreate method. Please note that the initialization code will be written within the onCreate method. Writing outside the onCreate method could either lead to an error or the app could crash.

Here's how your code should look like.

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.mapFragment);
        mapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        LatLng dubai = new LatLng(25.276987, 55.296249); // Coordinates for Dubai
        googleMap.addMarker(new MarkerOptions().position(dubai).title("Marker in Dubai"));
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(dubai));
    }
}

Requesting Location Permissions

It's time for us to write the code to request location Permission in our Android App. Just like we did in our previous App tutorial, we would request permission in both AndroidManifest.xml file and MainActivity.java

In order for us to activate location services in the App, we need to include the following code in the AndroidManifest.xml file.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Now in our MainActivity.java we would also request location permissions.

Here's how your code should look like.

private static final int LOCATION_PERMISSION_REQUEST_CODE = 1;

if (ContextCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION)
        != PackageManager.PERMISSION_GRANTED) {
    ActivityCompat.requestPermissions(this,
            new String[]{Manifest.permission.ACCESS_FINE_LOCATION},
            LOCATION_PERMISSION_REQUEST_CODE);
} else {
    // Permission has already been granted
}

Handling Location Permission Result

This is a similar process to what we did in yesterday's blog. After writing the permission code, we have to write a code that would handle the Permission result.

To do this step correctly, we need to override the onRequestPermissionsResult method in the MainActivity.java to manage the outcome of the location permission request

@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    if (requestCode == LOCATION_PERMISSION_REQUEST_CODE) {
        if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            // Permission granted, proceed accordingly
        } else {
            // Permission denied, handle as needed
        }
    }
}

Running The App

Congratulations guys, we're done with the building of our Android Map. It's now time to see the results of our work.

As always, you can either run the App on an emulator or a physical device equipped with Google Play services.

When the App opens, you should see a basic map displaying a marker in Dubai. You can also change the city to any city you like.

---

I'll draw the curtains here on today's blog. Thank you so much for taking the time to read today's blog. I hope you enjoyed it guys. If you have any question or comment regarding today's tutorial, please let me know in the comments section below.

Have a lovely day and catch you next time on StemSocial. Goodbye ✍️

You Can Follow Me @skyehi For More Like This And Others