Navigation Bar left Toolbar button

Does anyone know any way to add a toolbar item to the left side of a navigation bar instead of the right?

Posts

  • RobertAlmalakRobertAlmalak USMember ✭✭

    I wanted to ask the same question but I think you can't the only was is to make a custom renderer.

  • MURALMURAL USMember ✭✭

    I'm interested in this as well.

  • CraigDunnCraigDunn USXamarin Team Xamurai

    No, you cannot add a toolbar button to the left side of the navigation bar using Xamarin.Forms.

  • Hey Murally,

    Nice snippet, I just added these lines after the base. ViewWillAppear() call:

            if (NavigationController == null)
                return;
    

    This will prevent crashes on pages without the Navigation bar.

  • Thanks for posting this. I'm trying to figure out how to customize the nav bar as well, for button position and other things, and this has been helpful. A couple of comments/questions:

    1. There's a bug in @Murally‌'s code: right after the check for info == null there's another if (info.Priority == 1). I hit this right off the bat when I tried this out.

    2. The GetButtonInfo method isn't working for me, nativeItem.Title is always null although the ToolbarItem does have a name. For now I'm instead relying on matching order in the collections, but I suspect that's liable to break.

    3. Any idea how to customize the Action Bar produced by NavigationPage in Android? I'd like to try to do a custom renderer there but I have found no documentation on Xamarin's renderers.

    David

  • Hi,
    I implemented above custom renderer to show left bar button but, the navigation leftNativeButtons and rightNativeButtons count is always coming 0, and a while page is loading. can you guys please help me to short out this.

  • madhukar.4849madhukar.4849 USUniversity

    How can we achieve this in android ..?

    Please help on this.

  • AlexLauAlexLau HKMember

    Modified @Murally solution with reflection to get the original toolbaritem from private property. Works well on my iOS Simulator with Xamarin Forms 1.3.4

    https://gist.github.com/alexlau811/f1fff9e726333e6b4a2f

  • AlexLauAlexLau HKMember

    @madhukar.4849, the ActionBar in Android have no space on the left hand side. What would you expect the layout in Android if you move the buttons to the left?

  • UddhaoPachrneUddhaoPachrne INMember ✭✭

    Hi,
    @Murally and @AlexLau I tried above solution and its working perfect in content page but it's not working in tabbed page.
    When click on tab every time it added buttons repeatedly even i use <ContentPage.ToolbarItems> in tabbed page.
    Please help me figure out this problem.

  • Kevin.2891Kevin.2891 USMember

    Hi.

    I used this solution and it worked great. However, ran into an issue on a page where I was adding/removing toolbar items dynamically based on content on the page. Example: Show a toolbar item on the left, content changes on page so remove the item, change content again so toolbar item is added again. The second time the toolbar item is added, it shows on the right so end up having the item displayed twice (left and right). Is there another event besides ViewWillAppear that can be hooked into to pick up when menu items are added/removed?

    thanks

  • LarryXLarryX USMember

    Hi, Everyone

    My issue at hand seems related so I will ask it here. I use a master detail page to display menu and the detail page is a NavigationPage wrapping ContentPage.

    Initially the toolbar will display the "menu"(or sandwich?) button to the left and when tapped the master menu view will be showing which is perfect. But once I start to navigate to another page, the "menu" button gets replaced by what seems to be a "back" button, as it will bring you back to previous page.

    This confuses users as they may need to tap multiply times in order to get to the menu view, (there is swipe action you can use but it is less obvious).

    Is there a way to display both buttons at same time wherever makes sense.(and maybe hide the back button if it is already at root).

    Above behavior is observed on android as I don't get a change to run it under ios yet.

    Thanks a lot.

  • PhilOxenbergPhilOxenberg USMember ✭✭

    @AlexLau Thanks for posting your code. I have two questions. 1. On pages that do not have toolbar items, I am losing the image that used to be rendered and 2. I am getting a System.InvalidOperationException the second time i hit the top of your loop (rightNativeButtons)., "Collection was modified; enumeration operation may not execute."

    Thanks

  • PhilOxenbergPhilOxenberg USMember ✭✭

    Losing my image was a coincidence, had nothing to do with ContentPageRenderer code.

  • PhilOxenbergPhilOxenberg USMember ✭✭

    I'm using the custom renderer code posted by @Murally and @AlexLau to move the left most toolbar item to the left of the title - which works great once I moved the updating of the left and right lists out of the loop. However, I'm also attempting to load my icons here as well, because if I place my icons in the toolbar in xaml I still get solid blue circles. When I try to add them in the renderer I get what appear to be very large and duplicated (vertically) icons. Any help would be greatly appreciated. Thanks.
    Using code nativeItem.SetBackgroundImage( UIImage.FromBundle("minus.png"), UIControlState.Normal, UIBarMetrics.Default);image

  • JeffButterworthJeffButterworth AUMember ✭✭

    @Kevin.2891 and @UddhaoPachrne did you ever get a solution to your issue? Uddhao, I am having exact same issue as you in the tabbed pages. I added some code to check whether the button exists on the left before moving it over, but now I seem to have ended up with same issue as Kevin. Very frustrating.

  • JeffButterworthJeffButterworth AUMember ✭✭

    @KevinKramer, see previous comment (the @ tag didn't work correctly).

  • XingHuanXingHuan USMember

    Any way to add toolbar item to the leftmost side of navigation bar in Android ?

  • MiguelCervantesMiguelCervantes MXMember ✭✭✭

    best solution so far here

  • JPHochbaumJPHochbaum USMember ✭✭✭

    So can anyone show me what a sample PageRenderer class would look like? I am confused on how to create the base class for this and not sure what Bindable Properties to use.

  • EliasJohannesEliasJohannes ATMember ✭✭
    edited June 2017

    Hey there, sorry for upping this old thread but i got a little issue here.
    Bringing the item to the left works for me with the code from @rmarinho , but for some reason my TabBar completely disappears (i got the toolbar nested in a TabbedPage).
    Any solution for that?

    EDIT: Sorry! All i had to do is rename public class ContentPageRenderer : PageRenderer and write TabbedRenderer instead of PageRenderer Stupid me!

  • NickKovalskyNickKovalsky USMember ✭✭✭

    Had to put it in

    public override void ViewDidAppear(bool animated)
    

    for this to work properly when switching between pages in a tabbed navigation.

  • PriyanKaAgRawaLPriyanKaAgRawaL Member ✭✭
    edited May 2

    @MURAL said:
    var navigationItem = this.NavigationController.TopViewController.NavigationItem;

    Here NavigationController showing null reference exception for me.

Sign In or Register to comment.