How to create shadow polyline between two locations?

Question

Uber has a shadow between two points. How did they achieve this? The only thing I can think of is creating multiple lines at different grey opacity, but the result is not the same. Here is how that looks.

    for (int i = 0; i < 6; i++) {
        PolylineOptions testOptions = new PolylineOptions();
        testOptions.strokeWidth(ARC_STROKE_WIDTH - (i * 5));
        if (i == 0) {
            testOptions.strokeColor(Color.GRAY_80);
        } else if (i == 1) {
            testOptions.strokeColor(Color.GRAY_50);
        } else if (i == 2) {
            testOptions.strokeColor(Color.GRAY_40);
        } else if (i == 3) {
            testOptions.strokeColor(Color.GRAY_30);
        } else if (i == 4) {
            testOptions.strokeColor(Color.GRAY_20);
        } else if (i == 5) {
            testOptions.strokeColor(Color.GRAY_10);
        }
        // draw polyline to map
    }

Here is an image of how it looks for Uber

Answer 1

Old question, but I thought I'd answer anyways. One way you could achieve this is by getting the "projected" coordinates of the two points forming the line on the screen. Then, using those values, you can draw an any overlay view (the gradient shadow in your case). To elaborate:

//First do this to get the projected points. 
Point p1 = mMap.getProjection().toScreenLocation(location1);
Point p2 = mMap.getProjection().toScreenLocation(location2);

You will need to find the angle between this "projected" line between p1 and p2, and the x-axis, then rotate your view or drawable using something like this:

Programmatically rotate drawable or view

You will also need the size of the projected line to scale your drawable to fit exactly between the two points.

Hope this helps!