Skip to content

[Android] TabbedPage BottomNavigation BarBackgroundColor does not extend to system navigation bar area in Edge-to-Edge mode #33344

@muak

Description

@muak

Description

In .NET MAUI 10 on Android 15 (API 35+), when using TabbedPage with ToolbarPlacement.Bottom, the BarBackgroundColor does not extend to the system navigation bar area (the area where the gesture bar or 3-button navigation is displayed).

This creates a visual inconsistency where the tab bar has the specified color, but the area below it remains unaffected. Setting BackgroundColor on TabbedPage, NavigationPage, or ContentPage also does not fill this region.

Steps to Reproduce

  1. Create a new .NET MAUI app
  2. Replace App.xaml.cs with the reproduction code below
  3. Run on Android 15+ device or emulator
  4. Observe the system navigation bar area below the orange tab bar

Reproduction Code

using Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;
using Application = Microsoft.Maui.Controls.Application;
using Platform = Microsoft.Maui.Controls.PlatformConfiguration;
using TabbedPage = Microsoft.Maui.Controls.TabbedPage;

namespace BottomNavigationIssue;

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
    }

    protected override Window CreateWindow(IActivationState? activationState)
    {
        return new Window(CreateTabbedPage());
    }

    private TabbedPage CreateTabbedPage()
    {
        var tabbedPage = new TabbedPage();

        // Display as BottomNavigation (Android)
        tabbedPage.On<Platform.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
        tabbedPage.On<Platform.Android>().SetIsSwipePagingEnabled(false);
        tabbedPage.On<Platform.Android>().SetIsSmoothScrollEnabled(false);

        // Set TabBar background color to orange
        // Issue: This color does not extend to the system navigation bar area
        tabbedPage.BarBackgroundColor = Color.FromArgb("#FF5722");
        tabbedPage.BarTextColor = Colors.White;

        // None of these background colors affect the navigation bar area
        tabbedPage.BackgroundColor = Colors.Blue;

        // Tab1
        var page1 = new ContentPage { Title = "Tab1", BackgroundColor = Colors.BurlyWood };
        NavigationPage.SetHasNavigationBar(page1, false);
        var nav1 = new NavigationPage(page1) { Title = "Tab1", BarBackgroundColor = Colors.Green };
        tabbedPage.Children.Add(nav1);

        // Tab2
        var page2 = new ContentPage { Title = "Tab2" };
        NavigationPage.SetHasNavigationBar(page2, false);
        var nav2 = new NavigationPage(page2) { Title = "Tab2" };
        tabbedPage.Children.Add(nav2);

        tabbedPage.CurrentPage = tabbedPage.Children[0];

        return tabbedPage;
    }
}

Expected Behavior

The BarBackgroundColor of TabbedPage (or some configurable property) should extend to fill the system navigation bar area, providing a seamless visual appearance in Edge-to-Edge mode.

Actual Behavior

The system navigation bar area below the BottomNavigationView remains unaffected by any background color settings. The area displays a default color instead of the specified BarBackgroundColor.

Version with bug

.NET MAUI 10.0.20

Is this a regression from previous behavior?

Yes, this is a regression. Edge-to-Edge mode was introduced in .NET MAUI 10.

Last version that worked well

.NET MAUI 9.x (Edge-to-Edge was not enabled by default)

Affected platforms

Android

Affected platform versions

Android 15 (API 35)+

Did you find any workaround?

Manual workaround requires platform-specific code: Add a custom View with the same background color as BottomNavigationView to the content view, positioned at the bottom with the height of the navigation bar insets using WindowInsetsCompat.

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Status

    Done

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions