Fix appBarLayout so it extends correctly full screen #32060

PureWeen · 2025-10-18T17:51:37Z

Description of Change

This pull request adds new test cases and improves safe area handling for navigation and shell pages on Android and iOS. It also enhances device compatibility checks for UI tests and clarifies padding logic for the Android app bar layout.

New Safe Area Test Cases:

Added Issue28986_NavigationPage and Issue28986_Shell test pages to verify per-edge safe area control in navigation and shell scenarios (Issue28986_NavigationPage.cs, Issue28986_Shell.cs). [1] [2]
Implemented corresponding UI tests for these pages to ensure toolbars extend fully left and right in both portrait and landscape orientations (Issue28986_NavigationPage.cs, Issue28986_Shell.cs). [1] [2]

Device Compatibility Improvements:

Updated device screen size checks in UITest.cs to accept both "width x height" and "height x width" formats for better emulator compatibility.

Safe Area Padding Logic:

Refined padding for AppBarLayout on Android to correctly account for system bars and navigation bar placement, improving toolbar visibility and interaction across device orientations (GlobalWindowInsetListener.cs).

Generate any new Notch related screen shots
I did a local rerun of all the notch images just to make sure those are all up to date once we get that CI running.

Before and After

The picture below is on a Pixel 9.
The white part is where the camera is on the front of the screen, it's basically a NOTCH.

PureWeen · 2025-10-18T17:52:33Z

/backport to release/10.0.1xx

github-actions · 2025-10-18T17:52:47Z

Started backporting to release/10.0.1xx: https://github.com/dotnet/maui/actions/runs/18618999271

Copilot

Pull Request Overview

This PR adjusts Android AppBarLayout padding logic for correct full-screen extension, enhances device screen size compatibility checks in UI tests, and adds new safe area test cases for Shell and Navigation pages on iOS/Android.

Updated AppBarLayout padding to use system bar insets for left/right edges.
Added Shell and NavigationPage safe area UI tests plus corresponding HostApp pages.
Expanded emulator screen size validation to accept rotated width/height formats.

Reviewed Changes

Copilot reviewed 6 out of 10 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/Core/src/Platform/Android/GlobalWindowInsetListener.cs	Modifies AppBarLayout padding to use system bar insets for better safe area handling.
src/Controls/tests/TestCases.Shared.Tests/UITest.cs	Broadens device screen size checks to accept alternative orientation formats.
src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue28986_Shell.cs	Adds Shell safe area UI test exercising landscape/portrait transitions.
src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue28986_NavigationPage.cs	Adds NavigationPage safe area UI test for edge extension validation.
src/Controls/tests/TestCases.HostApp/Issues/Issue28986_Shell.cs	Introduces Shell host page used by the new safe area test.
src/Controls/tests/TestCases.HostApp/Issues/Issue28986_NavigationPage.cs	Introduces NavigationPage host page used by the new safe area test.

Copilot · 2025-10-18T17:52:45Z

src/Controls/tests/TestCases.Shared.Tests/UITest.cs

 						}

-						if (!((deviceApiLevel == 30 && deviceScreenSize == "1080x1920" && deviceScreenDensity == 420) || (deviceApiLevel == 36 && deviceScreenSize == "1080x2424" && deviceScreenDensity == 420)))
+						if (!((deviceApiLevel == 30 && (deviceScreenSize == "1080x1920" || deviceScreenSize == "1920X1080" ) && deviceScreenDensity == 420) || 


The string literal "1920X1080" has an uppercase X while other comparisons use lowercase x; this exact match will never succeed if the reported size follows the existing lowercase pattern, reducing intended compatibility. Change it to "1920x1080".

Suggested change

if (!((deviceApiLevel == 30 && (deviceScreenSize == "1080x1920" || deviceScreenSize == "1920X1080" ) && deviceScreenDensity == 420) ||

if (!((deviceApiLevel == 30 && (deviceScreenSize == "1080x1920" || deviceScreenSize == "1920x1080" ) && deviceScreenDensity == 420) ||

Copilot · 2025-10-18T17:52:45Z

src/Controls/tests/TestCases.Shared.Tests/UITest.cs

+						if (!((deviceApiLevel == 30 && (deviceScreenSize == "1080x1920" || deviceScreenSize == "1920X1080" ) && deviceScreenDensity == 420) || 
+								(deviceApiLevel == 36 && (deviceScreenSize == "1080x2424" || deviceScreenSize == "2424x1080") && deviceScreenDensity == 420)))


The nested conditional combines multiple screen size and API checks inline, reducing readability and increasing duplication. Consider normalizing deviceScreenSize (e.g., ensure lowercase, order-independent) and extracting a helper like IsSupportedAndroidTestEnvironment(deviceApiLevel, deviceScreenSize, deviceScreenDensity) or using a HashSet of allowed tuples for clarity.

Copilot · 2025-10-18T17:52:46Z

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue28986_Shell.cs

+	public void ToolbarExtendsAllTheWayLeftAndRight_Shell()
+	{
+		// 1. Test loads - verify essential elements are present
+		App.WaitForElement("ContentGrid");
+		App.SetOrientationLandscape();
+		App.WaitForElement("ContentGrid");
+		VerifyScreenshot();


The test only waits for the element and captures a screenshot; it does not assert that the toolbar actually extends edge-to-edge (behavior under test). Add explicit assertions (e.g., measure toolbar bounds vs device screen width or verify absence of horizontal padding) instead of relying solely on manual/visual screenshot inspection.

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue28986_NavigationPage.cs

Copilot · 2025-10-18T17:52:46Z

src/Controls/tests/TestCases.HostApp/Issues/Issue28986_Shell.cs

+using System.Drawing;
+


The System.Drawing namespace is not used in this file (Colors.Blue comes from Microsoft.Maui.Graphics), so this using directive can be removed to reduce noise.

Suggested change

using System.Drawing;

Copilot · 2025-10-18T17:52:46Z

src/Core/src/Platform/Android/GlobalWindowInsetListener.cs

+                    // Pad the AppBarLayout to avoid the navigation bar in landscape orientation and system UI in portrait.
+                    // In landscape, the navigation bar is on the left or right edge; in portrait, we account for the status bar and display cutouts.
+                    // Without this padding, the AppBarLayout would extend behind these system UI elements and be partially hidden or non-interactive.
+                    appBarLayout.SetPadding(systemBars?.Left ?? 0, topInset, systemBars?.Right ?? 0, 0);


The padding now mixes sources (systemBars?.Left/Right with topInset) and removes previous left/right inset padding entirely when the layout is empty; this change reduces clarity on why top uses a different inset source. Consider consistently using systemBars values (including top) or add a brief inline note explaining why topInset is preferred over systemBars?.Top and why padding is fully cleared in the else branch.

Suggested change

appBarLayout.SetPadding(systemBars?.Left ?? 0, topInset, systemBars?.Right ?? 0, 0);

// Use the maximum of systemBars and displayCutout for all edges to ensure consistent handling of system UI and cutouts.

appBarLayout.SetPadding(leftInset, topInset, rightInset, 0);

Copilot · 2025-10-18T17:52:47Z

src/Core/src/Platform/Android/GlobalWindowInsetListener.cs

+                    // Without this padding, the AppBarLayout would extend behind these system UI elements and be partially hidden or non-interactive.
+                    appBarLayout.SetPadding(systemBars?.Left ?? 0, topInset, systemBars?.Right ?? 0, 0);
                }
                else
                {


The padding now mixes sources (systemBars?.Left/Right with topInset) and removes previous left/right inset padding entirely when the layout is empty; this change reduces clarity on why top uses a different inset source. Consider consistently using systemBars values (including top) or add a brief inline note explaining why topInset is preferred over systemBars?.Top and why padding is fully cleared in the else branch.

Suggested change

// Without this padding, the AppBarLayout would extend behind these system UI elements and be partially hidden or non-interactive.

appBarLayout.SetPadding(systemBars?.Left ?? 0, topInset, systemBars?.Right ?? 0, 0);

}

else

{

// Without this padding, the AppBarLayout would extend behind these system UI elements and be partially hidden or non-interactive.

// Note: topInset is used for the top padding instead of systemBars?.Top because it may include additional insets (e.g., display cutouts) not present in systemBars.

appBarLayout.SetPadding(systemBars?.Left ?? 0, topInset, systemBars?.Right ?? 0, 0);

}

else

{

// When the AppBarLayout is empty, all padding is cleared to avoid reserving space for system bars unnecessarily.

PureWeen · 2025-10-18T18:52:52Z

/backport to release/10.0.1xx

github-actions · 2025-10-18T18:53:08Z

Started backporting to release/10.0.1xx: https://github.com/dotnet/maui/actions/runs/18619646300

PureWeen · 2025-10-18T20:26:29Z

/backport to release/10.0.1xx

github-actions · 2025-10-18T20:26:42Z

Started backporting to release/10.0.1xx: https://github.com/dotnet/maui/actions/runs/18620579686

jsuarezruiz · 2025-10-21T11:29:13Z

src/Controls/tests/TestCases.Shared.Tests/UITest.cs

 						}

-						if (!((deviceApiLevel == 30 && deviceScreenSize == "1080x1920" && deviceScreenDensity == 420) || (deviceApiLevel == 36 && deviceScreenSize == "1080x2424" && deviceScreenDensity == 420)))
+						if (!((deviceApiLevel == 30 && (deviceScreenSize == "1080x1920" || deviceScreenSize == "1920X1080" ) && deviceScreenDensity == 420) || 


"1920X1080" uses uppercase 'X' while "1080x1920" uses lowercase 'x'. Should normalize with .ToLower()?

jsuarezruiz · 2025-10-21T11:30:33Z

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue28986_NavigationPage.cs

+		App.SetOrientationLandscape();
+		App.WaitForElement("ContentGrid");
+		VerifyScreenshot();
+		App.SetOrientationPortrait();


The test sets orientation back to portrait but doesn't verify the UI in portrait mode, should verify with a screenshot the layout again?

@PureWeen Let me know if want myself to include more tests.

src/Core/src/Platform/Android/GlobalWindowInsetListener.cs

PureWeen · 2025-10-21T14:38:38Z

/backport to release/10.0.1xx

github-actions · 2025-10-21T14:38:52Z

Started backporting to release/10.0.1xx: https://github.com/dotnet/maui/actions/runs/18687597856

src/Core/src/Platform/Android/GlobalWindowInsetListener.cs

PureWeen · 2025-10-22T20:43:34Z

/rebase

PureWeen · 2025-10-22T20:43:53Z

/backport to release/10.0.1xx

github-actions · 2025-10-22T20:44:07Z

Started backporting to release/10.0.1xx: https://github.com/dotnet/maui/actions/runs/18729373002

… display cutout

PureWeen · 2025-10-22T21:53:33Z

/backport to release/10.0.1xx

github-actions · 2025-10-22T21:53:45Z

Started backporting to release/10.0.1xx: https://github.com/dotnet/maui/actions/runs/18730925262

PureWeen · 2025-10-23T00:09:51Z

/backport to release/10.0.1xx

github-actions · 2025-10-23T00:10:06Z

Started backporting to release/10.0.1xx: https://github.com/dotnet/maui/actions/runs/18733384677

github-actions · 2025-10-23T00:10:33Z

@PureWeen backporting to "release/10.0.1xx" failed, the patch most likely resulted in conflicts:

$ git am --3way --empty=keep --ignore-whitespace --keep-non-patch changes.patch

Applying: Fix appBarLayout so it extends correctly full screen
Applying: - update screen shots
Applying: - update notch images
Applying: - generate iOS images
Applying: - fix based on review comments
Applying: - fix insetting on MaterialToolBar so its content doesn't go into the display cutout
Applying: - fix insets
Applying: - fix screen shots
Using index info to reconstruct a base tree...
A	src/Controls/tests/TestCases.Android.Tests/snapshots/android/CollectionViewSelectionModeOnDarkTheme.png
A	src/Controls/tests/TestCases.Android.Tests/snapshots/android/CollectionViewSelectionModeOnLightTheme.png
Falling back to patching base and 3-way merge...
CONFLICT (modify/delete): src/Controls/tests/TestCases.Android.Tests/snapshots/android/CollectionViewSelectionModeOnLightTheme.png deleted in HEAD and modified in - fix screen shots.  Version - fix screen shots of src/Controls/tests/TestCases.Android.Tests/snapshots/android/CollectionViewSelectionModeOnLightTheme.png left in tree.
warning: Cannot merge binary files: src/Controls/tests/TestCases.Android.Tests/snapshots/android/SelectedTabIconShouldChangeColor.png (HEAD:src/Controls/tests/TestCases.Android.Tests/snapshots/android/SelectedTabIconShouldChangeColor.png vs. - fix screen shots:src/Controls/tests/TestCases.Android.Tests/snapshots/android/CollectionViewSelectionModeOnDarkTheme.png)
Auto-merging src/Controls/tests/TestCases.Android.Tests/snapshots/android/SelectedTabIconShouldChangeColor.png
CONFLICT (content): Merge conflict in src/Controls/tests/TestCases.Android.Tests/snapshots/android/SelectedTabIconShouldChangeColor.png
error: Failed to merge in the changes.
hint: Use 'git am --show-current-patch=diff' to see the failed patch
hint: When you have resolved this problem, run "git am --continue".
hint: If you prefer to skip this patch, run "git am --skip" instead.
hint: To restore the original branch and stop patching, run "git am --abort".
hint: Disable this message with "git config set advice.mergeConflict false"
Patch failed at 0008 - fix screen shots
Error: The process '/usr/bin/git' failed with exit code 128

Please backport manually!

Copilot AI review requested due to automatic review settings October 18, 2025 17:51

Copilot AI reviewed Oct 18, 2025

View reviewed changes

github-actions bot mentioned this pull request Oct 18, 2025

[release/10.0.1xx] Fix appBarLayout so it extends correctly full screen #32061

Open

PureWeen added this to MAUI SDK Ongoing Oct 18, 2025

github-project-automation bot moved this to Todo in MAUI SDK Ongoing Oct 18, 2025

PureWeen added this to the .NET 10.0 GA milestone Oct 18, 2025

jsuarezruiz requested changes Oct 21, 2025

View reviewed changes

github-project-automation bot moved this from Todo to Changes Requested in MAUI SDK Ongoing Oct 21, 2025

jsuarezruiz requested changes Oct 22, 2025

View reviewed changes

src/Core/src/Platform/Android/GlobalWindowInsetListener.cs Show resolved Hide resolved

PureWeen requested a review from jsuarezruiz October 22, 2025 15:46

github-actions bot force-pushed the fix_notch_padding_AppbarLayout branch from 0476879 to f0e909e Compare October 22, 2025 20:45

PureWeen added 7 commits October 22, 2025 16:52

Fix appBarLayout so it extends correctly full screen

365098a

- update screen shots

bf909d8

- update notch images

572dc23

- generate iOS images

5815853

- fix based on review comments

7bbbdd4

- fix insetting on MaterialToolBar so its content doesn't go into the…

f26896e

… display cutout

- fix insets

74bd62b

PureWeen force-pushed the fix_notch_padding_AppbarLayout branch from f0e909e to 74bd62b Compare October 22, 2025 21:53

- fix screen shots

65be10d

	if (!((deviceApiLevel == 30 && (deviceScreenSize == "1080x1920" \|\| deviceScreenSize == "1920X1080" ) && deviceScreenDensity == 420) \|\|
	if (!((deviceApiLevel == 30 && (deviceScreenSize == "1080x1920" \|\| deviceScreenSize == "1920x1080" ) && deviceScreenDensity == 420) \|\|

		if (!((deviceApiLevel == 30 && (deviceScreenSize == "1080x1920" \|\| deviceScreenSize == "1920X1080" ) && deviceScreenDensity == 420) \|\|
		(deviceApiLevel == 36 && (deviceScreenSize == "1080x2424" \|\| deviceScreenSize == "2424x1080") && deviceScreenDensity == 420)))

	appBarLayout.SetPadding(systemBars?.Left ?? 0, topInset, systemBars?.Right ?? 0, 0);
	// Use the maximum of systemBars and displayCutout for all edges to ensure consistent handling of system UI and cutouts.
	appBarLayout.SetPadding(leftInset, topInset, rightInset, 0);

Fix appBarLayout so it extends correctly full screen #32060

Are you sure you want to change the base?

Fix appBarLayout so it extends correctly full screen #32060

Conversation

PureWeen commented Oct 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of Change

Before and After

Uh oh!

PureWeen commented Oct 18, 2025

Uh oh!

github-actions bot commented Oct 18, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

PureWeen commented Oct 18, 2025

Uh oh!

github-actions bot commented Oct 18, 2025

Uh oh!

PureWeen commented Oct 18, 2025

Uh oh!

github-actions bot commented Oct 18, 2025

Uh oh!

jsuarezruiz Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

PureWeen commented Oct 21, 2025

Uh oh!

github-actions bot commented Oct 21, 2025

Uh oh!

Uh oh!

PureWeen commented Oct 22, 2025

Uh oh!

PureWeen commented Oct 22, 2025

Uh oh!

github-actions bot commented Oct 22, 2025

Uh oh!

PureWeen commented Oct 22, 2025

Uh oh!

github-actions bot commented Oct 22, 2025

Uh oh!

PureWeen commented Oct 23, 2025

Uh oh!

github-actions bot commented Oct 23, 2025

Uh oh!

github-actions bot commented Oct 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

PureWeen commented Oct 18, 2025 •

edited

Loading