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

You may refer here: http://stackoverflow.com/questions/24928317/draw-a-curved-line-with-given-radius-and-two-locations — Rahul Gupta, May 10 '17 at 12:38
@RahulGupta that link is for drawing curve. I was not asking for that. I only want to draw a shadow between two points. No curve. The only way I can think to do that is by drawing multiple polylines between the two points at different opacity levels and width. But this does not give me the exact look I am going for. — portfoliobuilder, May 10 '17 at 18:30
Can you create a working DEMO of the code you have tried so far? — Rahul Gupta, May 11 '17 at 04:25

score 1 · Accepted Answer · answered Sep 15 '17 at 11:09

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!

How to create shadow polyline between two locations?

1 Answers1