Change Menu Bar Icon on Navigation Page

Question

I'm desperately trying to change the icon color on my Xamarin Forms app. I thought this hamburger menu was text but I can't seem to change it at all now. Is it an image? I found a slideout.png image, but any edits to that do not display within the app. Where is it pulling this hamburger menu icon from?

Page:

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LandingPage : MasterDetailPage
{
    public LandingPage()
    {
        InitializeComponent();
        MasterPage.ListView.ItemSelected += ListView_ItemSelected;
    }
    public void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as LandingPageMenuItem;
        if (item == null)
            return;
        var page = (Page)Activator.CreateInstance(item.TargetType);
        page.Title = item.Title;
        Detail = new NavigationPage(page);
        MasterPage.ListView.SelectedItem = null;
        IsPresented = false;
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Test.LandingPage" xmlns:pages="clr-namespace:Test">
    <MasterDetailPage.Master>
        <pages:LandingPageMaster x:Name="MasterPage" />
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <pages:LandingPageDetail />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

Master:

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LandingPageMaster : ContentPage
{
    public LandingPageMasterViewModel Vm { get; private set; }
    public ListView ListView => ListViewMenuItems;
    public LandingPageMaster()
    {
        InitializeComponent();
        Vm = new LandingPageMasterViewModel();
        BindingContext = Vm;
    }

    protected override void OnAppearing()
    {
        ListViewMenuItems.SelectedItem = Vm.MenuItems[0];
    }
    public class LandingPageMasterViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<LandingPageMenuItem> _menuItems;

        public ObservableCollection<LandingPageMenuItem> MenuItems
        {
            get
            {
                return _menuItems;
            }
            set
            {
                _menuItems = value;
                OnPropertyChanged();
            }
        }

        public LandingPageMasterViewModel()
        {
            ObservableCollection<LandingPageMenuItem> items = new ObservableCollection<LandingPageMenuItem>();
            items.Add(new LandingPageMenuItem { Title = "OCR" });
            MenuItems = items;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        void OnPropertyChanged([CallerMemberName]string propertyName = "") => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Test.LandingPageMaster" Title="">
    <StackLayout>
        <ListView x:Name="ListViewMenuItems" SeparatorVisibility="None" HasUnevenRows="True" ItemsSource="{Binding MenuItems}">
            <ListView.Header>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    <Label Grid.Column = "0" Grid.Row="0" Text=" " />
                </Grid>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
                            <Label VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Text="{Binding Title}" FontSize="Medium" />
                            <Label VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Text="{Binding Subtitle}" FontSize="Small" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Detail:

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LandingPageDetail : ContentPage
{
    public LandingPageDetail()
    {
        InitializeComponent();
    }
}


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Test.LandingPageDetail" Title="Detail">
    <StackLayout Padding="10">
        <Label Text="This is a detail page" />
    </StackLayout>
</ContentPage>

Answer 1

It's a ImageButton in Android platform. So you can change the image source of this hamburger button.

You can create a custom MasterDetailPage use Custom Renderers, for example, in the renderer:

public class MyMasterDetailRenderer : MasterDetailPageRenderer
{
    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);
        var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
        for (var i = 0; i < toolbar.ChildCount; i++)
        {
            var imageButton = toolbar.GetChildAt(i) as ImageButton;

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

            imageButton.SetImageDrawable(Forms.Context.GetDrawable(Resource.Drawable.hamburger));
        }
    }
}

Answer 2

On Android the hamburger graphic, and accompanying animation is provided by the android OS, and doesn't care about the icon defined in the master-detail, though that icon will get used on iOS/UWP.

it can probably overriden, though I haven't had to so can't help on that count.

if you're only after changing the color then change the android theme text color for the title bar and that will change the color of the hamburger as well, as I understand it.