How to relocate the position of the myLocationButton and true North button in Xamarin forms?

Question

I am using Xamarin.Forms.Maps with custom map and custom pin with Droid Renderer. I want to relocate the myLocationButton at the right bottom of the map and north button at the left bottom of the map.

Here is the CustomRenderer. [assembly: ExportRenderer(typeof(CustomMap), typeof(CustomMapRenderer))]

namespace CustomRenderer.Droid{

public class CustomMapRenderer:MapRenderer,GoogleMap.IInfoWindowAdapter
{
    List<CustomPin> customPins;
    bool isDrawn;

    protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Map> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null)
        {
            NativeMap.InfoWindowClick -= OnInfoWindowClick;
        }
        if (e.NewElement != null)
        {
            var formsMap = (CustomMap)e.NewElement;
            customPins = formsMap.CustomPins;
            Control.GetMapAsync(this);
        }
    }
    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName.Equals("VisibleRegion") && !isDrawn)
        {
            NativeMap.Clear();
            NativeMap.UiSettings.ScrollGesturesEnabled = true;
            NativeMap.InfoWindowClick += OnInfoWindowClick;
            NativeMap.SetInfoWindowAdapter(this);
            NativeMap.UiSettings.MyLocationButtonEnabled = true;
            NativeMap.MyLocationEnabled = true;

            foreach (var pin in customPins)
            {
                var marker = new MarkerOptions();
                marker.SetPosition(new LatLng(pin.Pin.Position.Latitude, pin.Pin.Position.Longitude));
                marker.SetTitle(pin.Pin.Label);
                marker.SetSnippet(pin.Pin.Address);
                if (pin.Id == "0")
                {
                    marker.SetIcon(BitmapDescriptorFactory.FromResource(project.Droid.Resource.Drawable.googlecab));
                }
                else if (pin.Id == "1")
                {
                    marker.SetIcon(BitmapDescriptorFactory.FromResource(project.Droid.Resource.Drawable.googlehome));
                }
                else if (pin.Id == "2")
                {
                    marker.SetIcon(BitmapDescriptorFactory.FromResource(project.Droid.Resource.Drawable.googlerv));
                }
                else if (pin.Id == "Xamarin")
                {
                    marker.SetIcon(BitmapDescriptorFactory.FromResource(project.Droid.Resource.Drawable.googlerv));

                }

                NativeMap.AddMarker(marker);
            }
            isDrawn = false;
        }
    }

    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);

        if (changed)
        {
            isDrawn = false;
        }
    }

    void OnInfoWindowClick(object sender, GoogleMap.InfoWindowClickEventArgs e)
    {
        var customPin = GetCustomPin(e.Marker);
        if (customPin == null)
        {
            throw new Exception("Custom pin not found");
        }

        if (!string.IsNullOrWhiteSpace(customPin.Url))
        {
            //var url = Android.Net.Uri.Parse(customPin.Url);
            //var intent = new Intent(Intent.ActionView, url);
            //intent.AddFlags(ActivityFlags.NewTask);
            //Android.App.Application.Context.StartActivity(intent);

            MessagingCenter.Send(new CategoryItems()
            {
                Vid = customPin.vId,
                VType = customPin.vType
            }, "UserName");
        }
    }



    public Android.Views.View GetInfoContents(Marker marker)
    {
        isDrawn = true;
        var inflater = Android.App.Application.Context.GetSystemService(Context.LayoutInflaterService) as Android.Views.LayoutInflater;
        if (inflater != null)
        {
            Android.Views.View view;

            var customPin = GetCustomPin(marker);
            if (customPin == null)
            {
                throw new Exception("Custom pin not found");
            }

            view = inflater.Inflate(project.Droid.Resource.Layout.XamarinMapInfoWindow, null);

            var infoTitle = view.FindViewById<TextView>(project.Droid.Resource.Id.InfoWindowTitle);
            var infoSubtitle = view.FindViewById<TextView>(project.Droid.Resource.Id.InfoWindowSubtitle);
            var infoBg = view.FindViewById<ImageView>(project.Droid.Resource.Id.InfoWindowBackgroundImage);

            if (infoTitle != null)
            {
                infoTitle.Text = marker.Title;
            }
            if (infoSubtitle != null)
            {
                infoSubtitle.Text = marker.Snippet;
            }
            if (infoBg != null){
                if(!string.IsNullOrEmpty(customPin.Url)){
                    Picasso.With(Context)
                       .Load(customPin.Url)
                       .Into(infoBg);
                }
            }

            return view;
        }
        isDrawn = true;
        return null;
    }

    public Android.Views.View GetInfoWindow(Marker marker)
    {
        return null;
    }

    CustomPin GetCustomPin(Marker annotation)
    {
        var position = new Position(annotation.Position.Latitude, annotation.Position.Longitude);
        foreach (var pin in customPins)
        {
            if (pin.Pin.Position == position)
            {
                return pin;
            }
        }
        return null;
    }
}

}

Ali Asad Ali Asad · Accepted Answer · 2017-10-09T14:18:25

I used the custom renderer so i was trying to get the myLocationButton by using its ID using FindViewByID with no luck.

Finally i found the solution. Do not get the view and set its layout. you just need to give map a padding. That's all

NativeMap.SetPadding(0,800,0,0);

How to relocate the position of the myLocationButton and true North button in Xamarin forms?

1 Answers