Android Google Map - display line above markers

Question

According to the Polyline documentation;

https://developers.google.com/android/reference/com/google/android/gms/maps/model/Polyline

polylines can have a z-index that affects their height relative to other shapes, but not markers. Markers are displayed at a higher level than all shapes. So to get a line to display above the markers on the map, would I have to ditch Polyline entirely, and put a Canvas on a FrameLayout and handle the drawing of the line myself? Or is there a simpler way?

I dont think you can display a polyline above any marker even thought u set the zIndex to a big number. I think you can use the fromScreenLocation method to convert your marker's position into a screen location, then you can draw a line between two different locations in your device screen. — ztan
Is that basically what I came up with as a fallback position? Put another transparent view on top of the map, and draw on that myself? That might complicate things since I need to figure out what markers the line is passing near, but I can figure that part out. — nasch
Yes, the fromScreenLocation can help you translate your marker position to a screen location. — ztan

nasch nasch · Accepted Answer · 2015-10-19T22:12:53

For anyone else trying to do this, I made a class extending FrameLayout and implementing View.OnTouchListener. Here's the key part:

@Override
    public void onDraw(Canvas canvas) {
        Path path = null;
        for (Point point : points) {
            if(path == null){
                path = new Path();
                path.moveTo(point.x, point.y);
            }
            else {
                path.lineTo(point.x,point.y);
            }
        }

        if(path != null) {
            canvas.drawPath(path, paint);
        }
    }

    @Override
    public boolean onTouch(View view, MotionEvent event) {

        if(event.getAction() == MotionEvent.ACTION_UP){
            callback.complete(points,null);
            return true;
        }

        Point point = new Point();
        point.x = event.getX();
        point.y = event.getY();
        points.add(point);
        invalidate();
        //Log.d(TAG, "point: " + point);
        return true;
    }

onTouch captures the touch events, and invalidate() triggers onDraw which draws the line. Add one of these to your layout (I did it in Java) and then you can draw on top of the map's markers.

Android Google Map - display line above markers

1 Answers