How can I change the hamburger icon for another one in Xamarin.Forms for Android?

How can I change the hamburger icon for another one in Xamarin.Forms for Android?

I tried a lot of methods to change the three bars (hamburger icon) for another icon with Xamarin.Forms, but it seems to always use the burger.

For iOS I already checked, and it works really great, but for some reason I can't show the same picture in Android.

For Android I'm using a default project created with the latest Xamarin Studio 6. It generates a MainActivity of type FormsAppCompatActivity.

Is there any way to change the picture consistently?

Answers

  • RoexRoex FRMember

    I'm also interested ! Thank you in advance.

  • ShawnCastrianni.5092ShawnCastrianni.5092 US ✭✭✭
    edited July 2016

    You simply set the Icon property on a NavigationPage for your master page, like this:

                MasterDetailPage rootPage = new MasterDetailPage {
                    Master = new NavigationPage (new MenuPage ()) { Title = "Menu", Icon = "menu" }
                };
                SetDetailPage (MenuItemType.Dashboard);
                MainPage = rootPage;
    

    Then choose whatever icon you want to be menu.png since the Icon property above was set to "menu".

  • PabloBiagioliPabloBiagioli USMember ✭✭

    @ShawnCastrianni.5092

    That didn't work for me. I also filed a bug in Xamarin's Bugzilla to track the state.

    https://bugzilla.xamarin.com/show_bug.cgi?id=41904

    What I think is wrong with your snippet, is that you are using a NavigationPage for the Master Page, instead of using the NavigationPage for the Detail Page.

    if you want the burger to appear in the NavBar you need a code similar to this one

    public partial class App : Application
        {
            public App ()
            {
                InitializeComponent ();
                MainPage = new MasterDetailPage () {
                    Master = new ContentPage () { Title = "Hello Master", Icon = new FileImageSource () { File = "icon.png" } },
                    Detail = new NavigationPage (new testBurgerPage ())
                };
            }
    

    Hope this helps you. I'm still waiting for Xamarin's official feedback with this one.

  • I DO use a NavigationPage for my detail page ALSO. I use a NavigationPage for both my master and detail. My code snippet showed SetDetailPage (MenuItemType.Dashboard); which configures my detail page. I didn't include the source for this method, but that method sets up the NavigationPage for my detail as well.

    Also, notice that my code snippet is setting the Icon property on the NavigationPage of my master, NOT on the master directly. Your code snippet is setting the Icon directly on the master page.

    So try changing your code snippet to use a NavigationPage also for your master page and set the title and icon on the NavigationPage instead of on the master like my code snippet and see what happens.

  • PabloBiagioliPabloBiagioli USMember ✭✭

    I still don't follow, I already tried your approach, but, like I suggested before, I think the proper way to set things up in a MasterDetailPage to make the burger appear, is by having a NavigationPage in the Detail, not the Master.
    Besides, what would it mean if I could navigate from the Master AND the Detail pages?

    Anyways, here's the snippet I made, trying to follow your approach, let me know if I missed something:

    public App ()
            {
                InitializeComponent ();
    
                var page = new MasterDetailPage () {
                    Master = new NavigationPage (new ContentPage ()) { Title = "Sample Title", Icon = "icon" },
                    Detail = new NavigationPage (new MyAppPage ())
                };
                MainPage = page;
    
            }
    

    Attached is the resulting UI for the Master Page, the Detail Page just shows the hamburger icon.

  • Sorry, I didn't analyze my own code very well. I created a sample application that shows how my code works and by doing that I was able to see what I had to change from a clean Forms app to make it work.

    As you said, it has nothing to do with using a NavigationPage for the master page. The reason my app is working is because I did NOT use FormsAppCompatActivity. I am using FormsApplicationActivity which apparently handles master detail differently. I am not sure if you need the AppCompat stuff or not. If so, hopefully, somebody else can help you as I could not get the icon to change when using FormsAppCompatActivity as the base for my MainActivity.cs.

    One more thing, once the icon is changed, I see both the application icon AND the master detail icon at the same time. I didn't want that, so you will see in my sample app that I set my application icon to a clear icon to hide it.

    And finally, the reason I use a NavigationPage for my master is because my master page is a ListView and on iOS, the NavigationPage header moves the content away from the status bar at the top. So using a NavigationPage for my master had nothing to do with Android. My attached sample app does not use one.

  • PaulinLarochePaulinLaroche FRUniversity ✭✭

    Hello, @ShawnCastrianni.5092, @PabloBiagioli , i tried your sample on Android, but still have the Android burger, not mine :neutral: , have an idea ?

    Many thanks,

    Paulin.

  • GuiWaltrickeGuiWaltricke BRMember ✭✭

    @PaulinLaroche do you found anything to solve this?

  • CarlOrmerodCarlOrmerod USMember

    I believe I finally found the answer after over 4 months of looking. This solution is for FormsAppCompatActivity.

    Credit goes to Grace Feng's solution:
    https://stackoverflow.com/questions/44295691/change-menu-bar-icon-on-navigation-page

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

    }

  • ZePingDingZePingDing USMember ✭✭

    Hi @CarlOrmerod ,

    I am getting Object Null Reference on this line:
    var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);

    Do you have any ideas? I am setting my toolbar on my MainActivity/OnCreate with ToolbarResource = Resource.Layout.Toolbar;

    Thanks.

  • CarlOrmerodCarlOrmerod USMember

    Hi @ZePingDing

    Can you please confirm that your "Toolbar.axml" layout file has android:id="@+id/toolbar" for the <android.support.v7.widget.Toolbar ?

    Kind Regards

  • ZePingDingZePingDing USMember ✭✭

    Hi @CarlOrmerod

    Yes, I confirm that my "Toolbar.axml" layout file has android:id="@+id/toolbar". Here is the axml file for your reference.

    <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toolbar" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    Thanks.

  • I wrote a custom renderer for this

    public class MasterDetailRenderer : MasterDetailPageRenderer 
    {
        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            base.OnLayout(changed, l, t, r, b);
            SetNavigationIcon(Forms.Context, Resource.Drawable.IconSmall);
        }
    
        private void SetNavigationIcon(Context context, int resourceId)
        {
            var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            var navIcon = toolbar.NavigationIcon.Callback as ImageButton;
    
            navIcon?.SetImageDrawable(context.GetDrawable(resourceId));
        }
    }
    
  • alexuddalexudd SEMember ✭✭

    If you write a custom renderer setting a specific menu icon. What happens when you push a new page to a navigation page. No back arrow is presented. You get the menu icon but clicking it goes back to previous page. Any solutions for that behavior?

  • CaramelCaramel Member ✭✭

    I want to override the "hamburger menu Icon" with the "Navigation bar back icon" in details page. Can Any one please suggest how to replace that hamburger menu with navigation bar.

    I want Like this:

  • FrancescoFrancesco USMember ✭✭
    edited March 2018

    For what I see here mobikul.com/change-hamburger-icon-android/ it can be done very easily, but is necessary to translate the java code in c#. So

        //java
        mDrawerToggle.setDrawerIndicatorEnabled(false);
    
        //becomes in c#
        mDrawerToggle.DrawerIndicatorEnabled = false;
    

    and

    //java
    mDrawerToggle.setHomeAsUpIndicator(R.drawable.ic_hamburg);
    
    //becomes in c#
    mDrawerToggle.SetHomeAsUpIndicator(Resource.Drawable.ic_hamburg);
    

    but I've some difficulties to transalte this part in c#

    mDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
              @Override
                   public void onClick(View view) {
                       mDrawerLayout.openDrawer(GravityCompat.START);
                   }
               });
    
    //it doesn't works
    drawerToggle.ToolbarNavigationClickListener.OnClick(drawerLayout.OpenDrawer(Android.Support.V4.View.GravityCompat.Start));
    

    clearly it depends on my noobness in c#. Do you have any suggestion?

  • FrancescoFrancesco USMember ✭✭
    edited March 2018

    I answer myself

    // disable the old icon
    drawerToggle.DrawerIndicatorEnabled = false;
    
    //open drawer on icon click
    drawerToggle.ToolbarNavigationClickListener = new MyClickListener(v => drawerLayout.OpenDrawer(Android.Support.V4.View.GravityCompat.Start));
    
    // Change with a new icon            
    drawerToggle.SetHomeAsUpIndicator(Resource.Drawable.iconaMenu); `
    

    and
    private class MyClickListener : Java.Lang.Object, View.IOnClickListener
    {
    private Action _onClick;

        public void OnClick(View v)
        {
            _onClick(v);
        }
    
        public MyClickListener(Action<View> onClick)
        {
            _onClick = onClick;
        }
    
    }
    
  • Pierre-ChristopheDusPierre-ChristopheDus FRUniversity ✭✭✭

    @alexudd said:
    If you write a custom renderer setting a specific menu icon. What happens when you push a new page to a navigation page. No back arrow is presented. You get the menu icon but clicking it goes back to previous page. Any solutions for that behavior?

    Hi @alexudd
    Did you found a solution for this behavior?
    I use the same renderer, but I would like to keep the back icon...

  • I'm still looking for a solution in 2018, and finally done it with unicode.
    add Title="☰" in MasterPage xaml. (Listen again, in master page xaml).

Sign In or Register to comment.