navigation drawer hamburger button

simeonsimeon ✭✭USMember ✭✭

The new stuff looks really nice! How would you go about creating a drawer layout like the one from the Android support library with the XAML layout? Can you? Is it in the pipeline if you can't?

Best Answer

Answers

  • TheRealJasonSmithTheRealJasonSmith Xamurai USXamarin Team Xamurai

    MasterDetailPage is your thing :)

  • CheesebaronCheesebaron mod DKInsider, University mod

    There is a nice sample repository here: https://github.com/xamarin/xamarin-forms-samples where you can try it out and see all the stuff it can do. FormsGallery shows most if not all of the stuff it does.

    But, yes it does support it and it is called MasterDetailPage.

  • GerryHighGerryHigh ✭✭✭ USBeta ✭✭✭
    edited May 2014

    Jason--that MasterDetailPage sample doesn't behave at all like the Android Navigation Drawer (https://developer.android.com/design/patterns/navigation-drawer.html).

    It's supposed to slide out over the content, etc. It is actually a navigation drawer that is being used?

  • TheRealJasonSmithTheRealJasonSmith Xamurai USXamarin Team Xamurai
    edited May 2014

    @GerryHigh,

    We actually implemented that before DrawerLayout was released. We have an open feature request (with high priority) to swap that over to a DrawerLayout. It will happen and be totally transparent to you. You will not need to make any changes when the swap happens in a future update.

    Sorry that we didn't have that ready for release :/

    Jason

  • simeonsimeon ✭✭ USMember ✭✭

    Thanks that works really nice. I had to change the startup page to MasterDetailPageDemoPage as on iOS the swipe to bring the menu out triggers the back navigate. But it has massive potential!

  • TheRealJasonSmithTheRealJasonSmith Xamurai USXamarin Team Xamurai

    @simeon‌ You can also disable the gesture on the MasterDetailPage if you want the button to be the only point of access.

  • ChristineZuckermanChristineZuckerman ✭✭✭ USMember ✭✭✭

    I got the update today with the navigation drawer and it looks great! One thing though - the Android action bar is still displaying the back arrow, not the hamburger icon. Is there something I need to do to change that, or will that be coming?

  • spoxproxspoxprox ✭✭ USMember ✭✭

    Is there a way to replace the back arrow on android, with a hamburger icon, when using the MasterDetailPage as a slide out menu ?

  • simeonsimeon ✭✭ USMember ✭✭

    @TomYu‌

    Set IsPresented on the navigation page to open and close the draw.

    Cheers,

  • 2BitNerd2BitNerd ✭✭ USMember ✭✭

    I'll bump this - is there a way in Xamarin.Forms to show the hamburger menu icon for Android devices when using the MasterDetail layout?

  • RyanHatfieldOldRyanHatfieldOld ✭✭✭ USMember, Insider ✭✭✭

    Ya just set the Icon property to an asset
    or use the NavigationPage static method

    //
    // Summary:
    //     Sets the title icon of the bindable to the icon file at value.
    //
    // Parameters:
    //   bindable:
    //     The Xamarin.Forms.BindableObject whose title icon is being set.
    //
    //   value:
    //     The FileImageSource of the icon.
    public static void SetTitleIcon(BindableObject bindable, FileImageSource value);
    
  • NathanWilliamsNathanWilliams ✭✭ USUniversity ✭✭

    @TheRealJasonSmith

    Is there a way to configure the DrawerLayout so that it slides over the Android action bar, as the Gmail App, and others do? Even a customer renderer solution would be fine...

  • saravanan81saravanan81 USMember

    Nathan, did you got it working (slide over the Android Action bar)? I'm trying to implement similar functionality and just wondering if by any way we can make MasterDetailPage slide out on top of the Android action bar.

  • TheRealJasonSmithTheRealJasonSmith Xamurai USXamarin Team Xamurai

    The AppCompat backend does this

  • IanGeogheganIanGeoghegan ✭✭ USUniversity ✭✭

    @TheRealJasonSmith Jason could you provide a little more detail on this point please? Some of us are struggling (or have struggled) with this and other unwanted display behaviors. For reference I include links to two other posts.

    http://forums.xamarin.com/discussion/30022/masterdetailpage-icon-strange-behaviour#latest

    http://forums.xamarin.com/discussion/47386/adding-padding-to-hamburger-menu-icon#latest

    Also, when rendering for Android does the master page's icon property get set to the ActionBar's logo property? Thanks in advance.

  • jmfjohnjmfjohn CHMember

    Any update on this? Just tried it out and the master view slides "under" the app bar instead of over it like most native Android apps do (e.g. play store, drive etc).

Sign In or Register to comment.