How to change the size of MAUI Shell back button? For improved use when using tablets with gloves

Question

Hello :)

I am working on a team developing a MAUI app for engineers. Many of our users have suggested enlarging the back button for better use with gloves.

User's image

In my AppShell.xaml I have attempted to use Shell.BackButtonBehaviour and IconOverride to hopefully use and size a custom button but have had no luck. Code shown below

x:Class="Veridian.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:Veridian.Pages">

I only managed to change the icon when setting Shell.BackButtonBehaviour and IconOverride in a specific ContentPage .xaml file. The icon changed to my font awesome icon but the size did not seem adjustable.

Could anyone help with this?

Android is our main platform for use, so just achieving this on Android would be amazing!

Thank you in advance

Tom :)

Answer

Hello Tom,

Many of our users have suggested enlarging the back button for better use with gloves. Android is our main platform for use, so just achieving this on Android would be amazing!

You can do this by ShellRenderer and override the CreateToolbarAppearanceTracke method.

Firstly, you can create a CustomShellRenderer in your yourproject.Platforms.Android folder.

Then you can get Toolbar for android platform and get the ImageButton, set button.SetScaleType(ImageButton.ScaleType.FitCenter);.

using Android.Content;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using ImageButton= Android.Widget.ImageButton;
 
namespace MauiApp10.Platforms.Android
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context)
        {
        }
        protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
        {
            return new CustomToolbarAppearanceTracker();
        }       
    }
    public class CustomToolbarAppearanceTracker : IShellToolbarAppearanceTracker
    {
        public void Dispose()
        {
        }
        public void ResetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker)
        {
        }
        public void SetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
        {
 
            for (int i = 0; i < toolbar.ChildCount; i++)
            {
                var view = toolbar.GetChildAt(i);
 
                if (view is ImageButton backButton1)
                {
                    //Change the size of the back button
                    var button = backButton1;                   
                    button.SetScaleType(ImageButton.ScaleType.FitCenter);
                    break;
                }
            }
 
        }
    }
}

In the end, you need register this CustomShellRenderer in the MauiProgram.cs like following code.

   public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .ConfigureMauiHandlers((handlers) =>
             {
#if ANDROID
                 handlers.AddHandler(typeof(AppShell), typeof(MauiApp10.Platforms.Android.CustomShellRenderer));
 
#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.

Share via

How to change the size of MAUI Shell back button? For improved use when using tablets with gloves

1 answer

Your answer