Search code examples
androidgoogle-mapsgoogle-maps-markersmarkerclusterer

Android maps utils cluster icon color


Is there any method to change the background color of the cluster item? (the one that displays the count of the markers, like 100+, 200+ ...). I tried to look into the source code of the ClusterManager but could not find any option to change the color, but maybe someone here knows how to do that. I basically want to "materialify" those colors a bit.


Solution

  • I was able to get a rough implementation working by using this demo from the library samples as a guide.

    I used the lens icon from the Material Design Icons from here. After downloading the lens zip I put ic_lens_black_24dp.png under the drawable folder. Then I used the Drawable.setColorFilter() method to change the default color in the code.

    I was also able to change the default Marker color, and figured I would include that as well here.

    First, set a Renderer by calling setRenderer():

     mClusterManager.setRenderer(new MyClusterRenderer(this, mMap,
                    mClusterManager));
    

    Then, define the MyClusterRenderer class:

    public class MyClusterRenderer extends DefaultClusterRenderer<MyItem> {
    
        private final IconGenerator mClusterIconGenerator = new IconGenerator(getApplicationContext());
    
        public MyClusterRenderer(Context context, GoogleMap map,
                                 ClusterManager<MyItem> clusterManager) {
            super(context, map, clusterManager);
        }
    
        @Override
        protected void onBeforeClusterItemRendered(MyItem item,
                                                   MarkerOptions markerOptions) {
    
            BitmapDescriptor markerDescriptor = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_MAGENTA);
    
            markerOptions.icon(markerDescriptor);
        }
    
        @Override
        protected void onClusterItemRendered(MyItem clusterItem, Marker marker) {
            super.onClusterItemRendered(clusterItem, marker);
        }
    
        @Override
        protected void onBeforeClusterRendered(Cluster<MyItem> cluster, MarkerOptions markerOptions){
    
            final Drawable clusterIcon = getResources().getDrawable(R.drawable.ic_lens_black_24dp);
            clusterIcon.setColorFilter(getResources().getColor(android.R.color.holo_orange_light), PorterDuff.Mode.SRC_ATOP);
    
            mClusterIconGenerator.setBackground(clusterIcon);
    
            //modify padding for one or two digit numbers
            if (cluster.getSize() < 10) {
                mClusterIconGenerator.setContentPadding(40, 20, 0, 0);
            }
            else {
                mClusterIconGenerator.setContentPadding(30, 20, 0, 0);
            }
    
            Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
            markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
        }
    }
    

    Full class code:

    public class MapsActivity extends AppCompatActivity
            implements ClusterManager.OnClusterItemInfoWindowClickListener<MyItem> {
    
        private ClusterManager<MyItem> mClusterManager;
        private MyItem clickedClusterItem;
        private GoogleMap mMap;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            setContentView(R.layout.activity_maps);
    
            setUpMapIfNeeded();
        }
    
        @Override
        protected void onResume() {
            super.onResume();
            setUpMapIfNeeded();
        }
    
    
        private void setUpMapIfNeeded() {
            // Do a null check to confirm that we have not already instantiated the map.
            if (mMap == null) {
                // Try to obtain the map from the SupportMapFragment.
                mMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map))
                        .getMap();
    
                // Check if we were successful in obtaining the map.
                if (mMap != null) {
                    setUpMap();
                }
    
            }
        }
    
        private void setUpMap() {
    
            mMap.getUiSettings().setMapToolbarEnabled(true);
            mMap.getUiSettings().setZoomControlsEnabled(true);
            mMap.setMyLocationEnabled(true);
            mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
    
            mClusterManager = new ClusterManager<>(this, mMap);
    
            mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(37.779977,-122.413742), 10));
    
            mMap.setOnCameraChangeListener(mClusterManager);
            mMap.setOnMarkerClickListener(mClusterManager);
    
            mClusterManager.setRenderer(new MyClusterRenderer(this, mMap,
                    mClusterManager));
    
            mMap.setInfoWindowAdapter(mClusterManager.getMarkerManager());
    
            mMap.setOnInfoWindowClickListener(mClusterManager); //added
            mClusterManager.setOnClusterItemInfoWindowClickListener(this); //added
    
            mClusterManager
                    .setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener<MyItem>() {
                        @Override
                        public boolean onClusterItemClick(MyItem item) {
                            clickedClusterItem = item;
                            return false;
                        }
                    });
    
    
    
            addItems();
    
            mClusterManager.getMarkerCollection().setOnInfoWindowAdapter(
                    new MyCustomAdapterForItems());
    
        }
    
        private void addItems() {
    
            double latitude = 37.779977;
            double longitude = -122.413742;
            for (int i = 0; i < 10; i++) {
                double offset = i / 60d;
    
                double lat = latitude + offset;
                double lng = longitude + offset;
                MyItem offsetItem = new MyItem(lat, lng, "title " + i+1, "snippet " + i+1);
                mClusterManager.addItem(offsetItem);
    
            }
    
        }
    
        //added with edit
        @Override
        public void onClusterItemInfoWindowClick(MyItem myItem) {
    
            //Cluster item InfoWindow clicked, set title as action
            Intent i = new Intent(this, OtherActivity.class);
            i.setAction(myItem.getTitle());
            startActivity(i);
    
            //You may want to do different things for each InfoWindow:
            if (myItem.getTitle().equals("some title")){
    
                //do something specific to this InfoWindow....
    
            }
    
        }
    
        public class MyCustomAdapterForItems implements GoogleMap.InfoWindowAdapter {
    
            private final View myContentsView;
    
            MyCustomAdapterForItems() {
                myContentsView = getLayoutInflater().inflate(
                        R.layout.info_window, null);
            }
            @Override
            public View getInfoWindow(Marker marker) {
    
                TextView tvTitle = ((TextView) myContentsView
                        .findViewById(R.id.txtTitle));
                TextView tvSnippet = ((TextView) myContentsView
                        .findViewById(R.id.txtSnippet));
    
                tvTitle.setText(clickedClusterItem.getTitle());
                tvSnippet.setText(clickedClusterItem.getSnippet());
    
                return myContentsView;
            }
    
            @Override
            public View getInfoContents(Marker marker) {
                return null;
            }
        }
    
        public class MyClusterRenderer extends DefaultClusterRenderer<MyItem> {
    
            private final IconGenerator mClusterIconGenerator = new IconGenerator(getApplicationContext());
    
            public MyClusterRenderer(Context context, GoogleMap map,
                                     ClusterManager<MyItem> clusterManager) {
                super(context, map, clusterManager);
            }
    
            @Override
            protected void onBeforeClusterItemRendered(MyItem item,
                                                       MarkerOptions markerOptions) {
    
                BitmapDescriptor markerDescriptor = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_MAGENTA);
    
                markerOptions.icon(markerDescriptor);
            }
    
            @Override
            protected void onClusterItemRendered(MyItem clusterItem, Marker marker) {
                super.onClusterItemRendered(clusterItem, marker);
            }
    
            @Override
            protected void onBeforeClusterRendered(Cluster<MyItem> cluster, MarkerOptions markerOptions){
    
                final Drawable clusterIcon = getResources().getDrawable(R.drawable.ic_lens_black_24dp);
                clusterIcon.setColorFilter(getResources().getColor(android.R.color.holo_orange_light), PorterDuff.Mode.SRC_ATOP);
    
                mClusterIconGenerator.setBackground(clusterIcon);
    
                //modify padding for one or two digit numbers
                if (cluster.getSize() < 10) {
                    mClusterIconGenerator.setContentPadding(40, 20, 0, 0);
                }
                else {
                    mClusterIconGenerator.setContentPadding(30, 20, 0, 0);
                }
    
                Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
                markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
            }
        }
    }
    

    Result:

    Initial app launch:

    No clustering

    Zooming out, some clustering:

    initial clustering

    Zooming out again, all Markers clustered:

    all Markers clustered