How to set google map loading tiles color?

Question

Bright loading tiles on map with dark style don't look good. Is there a way to change loading tiles colour?

Answer 1

You can use GoogleMap.setMapStyle to change the theme of the map, try like this,

try {
            // Customise the styling of the base map using a JSON object defined
            // in a raw resource file.
            boolean success = googleMap.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(
                            this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }

You can get the json file from this official map style site and you can put that json file into your app raw folder

Complete explanation for styling the map in android you can refer in official site

Sample style_json

[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#212121"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#212121"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#181818"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1b1b1b"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#2c2c2c"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8a8a8a"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#373737"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#3c3c3c"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#4e4e4e"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#000000"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#3d3d3d"
      }
    ]
  }
]

Answer 2

Concept:

Tile is a rectangular in strcuture and it holds the image data. Tile (link) is provided by TileProvider (link). TileProvider is a class that provides the tile images for a TileOverlay (link).

Note: Overlay is transparent in nature, which has x, y, and z axis. It's like and transparent glass in front of you.

TileProvider provides Tile just behind the TileOverlay just like you put your book below the transparent glass. In the z-axis of the TileOverlay, there are set of layers like GroundOverlays, Circles, Polylines, and Polygons. It means GroundOverlays is at the last layer, and it is most opaque. You provide your customized image and change the color in GroundOverlay. You also maintain all the other top layers' transparency, visibility etc. properties. In this way, you change the tile color.

Now, your main task is to create your customized GroundOverlay. You GroundOverlay image is provided as BitmapDescriptor. You use BitmapDescriptorFactory to create your custom BitmapDescriptor image as below.

BitmapDescriptor icon = BitmapDescriptorFactory.fromResource(R.drawable.current_position_tennis_ball) 

/* You see, current_position_tennis_ball drawable resource, now, you used as your Tile color */

Implementation:

Note: MOON_MAP_URL_FORMAT is aenter code here jpg image, and tileProvider is referencing that image (actually a customized image)

private static final String MOON_MAP_URL_FORMAT =
                "http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/%d/%d/%d.jpg";

/* provider the bright jpg above */

    TileProvider tileProvider /* ultimately it is an image */ = new UrlTileProvider(256, 256) {
                @Override
                public synchronized URL getTileUrl(int x, int y, int zoom) {
                    // The moon tile coordinate system is reversed.  This is not normal.
                    int reversedY = (1 << zoom) - y - 1;
                    String s = String.format(Locale.US, MOON_MAP_URL_FORMAT, zoom, x, reversedY);
                    URL url = null;
                    try {
                        url = new URL(s);
                    } catch (MalformedURLException e) {
                        throw new AssertionError(e);
                    }
                return url;
            }
        };

You can see the complete source code here.