Hackernoon logoHere's How I Created an AR-Based Android Navigation System by@ssivakumar

Here's How I Created an AR-Based Android Navigation System

Author profile picture

@ssivakumarSivakumar Swaminathan

Senior Android Developer | AR Developer | IIM Trichy Alumini

Ever since Google announced Augmented Reality based navigation in Google Maps, almost all its users have fantasized about it. But there have been many scenarios that would have halted its course in terms 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. After some period, I found an interesting piece of article in MapBox’s Vision SDK.

How To Create an AR-Based Android Navigation System

For the first step, you need to set the library file and declare the Gradle dependencies, as shown below.

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

Next, download the .aar files by setting up your Mapbox account from the below link.


You should 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.

Implementing The AR Navigation System

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

  1. Phone camera
  2. 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 in case. If we are off-route, we would be able to alter our path based on our current location and VisionManager.

/ /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 {

Next, let's look at using an External Camera

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 a model to them.

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 link below,

Kindly refer to my GitHub repository at https://github.com/sivakumarswaminthan/ARNavigation

Thank you for your time and attention, and I would certainly love to have your appreciation! (Credits to Mapbox for their banner Image).

Also published at https://ssivakumar.medium.com/ar-navigation-d0e0ad406207


Join Hacker Noon

Create your free account to unlock your custom reading experience.