Change hamburger menu icon - Xamarin.Forms Android & UWP

Question

I have seen some similar questions to this one for Android in Android studio or UWP only, but I'm building a Xamarin.Forms app for UWP and Android and I would like to change the hamburger icon to a custom one I've made. Here is what it currently looks like on Android:

It looks similar on UWP, but here is basically what I'm going for:

Is there a simple way to do this on my master detail page? I was looking for some tag element I could use in the .xaml file maybe like this:

<MasterDetailPage.Master hamburgerIcon="myHamburgerIcon.png">

</MasterDetailPage.Master>

Or do I have to do platform specific code like a custom renderer for both UWP and Android? To be clear I'm asking how to change the icon for the 3 bars (hamburger icon), but if someone could include how to change the action bar background color as well that would be a bonus.

set the Icon property of the page that is being used for the Master — Jason
@Jason How and where? I tried adding this line Icon="hmenu.png" in the <MasterDetailPage> opening tag but it didn't do anything — SendETHToThisAddress
@NicoZhu-MSFT I have not found a solution yet. I tried setting the Icon and IconImageSource attributes in multiple places but unfortunately no success yet. — SendETHToThisAddress

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2020-05-18T03:19:59

Change hamburger menu icon - Xamarin.Forms Android & UWP

For UWP part, you could replace hamburg icon easily. Because in UWP platform, it was render with the button with PaneButton style, And you could find it here. Just copy it to UWP App.xaml file and replace the content property like the following.

<Application.Resources>
    <ResourceDictionary>
        <Style x:Key="PaneButton" TargetType="Button">
            <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
            <Setter Property="FontSize" Value="20" />
            <Setter Property="Height" Value="48" />
            <Setter Property="Width" Value="48" />
            <Setter Property="Content" Value="&#xE701;" />
        </Style>
    </ResourceDictionary>
</Application.Resources>

For Android part, we need custom MasterDetailPageRenderer render like the following

[assembly: ExportRenderer(typeof(MainPage), typeof(IconNavigationPageRenderer))]
namespace masterDe.Droid
{
    public class IconNavigationPageRenderer : MasterDetailPageRenderer
    {
        public IconNavigationPageRenderer(Context context):base(context) { }
        private static Android.Support.V7.Widget.Toolbar GetToolbar() => (CrossCurrentActivity.Current?.Activity as MainActivity)?.FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);



        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            base.OnLayout(changed, l, t, r, b);
            var toolbar = GetToolbar();
            if (toolbar != null)
            {
                for (var i = 0; i < toolbar.ChildCount; i++)
                {
                    var imageButton = toolbar.GetChildAt(i) as Android.Widget.ImageButton;



                    var drawerArrow = imageButton?.Drawable as DrawerArrowDrawable;
                    if (drawerArrow == null)
                        continue;


// replace default hamburg icon
                    imageButton.SetImageDrawable(Forms.Context.GetDrawable(Resource.Drawable.icon));
                }
            }
        }
    }
}

Change hamburger menu icon - Xamarin.Forms Android & UWP

1 Answers