1,139 reads

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

by Sivakumar SwaminathanFebruary 1st, 2021

Too Long; Didn't Read

Android Developer created an AR-based navigation system on Android that does only one thing — draw the AR navigation path alone. 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. 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 Maps is drawn. Once clicking the “Go” button we get navigated to the page where our Camera feed is opened.

Companies Mentioned

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

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, etcSo, 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.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’){
transitive=true
}
implementation “com.mapbox.mapboxsdk:mapbox-android-telemetry:4.6.0”
implementation (‘com.mapbox.mapboxsdk:mapbox-android-services:2.2.9@aar’){
transitive=true
}
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.Here, I tried to implement the AR Navigation for two different scenarios:

Phone camera
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.
mapboxNavigation.addOffRouteListener(this)
mapboxNavigation.addProgressChangeListener(this)
VisionManager.create()
VisionManager.start()
VisionManager.setModelPerformanceConfig(
ModelPerformanceConfig.Merged(
performance = ModelPerformance.On(ModelPerformanceMode.DYNAMIC, ModelPerformanceRate.HIGH)
)
)
VisionArManager.create(VisionManager)
ar_view.setArManager(VisionArManager)
ar_view.onResume()
directionsRoute.let {
if (it == null) {
Toast.makeText(this, “Route is not set!”, Toast.LENGTH_LONG).show()
finish()
} else {
setRoute(it)
}
}

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

L O A D I N G
. . . comments & more!