AUI Shell.TitleView: Unable to Remove Padding/Margin on iOS and Android

Question

I am developing a MAUI mobile application and am struggling to customize the header using the Shell.TitleView. The issue is the persistent padding/margin areas around the TitleView that I cannot seem to modify.

Here are the problems I'm encountering:

iOS: There is extra space on the top and both sides of the TitleView that I cannot remove. The areas marked in red in the first image highlight these problematic spaces.

Android: There is extra space on the left-hand side of the TitleView (marked in red in the second image).

Ignore the red boxes in the TitleView. That was just me blocking out my name.

I have tried setting the following properties in XAML and code-behind, but none of them seem to have any effect:

Padding, Margin, HeightRequest, WidthRequest, HorizontalOptions, VerticalOptions

I also attempted modifying the Shell styles and themes but haven't had any success. I don't even want to move content into the area on iOS, I just want to colorize and in Android, I want to colorize and center everything as it's all shifted right.

Has anyone else experienced this issue? If so, how did you resolve it? Any advice or suggestions would be greatly appreciated!

Attached are the images.

Thank you in advance for your help!

Answer 1

Hello,

You can do it by ShellRenderer and Conditional compilation.

For android platform, please create ShellRenderer in the Platforms/Android folder.

Then override CreateTrackerForToolbar, remove the left-padding by toolbar.ContentInsetStartWithNavigation = 0; toolbar.SetContentInsetsAbsolute(0, 0); like following code

using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace MauiApp13.Platforms.Android
{
    public class MyCustomShellRenderer: ShellRenderer
    {
        protected override IShellToolbarTracker CreateTrackerForToolbar(AndroidX.AppCompat.Widget.Toolbar toolbar)
        {
            toolbar.ContentInsetStartWithNavigation = 0;
            toolbar.SetContentInsetsAbsolute(0, 0);
            return base.CreateTrackerForToolbar(toolbar);
        }
    }
}

For iOS, create ShellRenderer in the Platforms/iOS folder. Override CreateNavBarAppearanceTracker method, then create MyCreateNavBarAppearanceTracker to set navBar.LayoutMargins = UIEdgeInsets.Zero; // Remove extra marginsnavBar.ContentMode = UIViewContentMode.ScaleAspectFill; // Adjust content mode` like following code.

using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using UIKit;
 
namespace MauiApp13.Platforms.iOS
{
swift
public class MyCustomShellRendererForiOS:ShellRenderer
{
    protected override IShellNavBarAppearanceTracker CreateNavBarAppearanceTracker()
    {

        return new MyCreateNavBarAppearanceTracker();
    }
}

public class MyCreateNavBarAppearanceTracker : IShellNavBarAppearanceTracker
{
    public void Dispose()
    {
        //throw new NotImplementedException();
    }

    public void ResetAppearance(UINavigationController controller)
    {
       // throw new NotImplementedException();
    }

    public void SetAppearance(UINavigationController controller, ShellAppearance appearance)
    {
        var  navBar= controller.NavigationBar;
        navBar.LayoutMargins = UIEdgeInsets.Zero; // Remove extra margins
        navBar.ContentMode = UIViewContentMode.ScaleAspectFill; // Adjust content mode


    }

    public void SetHasShadow(UINavigationController controller, bool hasShadow)
    {

 
    }

    public void UpdateLayout(UINavigationController controller)
    {
    }
}
}

In the end, please add two handler in the MauiProgram.cs, you can use Conditional compilation to wrap different implement of adding handler code.

public static class MauiProgram
{

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        })
         .ConfigureMauiHandlers(handlers =>
         {
#if ANDROID


             handlers.AddHandler(typeof(AppShell), typeof(MauiApp13.Platforms.Android.MyCustomShellRenderer));
`#elif IOS

             handlers.AddHandler(typeof(AppShell), typeof(MauiApp13.Platforms.iOS.MyCustomShellRendererForiOS));
#endif


         }); ;
#if DEBUG



	builder.Logging.AddDebug();
#endif
 

    return builder.Build();
}
}

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.