Skip to content

DawidBester/TabbedPageSafeAreaGapIssue

Repository files navigation

CommunityToolkit.Maui Bug: StatusBar.SetColor() Breaks SafeAreaEdges on TabbedPage

Description

Calling StatusBar.SetColor() from CommunityToolkit.Maui causes SafeAreaEdges="Container" to render incorrectly on pages within a TabbedPage on Android API 34 and lower (non-edge-to-edge mode).

Affected: Android API 34 and lower only.

NOT affected: Android API 35/36 (edge-to-edge mode) - works correctly.

Root Cause: StatusBar.SetColor() - confirmed through isolation testing.

NOT affected: StatusBar.SetStyle() does NOT cause this issue.

Environment

  • .NET Version: 10.0
  • .NET MAUI Version: 10.0.20 (Microsoft.Maui.Controls)
  • CommunityToolkit.Maui Version: 13.0.0
  • Platform: Android
  • Android API Level: 34 (and lower, non-edge-to-edge mode)
  • Device: Any Android device/emulator

Steps to Reproduce

  1. Create a TabbedPage with multiple tabs
  2. Each tab should be a NavigationPage containing a ContentPage
  3. Each ContentPage should have SafeAreaEdges="Container"
  4. Call StatusBar.SetColor() from CommunityToolkit.Maui in App.OnStart()
  5. Run on Android API 34 (or lower)

Expected Behavior

All tabs should render content correctly with proper safe area insets, regardless of StatusBar API calls.

Actual Behavior

An extra gap appears between the status bar and the page content on all tabs (or sometimes only non-last tabs depending on timing).

Visual Evidence

With StatusBar.SetColor() (Bug) Without StatusBar.SetColor() (Correct)
Extra green gap above header No extra gap, header at correct position

Workaround

Option 1: Remove StatusBar.SetColor() call - use StatusBar.SetStyle() only if needed.

Option 2: Set status bar color via Android native API in styles.xml instead:

<item name="colorPrimaryDark">#FF005a00</item>

Additional Notes

  • The issue does NOT occur on Android API 35/36 (edge-to-edge mode) - only affects API 34 and lower
  • StatusBar.SetStyle() alone does NOT cause this issue
  • The issue affects SafeAreaEdges rendering on ContentPage and ContentView

Related Issues

Project Structure

TabbedPageSafeAreaGapIssue/
├── App.xaml / App.xaml.cs         - App entry point (contains StatusBar calls)
├── MainTabbedPage.xaml/.cs        - TabbedPage with 4 NavigationPage tabs
├── TabPage.xaml/.cs               - ContentPage demonstrating the issue
├── Controls/PageHeader.xaml/.cs   - Header control with SafeAreaEdges
└── README.md                      - This file

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages