How to change Navigation back button icon

Question

User352950 posted

Hi all i tried a lot to change back button icon on both Android & IOS but the problem is that when i push async to another page and return back i got the default back button not the one i created, i'm using a toolbar

here is my code:

public class SpaceNavigationPageRenderer : NavigationPageRenderer
    {
        private Android.Support.V7.Widget.Toolbar toolbar;
        public Activity context;

        public override void OnViewAdded(Android.Views.View child)
        {
            base.OnViewAdded(child);
            if (child.GetType() == typeof(Android.Support.V7.Widget.Toolbar))
            {
                toolbar = (Android.Support.V7.Widget.Toolbar)child;
                toolbar.ChildViewAdded += Toolbar_ChildViewAdded;
               // toolbar.NavigationIcon = Android.Support.V4.Content.ContextCompat.GetDrawable(context, Resource.Drawable.AppIcon);

                toolbar.SetNavigationIcon(Resource.Drawable.AppIcon);
            }
        }

        protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
        {
            base.OnElementChanged(e);
            context = (Activity)Xamarin.Forms.Forms.Context;
            //toolbar = context.FindViewById<Android.Support.V7.Widget.Toolbar>(Droid.Resource.Id.toolbar);

            toolbar.SetNavigationIcon(Resource.Drawable.AppIcon);

        }

        protected override Task<bool> OnPushAsync(Page view, bool animated)
        {
            var retVal = base.OnPushAsync(view, animated);

            context = (Activity)Xamarin.Forms.Forms.Context;
            //toolbar = context.FindViewById<Android.Support.V7.Widget.Toolbar>(Droid.Resource.Id.toolbar);

            if (toolbar != null)
            {
                if (toolbar.NavigationIcon != null)
                {
                    toolbar.NavigationIcon = Android.Support.V4.Content.ContextCompat.GetDrawable(context, Resource.Drawable.AppIcon);
                    //toolbar.SetNavigationIcon(Resource.Drawable.Back);
                }
            }
            return retVal;
        }

        protected override Task<bool> OnPopViewAsync(Page page, bool animated)
        {
            context = (Activity)Xamarin.Forms.Forms.Context;
            //toolbar = context.FindViewById<Android.Support.V7.Widget.Toolbar>(Droid.Resource.Id.toolbar);

            if (toolbar != null)
            {
                if (toolbar.NavigationIcon != null)
                {
                    //toolbar.NavigationIcon = Android.Support.V4.Content.ContextCompat.GetDrawable(context, Resource.Drawable.AppIcon);
                    toolbar.SetNavigationIcon(Resource.Drawable.AppIcon);
                }
            }
            return base.OnPopViewAsync(page, animated);
        }

Answer 1

User369978 posted

First, check the source code of NavigationPageRenderer on Android platform.

You could see UpdateToolbar , the method reset the back button icon to the default one.

UpdateToolbar is called in many methods , so i tried one by one , and find we have to set icon manually in OnLayout .

Add the following code in your renderer .

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

        if (toolbar != null)
        {
            if (toolbar.NavigationIcon != null)
            {
                toolbar.NavigationIcon = Android.Support.V4.Content.ContextCompat.GetDrawable(c, Resource.Drawable.back);
            }
        }
    }

Answer 2

User352950 posted

@ColeX Thank you so much it's worked, now i want to remove back button from one page how to achieve this please? NavigationPage.SetHasBackButton(this, false); is not working

Answer 3

User369978 posted

If remove the back button , how could we navigate to the previous page ?

Answer 4

User352950 posted

@ColeX i need my first page to have a side menu icon not a back button icon :(

Answer 5

User369978 posted

@"Ranamuhammad.1569" said: @ColeX i need my first page to have a side menu icon not a back button icon :(

The root page would never have a back button icon , and you could place the navigationpage inside a master-detail page .