CODEWITHSUNDEEP
c#androidxamlxamarin.formsuwp
SendETHToThisAddress
SendETHToThisAddress

Reputation: 3774

Change hamburger menu icon - Xamarin.Forms Android & UWP

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:

hamburger menu 1

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

enter image description here

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.

Upvotes: 1

Views: 1613

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32785

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));
                }
            }
        }
    }
}

Upvotes: 2

Related Questions