Custom Shell TabBar handler applies margin to navigation bar and page shows black background under TabBar (Android, .NET MAUI 10)

[rakhthm]

Description

I’m customizing the Shell TabBar on Android using a custom ShellRenderer and ShellBottomNavViewAppearanceTracker to create a floating TabBar with rounded corners and margins.

There are two main issues:

TabBar Margin Affects Navigation Layout
When applying margins and rounded corners to the BottomNavigationView, the margin affects both the TabBar and the navigation/root layout. This creates unexpected spacing above the TabBar and prevents it from appearing as a clean floating element.

Page Background Does Not Extend Under TabBar
Even when SafeAreaEdges="None" is set on the page, the area behind the floating TabBar is rendered black instead of using the page background color.

Environment:

.NET MAUI 10

Platform: Android

Shell-based navigation

Custom ShellRenderer and ShellBottomNavViewAppearanceTracker

Code Sample:
namespace Myapp.Platforms.Android
{
class CustomShellHandler : ShellRenderer
{
protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
{
return new CustomShellBottomNavViewAppearanceTracker(this, shellItem.CurrentItem);
}
}

class CustomShellBottomNavViewAppearanceTracker : ShellBottomNavViewAppearanceTracker
{
private readonly IShellContext shellContext;

public CustomShellBottomNavViewAppearanceTracker(
    IShellContext shellContext,
    ShellItem shellItem
) : base(shellContext, shellItem)
{
    this.shellContext = shellContext;
}

public override void SetAppearance(
    BottomNavigationView bottomView,
    IShellAppearanceElement appearance
)
{
    base.SetAppearance(bottomView, appearance);

    var backgroundDrawable = new GradientDrawable();
    backgroundDrawable.SetShape(ShapeType.Rectangle);
    backgroundDrawable.SetCornerRadius(30);
    backgroundDrawable.SetColor(
        appearance.EffectiveTabBarBackgroundColor.ToPlatform()
    );

    bottomView.SetBackground(backgroundDrawable);

    if (bottomView.LayoutParameters is ViewGroup.MarginLayoutParams marginLayoutParams)
    {
        var margin = 30;
        marginLayoutParams.BottomMargin = margin;
        marginLayoutParams.LeftMargin = margin;
        marginLayoutParams.RightMargin = margin;
        bottomView.LayoutParameters = marginLayoutParams;
    }

}

protected override void SetBackgroundColor(
    BottomNavigationView bottomView,
    Color color
)
{
    base.SetBackgroundColor(bottomView, color);

    bottomView.RootView?.SetBackgroundColor(
        shellContext.Shell.CurrentPage.BackgroundColor.ToPlatform()
    );
}

}
}

Page XAML Example (shows black area under TabBar):

<VerticalStackLayout SafeAreaEdges="None">
    <Label
        Text="Welcome to .NET MAUI!"
        VerticalOptions="Center"
        HorizontalOptions="Center" />
</VerticalStackLayout>

Expected Behavior:

Margin and rounded corners apply only to the TabBar

Navigation bar and page layout remain unchanged

TabBar appears as a floating element

Page background (red) extends under the TabBar without showing black

Actual Behavior:

Margin affects both the TabBar and the navigation/root background

Creates unwanted spacing above the TabBar

Page content does not extend under the TabBar; a black background is visible

Reference:
Based on this tutorial: Customizing .NET MAUI Shell

Question / Discussion:

Is this the expected behavior of BottomNavigationView inside MAUI Shell, or is there a recommended way to isolate styling changes so they apply only to the TabBar without affecting the navigation layout or page background?

Steps to Reproduce

Reference to Reproduce:
Based on this article: Customizing .NET MAUI Shell

Expected Behavior:

Margin and rounded corners apply only to the TabBar

Navigation bar and page layout remain unchanged

TabBar appears as a floating element

Page background (red) extends under the TabBar without showing black

Actual Behavior:

Margin affects both the TabBar and the navigation/root background

Creates unwanted spacing above the TabBar

Page content does not extend under the TabBar; a black background is visible

Link to public reproduction project repository

No response

Version with bug

10.0.10

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

No response

Affected platforms

Android

Affected platform versions

Android 15

Did you find any workaround?

No response

Relevant log output

[rakhthm]

[HarishKumarSF4517]

This issue has been validated in Visual Studio Code 1.107.1 with MAUI versions 10.0.0-preview7, 10.0.0-rc1, 10.0.0-rc2, 10.0.10 & 10.0.20. It was reproducible from 10.0.0-rc2 on Android platform. I have attached the Sample(ShellTabBar.zip)
Note: The TabBar background color works correctly initially, but it does not update when changed dynamically at runtime

[sheiksyedm]

@rakhthm Can you apply SafeAreaEdges="Container" to the page and check whether the tabbar is positioned properly?

[kubaflo]

@rakhthm can you try with 10.0.20, because like @HarishKumarSF4517 wrote it actually works even with SafeAreaEdges="None".

[albyrock87]

@rakhthm you may want to try out https://nalu-development.github.io/nalu/navigation-tabbar.html