Here’s how I created an AR based Navigation System

Ever since Google announced Augmented Reality based Navigation in Google Maps almost all its users would have fantasized about it. But there have been many scenarios that would have halted its course in means of getting AR-based location marker, mapping of traffic congestion, etc

So, out of curiosity, I tried to work on producing a similar AR-based navigation system on Android that does only one thing — draw the AR navigation path alone. So initially, I tried on with OpenCV techniques to achieve this but it went haywire. So, after some period I found an interesting piece of article in MapBox’s Vision SDK.

As the First step, we have to set the library file and declare the gradle dependencies

implementation (‘com.mapbox.mapboxsdk:mapbox-android-sdk:8.4.0@aar’){



implementation “com.mapbox.mapboxsdk:mapbox-android-telemetry:4.6.0”

implementation (‘com.mapbox.mapboxsdk:mapbox-android-services:2.2.9@aar’){



implementation(“com.mapbox.mapboxsdk:mapbox-android-accounts:0.3.0”) {

force = true


api “com.mapbox.mapboxsdk:mapbox-android-navigation-ui:0.41.0”

implementation ‘com.mapbox.mapboxsdk:mapbox-android-navigation-ui:0.41.0’

implementation “com.mapbox.mapboxsdk:mapbox-android-navigation:0.41.0”

implementation “com.mapbox.mapboxsdk:mapbox-android-core:0.2.1”

Download the .aar files by setting up your Mapbox account from the below link

Place the .aar files in your system and add the path to your app Gradle

implementation files(‘~\\mapbox-android-vision-release.aar’)

implementation files(‘~\\mapbox-android-vision-ar-release.aar’)

implementation files(‘~\\mapbox-android-vision-safety-release.aar’)

So, I slightly modified the MapBox to suit my requirement here. I created a page to get the destination point. Once we click on the map, the destination is set where the 2D map similar to the one produced in Google map is drawn. Upon clicking the “Go” button we get navigated to the page where our Camera feed is opened.

We are expected to set the MapBox token ID in our application file

Here, I tried to implement the AR Navigation for two different scenarios

(i) Phone camera

(ii) Integrated External camera

Let us first visit our case of Phone Camera

Here, I am setting the static variables like LOCATION_INTERVAL and directionsRoute.

Also, I have to set the route_origin and route_destination with their latitudes and longitudes which we have hard-coded here. We can dynamically set the destination location by selecting the destination on the map.

Then I started my arLocationEngine. Post which, we declare our onCreate() segment that contains the routeFetcher which uses the MapBox Token inorder to fetch the route

Here, I am setting on the off-route listener just incase if we are off-route we would be able to alter our path based on our current location and VisionManager by

/ /Route need to be reestablished if off route happens.







performance = ModelPerformance.On(ModelPerformanceMode.DYNAMIC, ModelPerformanceRate.HIGH)






directionsRoute.let {

if (it == null) {

Toast.makeText(this, “Route is not set!”, Toast.LENGTH_LONG).show()


} else {




For our other use case, where we are using an external camera, I worked with the engineers in the MapBox team to get this done (Jan-Feb 2020), where I happened to suggest them with a model. Here, the external camera is used to capture the video and the same is uploaded into the server. We are fetching the same video through a URL through which we fed into our system again.

Refer to the implementation video,

Kindly refer to my GitHub repository,

Credits to Mapbox for their banner Image.

Thank you for your time and attention, and I would certainly love to have your appreciations in form of 👏 !

Senior Android Developer | AR Developer @ a popular Automotive Company | Prev. Android Application Developer @tinysurprise | IIM Trichy Alumini