Mapbox Realtime Navigation- Build a sample app in Android-Kotlin PART 1

Hello, today I’m going to take one of the most important topics which personally for me was very time consuming to figure out. So to make things easier for you, here I’m writing about how to customize Mapbox realtime navigation UI. I faced many issues while I was implementing it on one of my projects. The requirement was not only to perform the real time navigation but it also included the custom UI of the navigation view. It consumed way too much time to implement so I thought to share with you and it may help you as well.

This blog is going to be a bit lengthy so I rather decide to divide it into two parts.

1. First part will contain the basic information i.e

• What is Mapbox?
• How to set up a project for the map box?
• Way to build a sample app demo of mapbox.

2. Second part will contain the real time navigation demo and how we can customize the UI.

What is Mapbox?

Mapbox is an open source mapping platform for custom designed maps. Mapbox provides APIs and SDKs for Android is a toolset for displaying maps inside of your Android application.

How to set up a project for the map box?

Before you develop your application with the Maps SDK, you will need to Signup in https://www.mapbox.com/ to get access token if you do not have a mapbox account, otherwise login. For more check this

Steps to create a new project with kotlin.

This article is for the beginners too. So, I simplified the steps for creating the project.

• Go to File
• Select Empty Activity
• Give the name of the project MapboxCustomViewNavigation
• Set the package name com.mapboxcustomviewnavigation
• Set the Location of your workspace
• Select Language Kotlin
• Click on Finish

Now our project is ready. Add below modules to your project.

1. libnavigation-core is an entry point for interacting with the Mapbox SDK. Only one instance of this class should be used as per application process.
2. libnavigation-util is for generic exception for all things Mapbox Navigation.
3. libnavigator provides an API to work with native Navigator class and exposed for internal usage only.
4. libtrip-notification provides notification for the navigation process .
5. libnavigation-router provides an API to fetch routes and cancel route-fetching requests.
6. libnavigation-metrics It contains MapboxMetricsReporter and events for background thread also you can set desire type of Matric i.e ROUTE_RETRIEVAL, ARRIVE, DEPART
7. libnavigation-base for number of formatters and unit type for the specified locale.

• Add navigation-ui dependency as a module and other dependency of Mapox to your app gradle file because we will customize it.

• Add below code to your project gradle file.

Now our project is ready to build a sample Mapbox app

• Add Mapview to your .xml file

• Set your access token to string.xml file

<string name=”mapbox_access_token”>”YOUR_ACCESS_TOKEN”</string>

• Put the below line in your onCreate method of your class file before setting your layout.

Mapbox.getInstance(this, getString(R.string.mapbox_access_token));

• To initialize mapbox, add :

mapView.onCreate(savedInstanceState)
mapView.getMapAsync { mapboxMapView ->
mapboxMap = mapboxMapView
}

• To add camera animation to your map add :

• Set style and add marker to your mapbox add :

• You can get a route of two points(origin & destination) by using the following method.

Whether to return steps and turn-by-turn instructions (true) or not (false, default). For more check this

• You will get the duration of the route from DirectionsRoute, which you will get by adding the above method.

routeRoute!!.duration()

So this is how you create a sample app for real time navigation. You can check full source code from here.

Another article on customize the UI of navigation will soon be uploaded.

Happy Codding:)