Can I change back button icon to something else?

SebCSebC NZMember

Hey guys, so like the title says, is it possible to change the Navigation bar back button icon to something else. I wanted to change the back button in certain pages, replacing it with a home image icon. Tried several methods, none of which worked. I want to do this in Android and IOS

Thanks in advance!

Answers

  • 3pa23pa2 USMember ✭✭

    In my little experience if you do not use appcompat .... you can change the icon simply by adding the icon property in the content page ,,, thus replacing the back icon you put in.

  • MedFehmiMedFehmi Member ✭✭

    @YorkGo can you please specify how to do that (customise NavigationPage) in iOS?

  • YorkGoYorkGo CNMember, Xamarin Team Xamurai
    edited November 2018

    @MedFehmi can you create a new ticket about this? We will help you there.

  • MedFehmiMedFehmi Member ✭✭
    edited November 2018

    @YorkGo said:
    @MedFehmi can you create a new ticket about this? We will help you there.

    "forums.xamarin.com/discussion/145054/override-back-button-navigation-icon-for-android-ios/p1?new=1"

  • kishukishu INMember ✭✭

    Hi,
    The above one is working fine but I am using BottomTabbar... If navigating from the one tab to child page and while coming back, showing default back button..Any idea for this issue?
    Thanks in advance.

  • kishukishu INMember ✭✭

    @kishu said:
    Hi,
    The above one is working fine but I am using BottomTabbar... If navigating from the one tab to child page and while coming back, showing default back button..Any idea for this issue?
    Thanks in advance.

    @YorkGo said:
    If your MainActivity type is FormsAppCompatActivity, you could custom a PageRenderer and change the Toolbar's NavigationIcon.

    For example :

    [assembly: ExportRenderer(typeof(ContentPage), typeof(NavigationPageRendererDroid))]
    ...
    public class NavigationPageRendererDroid : PageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Page> e)
        {
            base.OnElementChanged(e);
    
            var context = (Activity)Xamarin.Forms.Forms.Context;
            var toolbar = context.FindViewById<Android.Support.V7.Widget.Toolbar>(Droid.Resource.Id.toolbar);
    
            toolbar.NavigationIcon = Android.Support.V4.Content.ContextCompat.GetDrawable(context, Resource.Drawable.Back);
        }
    }
    

    Usage :

    MainPage = new NavigationPage(new MainPage());
    ...
    //When click a button in MainPage, navigate to another page
    private async void Button_Clicked(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new TestPage());
    }
    

    Update :

    When you use Navigation.PushAsync() method navigate to another page, the system will automatically update the Toolbar's icon :

    protected virtual Task<bool> OnPushAsync(Page view, bool animated)
    

    {
    return SwitchContentAsync(view, animated);
    }

    Task<bool> SwitchContentAsync(Page page, bool animated, bool removed = false, bool popToRoot = false)
    

    {
    ...
    UpdateToolbar();
    ...
    }

    void UpdateToolbar()
    {
        ...
        bool isNavigated = ((INavigationPageController)Element).StackDepth > 1;
        if (isNavigated)
        {
            ...
            if (NavigationPage.GetHasBackButton(Element.CurrentPage))
          {
                 //Set the navigation back  icon < =================== !!! =-=
               var icon = new DrawerArrowDrawable(activity.SupportActionBar.ThemedContext);
               icon.Progress = 1;
               bar.NavigationIcon = icon;
          }
        }
        ...
    }
    

    Solution :

    So we have no choice but to custom a NavigationPageRenderer, override the OnPushAsync method to set the Toolbar's icon.

    using AToolbar = Android.Support.V7.Widget.Toolbar;
    [assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(NavigationPageRendererDroid))] // APPCOMP
    ...
    public class NavigationPageRendererDroid : Xamarin.Forms.Platform.Android.AppCompat.NavigationPageRenderer // APPCOMP
    {
        public AToolbar toolbar;
        public Activity context;
    
        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.Back);
                    //toolbar.SetNavigationIcon(Resource.Drawable.Back);
                }
            }
            return retVal;
        }
    }
    

    The CustomNavigationPage are defined in PCL :

    public class CustomNavigationPage : NavigationPage
    {
        public CustomNavigationPage(Page startupPage) : base(startupPage)
        {
        }
    }
    

    Usage :

    public App()
    {
        InitializeComponent();
    
        MainPage = new CustomNavigationPage(new MainPage());
    }
    ...
    // In MainPage
    private async void Button_Clicked(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new TestPage());
    }
    

    Hi @YorkGo

    The above solution is working fine but in one case it is showing the default back button. I am using BottomTabbar... Navigating from the one tab to child page and while coming back, showing default back button..Any idea for this issue?
    Thanks in advance.

  • kishukishu INMember ✭✭

    @YorkGo
    While pop the page, it is showing the default back button. I tried to write code for OnPopAsync same as OnPushAsync but no luck. Please suggest me.
    Thanks in advance.

Sign In or Register to comment.