I found a question on Quora about How to add Uber car animation in Android application. I really like this question and found a solution which help you if want to do this in your application.

Solution is UberCarAnimation is an Android library which showing movement of car on map like in Uber.

Recommended : Make Real time Geo-location Android App

Uber Car Animation Android app demo :

Image example

You can see demo on YouTube:

APIs and Libraries you need to be use to implement Uber Car animation:

1. Google Maps Api
2. Google Maps Directions API
3. Volley

[tmh_article_ads]

Create appropriate JSON

Parse the “overview_polyline” from the JSON by providing the appropriate GET parameters. For eg:

"https://maps.googleapis.com/maps/api/directions/json?" +
                    "mode=driving&"
                    + "transit_routing_preference=less_driving&"
                    + "origin=" + latitude + "," + longitude + "&"
                    + "destination=" + destination + "&"
                    + "key=" + getResources().getString(R.string.google_directions_key)

Decode the polyline which will provide you with list of latitudes and longitudes that is List<LatLng> to be apt.

You should see : Android DebugKit – Easy way to debug Android Apps

Setting up of Value animator

Create a value animator by providing the ofFloatValue, setting duration and adding update listener in Handler

ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
valueAnimator.setDuration(3000);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator valueAnimator) {
    //CODE
});

Update Animation listener

In the value animator Update listener get the Animation fraction and evaluate the latitudes and longitudes as shown:

v=valueAnimator.getAnimatedFraction();
lng = v * endPosition.longitude + (1 - v)* startPosition.longitude;
lat = v * endPosition.latitude + (1 - v)* startPosition.latitude;

where v is animation fraction and startposition and endPostion refer to each pair of LatLng from the decoded list from polyline for eg (0,1) then (1,2) then(2,3) and so on.
According to linear interpolation: The parameter ‘v’ defines where to estimate the value on the interpolated line, it is 0 at the first point and 1 and the second point. For interpolated values between the two points v ranges between 0 and 1. We evaluate values one by one between each pair of LatLng by traversing through the list.

Create instant app : Make Android RSS reader app

Set position marker

Finally set position of marker to the new position, also evaluating the bearing between the consecutive points so that it seems car is turning literally and finally update camera as:

marker.setPosition(newPos);
marker.setAnchor(0.5f, 0.5f);
marker.setRotation(getBearing(startPosition, newPos));
mMap.moveCamera(CameraUpdateFactory
                .newCameraPosition
                (new CameraPosition.Builder()
                target(newPos)
                .zoom(15.5f)
                .build()));

Google map library : ExtraMapUtils Library – Add Google Map in Android App

Run your Car in your App

The application uses Google Maps Api Key and Google Map Directions key. Get these api key on google developers console after enabling them for your project. Replace your google maps directions api key in strings.xml and google maps key in google_maps_api.xml.

You can see this also : Make OpenStreetMap surveyor Android app

Finally if any confusion below has download link go through it.

Download Source code

That’s it. Hope you like this tutorial !!