-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Description
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
- Create a new .NET MAUI app
- Replace
App.xaml.cswith the reproduction code below - Run on Android 15+ device or emulator
- 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.

Metadata
Metadata
Assignees
Labels
Type
Projects
Status