Change the colors of multiple polylines by OnPolylineClickListener

Question

I have multiple polylines in google map. It has to change its color to blue when user click on each polyline and others should be grey.

I have added polylines to a list as follows...

polylinePaths = new ArrayList<>();

polylinePaths.add(mMap.addPolyline(polylineOption1));
polylinePaths.add(mMap.addPolyline(polylineOption2));
polylinePaths.add(mMap.addPolyline(polylineOption3));

By using OnPolylineClickListener i tried to handle each polylines, but couldn`t able to do that..

mMap.setOnPolylineClickListener(new GoogleMap.OnPolylineClickListener()
    {
        @Override
        public void onPolylineClick(Polyline polyline)
        {

        }
    });

Is my method correct? Can anyone one help to do this task?

Answer 1

You can use Polyline.setZindex() for do that: set Z-index for example to 1f for non-clicked polylines and set Z-index grater than 1f (e.g. 2f) for clicked. Something like that:

mGoogleMap.setOnPolylineClickListener(new GoogleMap.OnPolylineClickListener() {
    @Override
    public void onPolylineClick(Polyline polyline) {
        // set settings (color, z-index) for all polylines
        polyline1.setColor(Color.RED);
        polyline1.setZIndex(1f);

        polyline2.setColor(Color.RED);
        polyline2.setZIndex(1f);

        polyline3.setColor(Color.RED);
        polyline3.setZIndex(1f);

        // set settings (color, z-index) for CLICKED polyline
        polyline.setColor(Color.BLUE);
        polyline.setZIndex(2f);
    }
});

where polyline1, polyline2 and polyline3 is:

final List<LatLng> poly1Points = new ArrayList<>();
poly1Points.add(new LatLng(-35.27801,149.12958));
poly1Points.add(new LatLng(-35.28032,149.12907));
poly1Points.add(new LatLng(-35.28099,149.12929));
poly1Points.add(new LatLng(-35.28144,149.12984));
poly1Points.add(new LatLng(-35.28194,149.13003));
poly1Points.add(new LatLng(-35.28282,149.12956));
poly1Points.add(new LatLng(-35.28302,149.12881));
poly1Points.add(new LatLng(-35.28473,149.12836));

PolylineOptions polylineOptions1 = new PolylineOptions()
        .addAll(poly1Points)
        .color(Color.RED)
        .width(20);

final List<LatLng> poly2Points = new ArrayList<>();
poly2Points.add(new LatLng(-35.279472, 149.124717));
poly2Points.add(new LatLng(-35.280146, 149.125908));
poly2Points.add(new LatLng(-35.280453, 149.126380));
poly2Points.add(new LatLng(-35.281775, 149.125286));
poly2Points.add(new LatLng(-35.284245, 149.126649));
poly2Points.add(new LatLng(-35.284604, 149.129814));
poly2Points.add(new LatLng(-35.283395, 149.131209));
poly2Points.add(new LatLng(-35.285576, 149.134964));

PolylineOptions polylineOptions2 = new PolylineOptions()
        .addAll(poly2Points)
        .color(Color.RED)
        .width(20);

final List<LatLng> poly3Points = new ArrayList<>();
poly3Points.add(new LatLng(-35.284211, 149.123073));
poly3Points.add(new LatLng(-35.283624, 149.124586));
poly3Points.add(new LatLng(-35.281750, 149.123610));
poly3Points.add(new LatLng(-35.278711, 149.126163));
poly3Points.add(new LatLng(-35.278107, 149.126345));
poly3Points.add(new LatLng(-35.278536, 149.130626));
poly3Points.add(new LatLng(-35.278737, 149.131484));
poly3Points.add(new LatLng(-35.279516, 149.132031));
poly3Points.add(new LatLng(-35.281478, 149.133179));
poly3Points.add(new LatLng(-35.281478, 149.133179));

PolylineOptions polylineOptions3 = new PolylineOptions()
        .addAll(poly3Points)
        .color(Color.RED)
        .width(20);

final Polyline polyline1 = mGoogleMap.addPolyline(polylineOptions1);
polyline1.setClickable(true);

final Polyline polyline2 = mGoogleMap.addPolyline(polylineOptions2);
polyline2.setClickable(true);

final Polyline polyline3 = mGoogleMap.addPolyline(polylineOptions3);
polyline3.setClickable(true);

And don't forget to .setClickable(true) for all polylines. As a result you should get something like that (clicked polyline is blue and on top):