[Android] Fix NavigationBar overlapping StatusBar when NavigationBar visibility changes #33359
Conversation
dotnet-policy-service
bot
added
the
partner/syncfusion
Tamilarasan-Paranthaman
added
platform/android
area-controls-tabbedpage
There was a problem hiding this comment.
Pull request overview
This PR fixes an Android-specific issue where the NavigationBar overlaps the StatusBar in a TabbedPage when tabs use mixed HasNavigationBar values. The root cause stems from PR #27294's introduction of default OffscreenPageLimit, which pre-creates tab fragments with cached layout measurements. The fix addresses two related issues: 1) NavigationBar layout not accounting for height changes when switching tabs, and 2) StatusBar color not resetting when returning to tabs without NavigationBar.
Key Changes:
- Explicit insets reapplication when toolbar visibility/height changes
- Proper AppBarLayout content state detection by resetting cached measurements
- Comprehensive UI test with screenshot verification
Reviewed changes
Copilot reviewed 4 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
src/Core/src/Platform/Android/MauiWindowInsetListener.cs |
Initializes appBarHasContent to false before checking child heights to prevent stale measurements from previous tab switches |
src/Controls/src/Core/Platform/Android/Extensions/ToolbarExtensions.cs |
Adds RequestApplyInsets() call after updating toolbar layout parameters to trigger Android insets recalculation |
src/Controls/tests/TestCases.HostApp/Issues/Issue33340.cs |
Creates TabbedPage with bottom toolbar and mixed HasNavigationBar settings to reproduce the issue |
src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue33340.cs |
NUnit test that navigates to Tab4 and verifies layout via screenshot |
src/Controls/tests/TestCases.Android.Tests/snapshots/android/NavigationBarLayoutWithMixedHasNavigationBar.png |
Android screenshot baseline for test verification |
src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/NavigationBarLayoutWithMixedHasNavigationBar.png |
iOS screenshot baseline (binary file) |
| Children.Add(new NavigationPage(page1) { Title = "Tab1" }); | ||
|
|
||
| var page2 = new ContentPage { Title = "Page2", Content = new Label { Text = "Page 2" } }; | ||
| NavigationPage.SetHasNavigationBar(page2, false); | ||
| Children.Add(new NavigationPage(page2) { Title = "Tab2" }); | ||
|
|
||
| var page3 = new ContentPage { Title = "Page3", Content = new Label { Text = "Page 3" } }; | ||
| NavigationPage.SetHasNavigationBar(page3, false); | ||
| Children.Add(new NavigationPage(page3) { Title = "Tab3" }); | ||
|
|
||
| var page4 = new ContentPage { Title = "Page4", Content = new Label { Text = "Page 4 with NavigationBar" } }; | ||
| NavigationPage.SetHasNavigationBar(page4, true); | ||
| Children.Add(new NavigationPage(page4) { Title = "Tab4" }); |
There was a problem hiding this comment.
The UI test is missing AutomationId attributes on the tab buttons in the HostApp code. The test tries to interact with "Tab4" using App.WaitForElement("Tab4") and App.Tap("Tab4"), but the HostApp code does not set any AutomationId properties. While the tab Title is "Tab4", relying on Title text for UI automation is fragile and may not work reliably across platforms. Add AutomationId properties to the NavigationPage instances to ensure the test can reliably locate and interact with the tabs.
PR Review Analysis: #33359 - Fix NavigationBar overlapping StatusBar in TabbedPageDate: 2026-01-02 Executive Summary✅ APPROVE WITH MINOR SUGGESTION This PR fixes a regression where the NavigationBar overlaps the StatusBar in TabbedPage when tabs mix Recommendation: This PR should be merged. Phase 0: Test Validation ✅ (WITH CAVEAT)Test Execution Results
ConclusionThe test correctly detects the issue through visual verification. The failure is due to local device configuration (android-notch-36) lacking a baseline snapshot, not a problem with the test or fix logic. In CI with standard configurations, this test will properly validate the fix. Phase 1: Independent AnalysisIssue Summary
Root Cause AnalysisTechnical Details
Second Issue (Discovered during testing)
Phase 2: Approach ComparisonPR's Fix ApproachFix 1: ToolbarExtensions.cs (1 line)nativeToolbar.LayoutParameters = lp;
AndroidX.Core.View.ViewCompat.RequestApplyInsets(nativeToolbar); // <-- Added
Fix 2: MauiWindowInsetListener.cs (2 lines)// Before:
bool appBarHasContent = appBarLayout?.MeasuredHeight > 0;
if (!appBarHasContent && appBarLayout is not null)
// After:
bool appBarHasContent = false; // <-- Initialize to false
if (appBarLayout is not null) // <-- Always check children
Alternative Approaches Considered
Recommendation: ✅ PR's fix is the optimal approachJustification
Phase 3: Regression AnalysisAffected Code PathsUpdateIsVisible called by:
Potential Regressions Analyzed
Edge Cases Checked
Final Recommendation✅ APPROVE WITH MINOR SUGGESTION Summary
Suggested Improvements (Non-blocking)
This PR should be merged. Technical DetailsFiles Changed
Code Changes AnalysisChange 1: Request Inset Reapplication (ToolbarExtensions.cs)// Line 35-36
nativeToolbar.LayoutParameters = lp;
AndroidX.Core.View.ViewCompat.RequestApplyInsets(nativeToolbar); // NEWImpact: Forces Android to recalculate window insets when toolbar visibility changes. This ensures child views get updated measurements after toolbar layout changes. Pattern Usage: This pattern is already used in 4+ other locations in the MAUI codebase for similar purposes. Change 2: Reset AppBarLayout State (MauiWindowInsetListener.cs)// Before (Line 133-134)
bool appBarHasContent = appBarLayout?.MeasuredHeight > 0;
if (!appBarHasContent && appBarLayout is not null)
// After (Line 133-134)
bool appBarHasContent = false;
if (appBarLayout is not null)Impact: Prevents using stale Testing StrategyTest Coverage
Manual Testing Performed
ConclusionThis is a well-crafted fix that:
The PR should be merged. |
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
PureWeen
left a comment
PureWeen
left a comment
There was a problem hiding this comment.
A number of tests are failing
4 participants
Issue Details
On Android, the NavigationBar overlaps the StatusBar in a TabbedPage when tabs use mixed HasNavigationBar values (true / false). Although the NavigationBar appears correctly, the content layout does not account for its height, resulting in UI misalignment.
Regression PR: #27294
Root Cause
PR #27294 introduced a default OffscreenPageLimit value, which pre-creates tab fragments during initialization. When switching between tabs with different HasNavigationBar values, Android’s insets system does not automatically recalculate layout measurements because they were cached during the pre-creation phase. While the toolbar height updates correctly, the content area continues using stale measurements.
Description of Change
Added a call to ViewCompat.RequestApplyInsets() in ToolbarExtensions after updating layout parameters. This explicitly requests Android to reapply window insets and remeasure child views when the toolbar visibility or height changes, ensuring the layout correctly accounts for the NavigationBar.
References:
Android/ContentViewGroup.cs#L149
Android/LayoutViewGroup.cs#L166
Android/MauiScrollView.cs#L303
Tested the behavior in the following platforms
Issues Fixed
Fixes #33340
Screenshots
BeforeFix33340.mov
AfterFix33340.mov