Google Map Custom Clustering (Change Marker image and Cluster color)

Many times in the development of the application it is required to customize the things. To make the UI look attractive we are changing the default component with the application color. So today, we are going to learn how to customize the cluster color and the marker.

If you are not aware of what is clustering and how to use it you can check my previous blog. 

So once you understand what is cluster and how to use in the application let's check how we can modify the cluster color etc. To do that we have to follow the basic steps. Let's start.

Step 1)  First you need to create one class that extends the DefaultClusterRenderer<?> class.

DefaultClusterRenderer<?> provides the different methods that help us to modify the cluster and the markers. This method helps us to make the customization possible. 

 public class MediaExperienceCluster extends   DefaultClusterRenderer<SLocationInfo> {

    public MediaExperienceCluster(Context context,

                      GoogleMap map, ClusterManager<SLocationInfo> clusterManager) {

        super(context, map, clusterManager);

    }

    @Override

    protected void onBeforeClusterItemRendered(SLocationInfo item, 
        MarkerOptions markerOptions) {

   // super.onBeforeClusterItemRendered(item, markerOptions);        

  //  Create a bitmap object and set it

      BitmapDescriptor descriptor

            = BitmapDescriptorFactory.fromResource(R.drawable.ic_map_icon);

    

       markerOptions.icon(descriptor).title(item.getTitle());

    }

    @Override

    protected boolean shouldRenderAsCluster(Cluster cluster) {

        // Always render clusters.

        return cluster.getSize() > 1;

    }

    @Override

    protected int getColor(int clusterSize) {

        return Color.parseColor("#E35F58");   // Set the colour of the cluster.

    }

}

First, you have to comment the super call and modify the method like shown in the above example. You can change the drawable with any image.

Step 2) Bind this class with your ClusterManager Class.

mClusterManager.setRenderer(new MediaExperienceCluster(this, mGoogleMap, mClusterManager));

Once you set the renderer then run the application to see the changes. It's so easy.
I will keep learning and posting amazing things. Enjoy.

Example:-