Thuy's Blog

Hack showcase: GPX animator

September 21, 2019

My workspace when I had just completed a very first version of this project:

Late night coding

Motivation

  • I’ve got 2-week vacation and I haven’t done any late night coding session recently. That late night time is when I find myself really having almost zero distraction, which is perfect to hack stuff.
  • I feel I’ve been focusing too much on the backend side of Android development (e.g. app architecture, database, threading). I want to create something more tangible in terms of user experience.
  • I’ve been a big fan of Relive. I’ve been using their app to visualize my cycling routes in a fancy 3D way (e.g. my YouTube video below). I’m curious how such things can be made.

What is GPX animator?

Basically if you have a GPX file which represents your rides (or your runs), GPX animator will visualize how you move on on a map. This is actually inspired by Relive.

Here is a demo for a short bike ride of mine along the Nidda river:

GpxAnimator with Mapbox

How did I make it?

Initially I did the whole animation on Google Maps. However, the performance with Google Maps was really bad. So I tried an alternative of Google Maps: Mapbox. Mapbox delivers a better animation though there are still some glitches. Here is a YouTube video that I made a comparison between Mapbox and Google Maps:

How did I parse GPX files? I used jpx. The jpx library targets Java 8. So I had to configure this Android project to target Java 8 too according to this guideline.

The code may not look quite readable as I wanted to pay more attention to the final outcome which is the animation. So, I didn’t really care much about good architecture, dependency injection or anything like that.

As usual, source code is available on my GitHub.


Thuy Trinh

Written by Thuy Trinh who lives and works in Frankfurt, Germany building robust Android apps. You should follow him on Twitter