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;
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