Visit Sponsor

Written by 10:42 am Android

Add Zoom Controls to Android MapView – Google Maps SDK Guide

Zoom controls enhance user navigation by providing easy zoom in/out buttons on your map screens. In modern Android development with the Google Maps SDK, you can enable built‑in UI controls such as zoom buttons using the UiSettings API rather than old MapView tricks from legacy libraries.

This updated guide on javatechig.com shows how to include zoom controls in your map screen using current best practices from Google and the Maps SDK for Android.

What Are Zoom Controls in MapView?

Zoom controls are UI elements consisting of “+” (zoom in) and “–” (zoom out) buttons that let users adjust the map’s zoom level with a tap. These built‑in controls are hidden by default and can be enabled programmatically.

In addition to zoom controls, the Maps SDK supports other UI controls such as:

  • Compass
  • Map toolbar
  • Gesture settings (pinch, pan, rotate)

Enable Zoom Controls in XML (Recommended)

When using a SupportMapFragment or MapView in your layout, you can enable zoom controls directly via XML attributes:

<fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    map:uiZoomControls="true"
    map:uiCompass="true"
/>

Add the namespace:

xmlns:map="http://schemas.android.com/apk/res-auto"

This automatically turns on zoom buttons without additional code.

Enable Zoom Controls Programmatically

If you prefer to control the map settings in code, you can enable zoom controls after the map initializes.

Kotlin

supportFragmentManager
    .findFragmentById(R.id.map)!!
    .getMapAsync { googleMap ->
        val uiSettings = googleMap.uiSettings
        uiSettings.isZoomControlsEnabled = true
    }

Java

SupportMapFragment mapFragment = (SupportMapFragment)
        getSupportFragmentManager().findFragmentById(R.id.map);

mapFragment.getMapAsync(new OnMapReadyCallback() {
    @Override
    public void onMapReady(GoogleMap googleMap) {
        googleMap.getUiSettings().setZoomControlsEnabled(true);
    }
});

This shows zoom controls anchored on the map’s UI by default.

Adjusting Zoom Controls Position

The SDK places zoom controls in the bottom‑right corner by default, but you can offset UI elements using padding:

googleMap.setPadding(left, top, right, bottom)

This helps avoid overlapping with other UI elements (e.g., buttons or toolbars).

Enable Zoom Gestures & Other Map Interaction

Zoom controls work alongside gesture zoom (pinch and double‑tap). If needed, you can enable or disable gestures:

Kotlin

googleMap.uiSettings.isZoomGesturesEnabled = true

This ensures users can use both button controls and touch gestures.

Best Practices

Use Built‑in UI Settings

Avoid deprecated classes such as ZoomButtonsController (which was deprecated in API 26) for maps — prefer the Maps SDK’s UiSettings.

Respect Map Padding

Set padding to avoid UI overlap with action bars or other views.

Test Across Screen Sizes

Ensure your map UI (buttons, compass, gestures) functions predictably on phones, tablets, and foldables.

Summary

Enabling zoom controls on Android MapView (with the Google Maps SDK) is simple and follows modern Android practices:

  • Turn on built‑in zoom buttons via XML
  • Enable zoom controls programmatically via UiSettings
  • Combine with gesture support for a smooth user experience

This implementation leverages the Maps SDK’s native UI settings and keeps your map interactions consistent and intuitive for users.

Visited 13 times, 2 visit(s) today
Close