How to hide/disable the hamburger icon for Android.

Question

How to hide/disable the hamburger icon for Android.

Huynh Than 65

Hi, I'm Daniel, and I'm using MAUI as a migration from Xamarin. On Android, I have a FlyoutPage that looks like this. User's image

I used it to navigate 2 times to reach a page as shown below, please don't mind the title of the Page. It has a different content. User's image

However, when I tap on back button, it pops up the flyout page instead of letting me go back to the previous page. The flyout behavior is popovers, so it doesn't need the hamburger icon to pop up the flyout page. Swiping is just enough. On Xamarin, this back button works just fine. I wonder if we have a way to disable that icon in MAUI?

Anonymous

How to hide/disable the hamburger icon for Android.

You can create a shell renderer and get the toolbar, hide/disable the hamburger icon by toolbar.NavigationIcon = null;. Firstly, you can create a shell renderer in the yourporject/Platforms/Android folder. Then override the CreateToolbarAppearanceTrackerand create your custom ShellToolbarAppearanceTracker, then you can get the Toolbar. Then you can hide/disable the hamburger icon by toolbar.NavigationIcon = null;like following code.

public  class CustomShellHandler : ShellRenderer
  {    
      protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
      {
          return new CustomShellToolbarAppearanceTracker();
      }
  }
  internal class CustomShellToolbarAppearanceTracker : IShellToolbarAppearanceTracker
  {
      public void Dispose()
      {
      }


     public void ResetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker)
      {
         
      }

     public async void SetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
      {
        
          if (toolbarTracker.CanNavigateBack==false)
          {
             await Task.Delay(5).ContinueWith(action =>
              {
                  MainThread.InvokeOnMainThreadAsync(() =>
                  {
                      toolbar.NavigationIcon = null;
                  });      
              });
          }
          
      }
  }

By the way, if you add toolbar.NavigationIcon = null; without adding a delay, your hamburger icon will still show after navigating back the home page.

In the end, please do not forget to register this renderer in the MauiProgram.cs.

  builder
                .UseMauiApp<App>()
                .ConfigureMauiHandlers(handlers =>
                {
#if ANDROID
                    handlers.AddHandler<Shell, MauiApp6.Platforms.Android.CustomShellHandler>();

#endif
                })

Huynh Than 65 Reputation points

2024-01-29T15:38:27.76+00:00

I'm not using Shell to contain my flyout page, unfortunately. The way I use the flyout is pretty similar to the docs. https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pages/flyoutpage?view=net-maui-8.0 It's just a regular page like others. I also tried your solution and it didn't work too because Shell is not used. Shall I create a Shell.xaml and leave it there without adding anything to it?

1 answer

Your answer

Anonymous

2024-01-29T07:14:51.9666667+00:00

How to hide/disable the hamburger icon for Android.

You can create a shell renderer and get the toolbar, hide/disable the hamburger icon by toolbar.NavigationIcon = null;. Firstly, you can create a shell renderer in the yourporject/Platforms/Android folder. Then override the CreateToolbarAppearanceTrackerand create your custom ShellToolbarAppearanceTracker, then you can get the Toolbar. Then you can hide/disable the hamburger icon by toolbar.NavigationIcon = null;like following code.

public class CustomShellHandler : ShellRenderer { protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker() { return new CustomShellToolbarAppearanceTracker(); } } internal class CustomShellToolbarAppearanceTracker : IShellToolbarAppearanceTracker { public void Dispose() { } public void ResetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker) { } public async void SetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance) { if (toolbarTracker.CanNavigateBack==false) { await Task.Delay(5).ContinueWith(action => { MainThread.InvokeOnMainThreadAsync(() => { toolbar.NavigationIcon = null; }); }); } } }

By the way, if you add toolbar.NavigationIcon = null; without adding a delay, your hamburger icon will still show after navigating back the home page.

In the end, please do not forget to register this renderer in the MauiProgram.cs.

builder .UseMauiApp<App>() .ConfigureMauiHandlers(handlers => { #if ANDROID handlers.AddHandler<Shell, MauiApp6.Platforms.Android.CustomShellHandler>(); #endif })
Huynh Than 65 Reputation points

2024-01-29T15:38:27.76+00:00

I'm not using Shell to contain my flyout page, unfortunately. The way I use the flyout is pretty similar to the docs. https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pages/flyoutpage?view=net-maui-8.0 It's just a regular page like others. I also tried your solution and it didn't work too because Shell is not used. Shall I create a Shell.xaml and leave it there without adding anything to it?

Answer 1

Anonymous

Hello, If you use flyoutpage, you can hide the hamburger button by adding a ToolbarHandler in your android platform folder.

using Google.Android.Material.AppBar;

namespace MauiApp6.Platforms.Android
{
    internal class ToolbarHandler : Microsoft.Maui.Handlers.ToolbarHandler
    {
        protected override void ConnectHandler(MaterialToolbar platformView)
        {
            Toolbar toolbar=VirtualView as Toolbar;
            toolbar.DrawerToggleVisible = false;
            (VirtualView as Toolbar).PropertyChanged += ToolbarHandler_PropertyChanged;
            base.ConnectHandler(platformView);
        }


       protected override void DisconnectHandler(MaterialToolbar platformView)
        {
            (VirtualView as Toolbar).PropertyChanged -= ToolbarHandler_PropertyChanged;
            base.DisconnectHandler(platformView);
        }


       private void ToolbarHandler_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (sender is not Toolbar toolbar || !toolbar.DrawerToggleVisible)
            {
                return;
            }
            toolbar.DrawerToggleVisible = false;
        }
    }
}

Then please register this handler in your MauiProgram.cs..

   builder
                .UseMauiApp<App>()
                .ConfigureMauiHandlers(handlers =>
                {
#if ANDROID
                    handlers.AddHandler<Toolbar, MauiApp6.Platforms.Android.ToolbarHandler>();

#endif
                })

Best Regards, Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Huynh Than 65 Reputation points

2024-01-30T15:54:23.0966667+00:00

This approach is good, except it now also disables my back button. I still need the back button to be there to navigate back, but the hamburger icon must go as it overlaps with the back button and makes the back navigation impossible.
Anonymous

2024-01-31T02:02:43.0233333+00:00

I create a demo with this flyoutpage layout code and naivgate page with Navigation.PushAsync(new MainPage());. I test it in Android 13 and 14 emulators. Both of them have back arrow.

Can you share reproduced steps and code?
Huynh Than 65 Reputation points

2024-01-31T14:55:32.2833333+00:00

Sorry, I just replied the comment above
Huynh Than 65 Reputation points

2024-01-31T15:00:14.6666667+00:00

I will try to reproduce the steps. I bring the whole old Xamarin code to this new one so I'm pretty sure that there must be other code in a file that manipulates this hamburger icon. But I just couldn't find it yet.
Anonymous

2024-02-02T08:02:22.26+00:00

Do you get the reproduce steps?
Huynh Than 65 Reputation points

2024-02-08T16:01:35.34+00:00

Not sure how I can reproduce this. I have switched to a different issue and spend most of my time on it. I will get back to this hamburger icon issue if time permits. Thanks for your assistance.
Anonymous

2024-02-13T03:47:23.3266667+00:00

Ok, you can update here when you feel free.

Share via

How to hide/disable the hamburger icon for Android.

1 answer

Your answer