Android : Cluster marker count not showing properly with custom marker

Question

I'm plotting multiple marker on map using Google Maps Android Marker Clustering Utility but my problem is that cluster marker count not showing on the proper place with custom marker. I have added image for the more clarification.

Below is loadmap()

private void LoadMap() {
        try {
            mapFragment.getMapAsync(new OnMapReadyCallback() {
                @Override
                public void onMapReady(GoogleMap mMap) {
                    gMap = mMap;
                    mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
                    mMap.clear();
                    mClusterManager = new ClusterManager<>(getActivity(), mMap);
                    //mMap.getUiSettings().setZoomControlsEnabled(true);
                    mMap.setOnCameraIdleListener(mClusterManager);
                    mMap.setOnMarkerClickListener(mClusterManager);
                    mClusterManager.setRenderer(new MarkerClusterRenderer(getActivity(), mMap, mClusterManager));

                    if(arrayListLatLong.size() > 0) {
                        mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(arrayListLatLong.get(0).getLatitude(), arrayListLatLong.get(0).getLongitude()), 10));
                        for (int i = 0; i < arrayListLatLong.size(); i++) {
                            ClusterMapItems offsetItem = new ClusterMapItems(arrayListLatLong.get(i).getLatitude(), arrayListLatLong.get(i).getLongitude(), arrayListLatLong.get(i).getVehicleStatus(),
                                    arrayListLatLong.get(i).getRegistrationId(), arrayListLatLong.get(i).getCurrentVehicleSpeed(), arrayListLatLong.get(i).getVehicleUpdateTimeStr(),
                                    arrayListLatLong.get(i).getGroupName(), arrayListLatLong.get(i).getVin(), arrayListLatLong.get(i).getDescription(), arrayListLatLong.get(i).getVehicleVariant(),
                                    arrayListLatLong.get(i).getAdblueLevel(), arrayListLatLong.get(i).getTotalFuelConsumption(), arrayListLatLong.get(i).getFuelTankLevel());
                            mClusterManager.addItem(offsetItem);
                            mClusterManager.cluster();

                            mClusterManager.setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener<ClusterMapItems>() {
                                @Override
                                public boolean onClusterItemClick(ClusterMapItems clusterMapItems) {
                                    MyFleetBottomSheetFragment bottomSheetFragment = new MyFleetBottomSheetFragment();
                                    Bundle bundle= new Bundle();
                                    bundle.putParcelable("clusterMapItems", clusterMapItems);
                                    bottomSheetFragment.setArguments(bundle);
                                    bottomSheetFragment.show(getActivity().getSupportFragmentManager(), bottomSheetFragment.getTag());
                                    return false;
                                }
                            });
                        }
                    }
                    mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(20.5937, 78.9629), 0));
                }
            });
        } catch (IndexOutOfBoundsException e){
            e.printStackTrace();
        } catch (Exception e){
            e.printStackTrace();
        }
    }

MarkerClusterRenderer.Class

public class MarkerClusterRenderer extends DefaultClusterRenderer<ClusterMapItems> {


    private final IconGenerator iconGenerator;
    private Context contextN;

    public MarkerClusterRenderer(Context context, GoogleMap map, ClusterManager<ClusterMapItems> clusterManager ) {
        super(context, map, clusterManager);
        iconGenerator = new IconGenerator(context);
        contextN = context;
    }

    @Override
    protected int getBucket(Cluster<ClusterMapItems> cluster) {
        return cluster.getSize();
    }

    @Override
    protected void onClusterItemRendered(ClusterMapItems clusterItem, Marker marker) {
        super.onClusterItemRendered(clusterItem, marker);
    }

    @Override
    protected void onBeforeClusterItemRendered(ClusterMapItems item, MarkerOptions markerOptions) {
            if(item.getVehicleStatus().equals("NEW")){
                BitmapDescriptor markerDescriptor = BitmapDescriptorFactory.fromResource(R.drawable.ic_green_pointer);
                markerOptions.icon(markerDescriptor);
            }

            if(item.getVehicleStatus().equals("RUNNING")){
                BitmapDescriptor markerDescriptor = BitmapDescriptorFactory.fromResource(R.drawable.ic_black_pointer);
                markerOptions.icon(markerDescriptor);
            }
    }

    @Override
    protected void onBeforeClusterRendered(Cluster<ClusterMapItems> cluster, MarkerOptions markerOptions) {
        final Drawable clusterIcon = contextN.getResources().getDrawable(R.drawable.ic_cluster_purple);
        iconGenerator.setBackground(clusterIcon);
        iconGenerator.setTextAppearance(com.google.maps.android.R.style.amu_ClusterIcon_TextAppearance);
        Bitmap icon = iconGenerator.makeIcon(String.valueOf(cluster.getSize()));
        markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));

    }
}

Please help me out how can I show the cluster count in center of cluster marker? Is there any possibilities?

I have tried this given SO answer still I'm facing the same issue.

Answer 1

Create custom cluster_view.xml layout for your Clusters:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:layout_centerInParent="true"
    android:layout_centerVertical="true">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Text"
        android:textColor="#000000"
        android:id="@+id/amu_text"
        android:gravity="center" />
</FrameLayout>

You should specify a TextView inside with id amu_text.

After that change your Renderer code as follow:

public class MarkerClusterRenderer extends DefaultClusterRenderer<ClusterMapItems> {


    private final IconGenerator iconGenerator;
    private Context contextN;

    public MarkerClusterRenderer(Context context, GoogleMap map, ClusterManager<ClusterMapItems> clusterManager ) {
        super(context, map, clusterManager);
        iconGenerator = new IconGenerator(context);
        contextN = context;
    }

    @Override
    protected int getBucket(Cluster<ClusterMapItems> cluster) {
        return cluster.getSize();
    }

    @Override
    protected void onClusterItemRendered(ClusterMapItems clusterItem, Marker marker) {
        super.onClusterItemRendered(clusterItem, marker);
    }

    @Override
    protected void onBeforeClusterItemRendered(ClusterMapItems item, MarkerOptions markerOptions) {
            if(item.getVehicleStatus().equals("NEW")){
                BitmapDescriptor markerDescriptor = BitmapDescriptorFactory.fromResource(R.drawable.ic_green_pointer);
                markerOptions.icon(markerDescriptor);
            }

            if(item.getVehicleStatus().equals("RUNNING")){
                BitmapDescriptor markerDescriptor = BitmapDescriptorFactory.fromResource(R.drawable.ic_black_pointer);
                markerOptions.icon(markerDescriptor);
            }
    }

    @Override
    protected void onBeforeClusterRendered(Cluster<ClusterMapItems> cluster, MarkerOptions markerOptions) {
        final Drawable clusterIcon = contextN.getResources().getDrawable(R.drawable.ic_cluster_purple);
        iconGenerator.setBackground(clusterIcon);
        LayoutInflater myInflater = (LayoutInflater)contextN.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View clusterView= myInflater.inflate(R.layout.cluster_view, null, false);
        iconGenerator.setContentView(clusterView);
        iconGenerator.makeIcon(String.valueOf(cluster.getSize()));
        BitmapDescriptor icon = BitmapDescriptorFactory.fromBitmap(iconGenerator.makeIcon());
        markerOptions.icon(icon);

    }
}