How to move google map zoom control position in android?

Question

I managed to get google map up and running. The problem is current design of the app that I'm developing overlap the zoom control in google map. How do I move this zoom control to another position?

Answer 1

I have found 2 ways to move the GoogleMap zoom controls. The first is mentioned in @Numan1617's answer, using the setPadding() function:

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

Which is very useful for ensuring that the zoom controls are visible when you have a Google AdView banner at the bottom of your screen. Like this:

googleMap.setPadding(0,0,0,adViewLayout.getHeight());

This will move the lower left Google name, the zoom controls AND the toolbar (which slides in right-to-left when you touch a marker on the map), to just above the layout containing your AdView. Otherwise these UI controls may be fully or partially behind the AdView.

But what if you want finer control than that? Like move the zoom controls all the way to the corner? So I dug in and figured out this way to do it: get the view object that encloses the zoom controls and set new LayoutParams for it.

I also wanted to move the compass and the toolbar so I included code here for those too.

NOTE: the GoogleMap UI Controls have text tags set that make it convenient to access them. I included all the UI control text tags that I could find.

There does not appear to be a convenient tag on the zoom controls enclosing layout, so I had to get one of the zoom in/zoom out controls and then get it's parent View (ViewGroup actually). I found that it contains RelativeLayout.LayoutParams, which means that it's enclosing layout is a RelativeLayout.

Here it is in DisplayMapFragment.java:

package <blah>;

import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;

public class DisplayMapFragment implements OnMapReadyCallback {
    private static final String TAG = DisplayMapFragment.class.getSimpleName();

    private static final String GOOGLEMAP_COMPASS = "GoogleMapCompass";                   // [4]
    private static final String GOOGLEMAP_TOOLBAR = "GoogleMapToolbar";                   // [3]
    private static final String GOOGLEMAP_ZOOMIN_BUTTON = "GoogleMapZoomInButton";        // [2]child[0]
    private static final String GOOGLEMAP_ZOOMOUT_BUTTON = "GoogleMapZoomOutButton";      // [2]child[1]
    private static final String GOOGLEMAP_MYLOCATION_BUTTON = "GoogleMapMyLocationButton";// [0]

    private View mapView = null;

    public DisplayMapFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_map, container, false);

        Log.d(TAG, "onCreateView()");

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

        mapFragment.setRetainInstance(true);

        mapFragment.getMapAsync(this);  // map calls my onMapReady()

        mapView = mapFragment.getView();

        return view;
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        Log.d(TAG, "onMapReady()");

        // move the compass to top center
        moveCompass(mapView,-1,4,-1,-1,true,false);

        // move toolbar to right center
        moveToolbar(mapView,-1,-1,4,-1,false,true);

        // move zoom controls to bottom right
        moveZoomControls(mapView, -1,-1,4,4,false,false);
    }

    /**
     * Move the View according to the passed params.  A -1 means to skip that one.
     *
     * NOTE:  this expects the view to be inside a RelativeLayout.
     *
     * @param view - a valid view
     * @param left - the distance from the left side
     * @param top - the distance from the top
     * @param right - the distance from the right side
     * @param bottom - the distance from the bottom
     * @param horizontal - boolean, center horizontally if true
     * @param vertical - boolean, center vertically if true
     */
    private void moveView(View view, int left, int top, int right, int bottom, boolean horizontal, boolean vertical) {
        try {
            assert view != null;

            // replace existing layout params
            RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
                    RelativeLayout.LayoutParams.WRAP_CONTENT);

            if (left >= 0) {
                rlp.addRule(RelativeLayout.ALIGN_PARENT_START, RelativeLayout.TRUE);
                rlp.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
            }

            if (top >= 0) {
                rlp.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);
            }

            if (right >= 0) {
                rlp.addRule(RelativeLayout.ALIGN_PARENT_END, RelativeLayout.TRUE);
                rlp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
            }

            if (bottom >= 0) {
                rlp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
            }

            if (horizontal) {
                rlp.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
            }

            if (vertical) {
                rlp.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);
            }

            rlp.setMargins(left, top, right, bottom);

            view.setLayoutParams(rlp);
        } catch (Exception ex) {
            Log.e(TAG, "moveView() - failed: " + ex.getLocalizedMessage());
            ex.printStackTrace();
        }
    }

    private void moveCompass(View mapView, int left, int top, int right, int bottom, boolean horizontal, boolean vertical) {

        assert mapView != null;

        View compass = mapView.findViewWithTag(GOOGLEMAP_COMPASS);

        if (compass != null) {
            moveView(compass,left,top,right,bottom,horizontal,vertical);
        }
    }

    private void moveToolbar(View mapView, int left, int top, int right, int bottom, boolean horizontal, boolean vertical) {

        assert mapView != null;

        View toolbar = mapView.findViewWithTag(GOOGLEMAP_TOOLBAR);

        if (toolbar != null) {
            moveView(toolbar,left,top,right,bottom,horizontal,vertical);
        }
    }

    private void moveZoomControls(View mapView, int left, int top, int right, int bottom, boolean horizontal, boolean vertical) {

        assert mapView != null;

        View zoomIn = mapView.findViewWithTag(GOOGLEMAP_ZOOMIN_BUTTON);

        // we need the parent view of the zoomin/zoomout buttons - it didn't have a tag
        // so we must get the parent reference of one of the zoom buttons
        View zoomInOut = (View) zoomIn.getParent();

        if (zoomInOut != null) {
            moveView(zoomInOut,left,top,right,bottom,horizontal,vertical);
        }
    }
}

Answer 2

You can add padding to the controls displayed on the map using GoogleMap.setPadding().

More documentation here.