Xamarin hide hamburger menu bar

Question

I'm trying to hide the bar from hamburger menu, and just preserve the icon button like Uber App.

I have a default master page detail structure, and i tried multiple solutions :

1 - in App.xaml

<ResourceDictionary>           
        <Style TargetType="NavigationPage">
            <Setter Property="BarBackgroundColor" Value="Transparent"/>
            <Setter Property="BarTextColor" Value="Red"/>
        </Style>              
</ResourceDictionary>

2 - A MasterDetailPageRenderer

public class CustomMasterDetailRenderer : MasterDetailPageRenderer
{
    public CustomMasterDetailRenderer(Android.Content.Context context):base(context)
    {

    }
    protected override void OnLayout(bool changed, int left, int top, int right, int bottom)
    {
        base.OnLayout(changed, left, top, right, bottom);          
        var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
        if (toolbar != null)
        {               
            toolbar.SetBackgroundColor(Android.Graphics.Color.Argb(0, 0, 0, 0));
        }            
    }
}

Unfortunately, got this as result :

How did you hide your toolbar and only show the menu button? — Aniket Sharma
That the question i asked...How do that.. read the @HeikkiDev answer — BobyOneKenobi

HeikkiDev HeikkiDev · Accepted Answer · 2018-05-31T15:39:04

You can hide the navigation bar in this page with (XAML):

NavigationPage.HasNavigationBar="False"

And add your own hamburger icon with tap gesture recognizer to handle the menu visibility:

MasterDetailPage masterDetailRootPage = (MasterDetailPage)Application.Current.MainPage;
masterDetailRootPage.IsPresented = true;

Xamarin hide hamburger menu bar

2 Answers