How to prevent Polyline from overlapping in google maps android?

Question

Hello guys this may be dumb question but am struggling with this so far haven't found any solution. Now let me ask my doubt am using multiple polyline for plotting multiple routes each and every polyline has different colors but when two point intersects last polyline get overridden how to prevent it. How it must look is only first route should get one color and all the other routes must have same color how to do this let me post the code what i have tried so far:

  public class GetDistance extends AsyncTask<Double, Void, String> {
            private ProgressDialog pd;
            private static final int READ_TIMEOUT = 6000;
            private static final int CONNECTION_TIMEOUT = 6000;
            private int flag;
            public GetDistance(int flag) {
                this.flag=flag;
            }

            @Override
            protected void onPreExecute() {
                super.onPreExecute();
                pd = new ProgressDialog(VisitTravel.this);
                pd.setMessage("Please wait");
                pd.show();
            }



            @Override
            protected String doInBackground(Double... strings) {
                URL url;
                try {
                    url = new URL("http://maps.googleapis.com/maps/api/directions/json?origin=" + strings[0] + "," + strings[1] + "&destination=" + strings[2] + "," + strings[3] + "&sensor=false&units=metric&mode=driving&alternatives=true");

                    HttpURLConnection conn;
                    conn = (HttpURLConnection) url.openConnection();
                    conn.setReadTimeout(READ_TIMEOUT);
                    conn.setConnectTimeout(CONNECTION_TIMEOUT);


                    conn.setRequestMethod("POST");

                    InputStream in;

                    in = new BufferedInputStream(conn.getInputStream());

                    StringBuilder buffer = new StringBuilder();
                    BufferedReader reader;
                    reader = new BufferedReader(new InputStreamReader(in));
                    String inputLine;
                    while ((inputLine = reader.readLine()) != null)
                        buffer.append(inputLine).append("\n");
                    if (buffer.length() == 0) {
                        // Stream was empty. No point in parsing.
                        Log.e("empty", "empty");
                    }
                    JsonResponse = buffer.toString();
                    Log.d("response", JsonResponse);


                } catch (IOException e1) {
                    e1.printStackTrace();
                }


                return JsonResponse;
            }
            @Override
            protected void onPostExecute(String result) {
                super.onPostExecute(result);
                pd.dismiss();
                if(flag==1) {
                    new ParserTask().execute(result);
                }}

        }
       private class ParserTask extends AsyncTask<String, Integer, List<List<HashMap<String, String>>>> {
            private ArrayList<LatLng> points;

            @Override
            protected List<List<HashMap<String, String>>> doInBackground(String... jsonData) {

                JSONObject jObject;
                List<List<HashMap<String, String>>> routes = null;

                try {
                    jObject = new JSONObject(jsonData[0]);
                    DirectionJSONParser parser = new DirectionJSONParser();

                    // Starts parsing data
                    routes = parser.parse(jObject);
                } catch (Exception e) {
                    e.printStackTrace();
                }
                return routes;
            }

            @Override
            protected void onPostExecute(List<List<HashMap<String, String>>> result) {
                PolylineOptions polylineOptionss=null;
                //      MarkerOptions markerOptions = new MarkerOptions();
                 // Traversing through all the routes
                for (int i = 0; i < result.size(); i++) {
                    points = new ArrayList<>();


                    // Fetching i-th route
                    List<HashMap<String, String>> path = result.get(i);

                    // Fetching all the points in i-th route
                    for (int j = 0; j < path.size(); j++) {
                        HashMap<String, String> point = path.get(j);

                    if (j == 0) {
                          duration = point.get("duration");
                           Log.d("duration", duration);
                           continue;
                      }
                        double lat = Double.parseDouble(point.get("lat"));
                        double lng = Double.parseDouble(point.get("lng"));
                        LatLng position = new LatLng(lat, lng);

                        points.add(position);

                    }
                     polylineOptionss=new PolylineOptions();
                    // Adding all the points in the route to LineOptions
                    polylineOptionss.addAll(points);
                  //  polylineOptions.width(7);
               //     Random rnd = new Random();
                 //   int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
                    if(i==0) {
                          polylineOptions0=new PolylineOptions();
                        polylineOptions0.addAll(points);
                     //   mGoogleMap.setTrafficEnabled(true);
                        polylineOptions0.width(15);
                           polylineOptions0.color(Color.parseColor("#9c27b0"));
                        polylineOptions0.geodesic(true);
                      Polyline polyline=  mGoogleMap.addPolyline(polylineOptions0);
                        polyline.setTag(duration);
                        polyline.setClickable(true);

                    }
//Here only differentiating each and every route.
                    else if(i==1){
                          polylineOptions1=new PolylineOptions();
                        polylineOptions1.addAll(points);
                        polylineOptions1.geodesic(true);
                        polylineOptions1.width(15);
                     //   mGoogleMap.setTrafficEnabled(true);
                        polylineOptions1.color(Color.parseColor("#9e9e9e"));
                        Polyline polyline=  mGoogleMap.addPolyline(polylineOptions1);
                        polyline.setTag(duration);
                        polyline.setClickable(true);

                    ///
                    }
                    else if(i==2){
                            polylineOptions2=new PolylineOptions();
                        polylineOptions2.addAll(points);
                        polylineOptions2.geodesic(true);
                        polylineOptions2.width(15);
                        polylineOptions2.color(Color.parseColor("#9c27b0"));
                        Polyline polyline=  mGoogleMap.addPolyline(polylineOptions2);
                        polyline.setTag(duration);
                        polyline.setClickable(true);
                        //     mGoogleMap.setTrafficEnabled(true);
                   //
                    }
                    else {
                          polylineOptions3=new PolylineOptions();
                        polylineOptions3.addAll(points);
                  //      mGoogleMap.setTrafficEnabled(true);
                        polylineOptions3.width(15);
                        polylineOptions3.geodesic(true);
                        polylineOptions3.color(Color.parseColor("#9e9e9e"));
                        Polyline polyline=  mGoogleMap.addPolyline(polylineOptions3);
                        polyline.setTag(duration);
                        polyline.setClickable(true);
                        ///     polylineOptions3.color(Color.parseColor("#ffffff"));
                    }

                }
                setBottomSheet(jsonresponse, edt.getText().toString(),1);
                CameraAnimation(polylineOptionss);
              //  mGoogleMap.addPolyline(polylineOptions);
                // Drawing polyline in the Google Map for the i-th route



            }
        }

How to plot first route with one color from starting to end and then remaining routes with other color. Thanks in advance !!

Answer 1

Use Z-Index variable of Polyline and Use Polylineclick listener to change the z-index of the polylines. Means whenever you click any line, its z-index will be increased and other lines z-index will be decreased so that the line you clicked will always override others. See the attached code for help.

Z-Index The order in which this tile overlay is drawn with respect to other overlays (including GroundOverlays, TileOverlays, Circles, and Polygons but not Markers). An overlay with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays with the same z-index is arbitrary. The default zIndex is 0.

            final List<Polyline> polylines = new ArrayList<>();

            for(int i= 0; i<paths.size(); i++ ){
                polylines.add(mMap.addPolyline(paths.get(i)));
            }

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



                    for(int i= 0; i<polylines.size(); i++ ){

                        polylines.get(i).setColor(Color.argb(255,187,189,191));
                        polylines.get(i).setZIndex(0);
                    }


                    polyline.setColor(Color.argb(255,102,157,246));
                    polyline.setZIndex(2);



                }
            });

Answer 2

One possible solution might be to vary the strokeWidth of the overlapping section of the polyline so that the first one drawn is wider and therefore can still be seen under the subsequent ones. Just an idea, not tested.