Fix AppBarLayout insets when FlyoutPage is pushed modally on Android

[Copilot]

Fix AppBarLayout insets when FlyoutPage is pushed modally on Android

Summary

When a FlyoutPage is pushed modally, the AppBarLayout doesn't receive window insets, causing the navigation bar to render behind system UI elements.

Root Cause

Modal FlyoutPage hierarchy is ContainerView > DrawerLayout > NavigationRoot > AppBarLayout. When the listener is triggered for the ContainerView wrapper, the insets need to pass through to allow the CoordinatorLayout inside to handle them correctly.

Changes

• GlobalWindowInsetListener.cs: Added early return for ContainerView to pass insets through to child views (7 lines added)
• Issue32277.cs (TestCases.HostApp): Added UI test page with button to push FlyoutPage modally
• Issue32277.cs (TestCases.Shared.Tests): Added UI test to verify AppBarLayout insets work correctly (restricted to Android and iOS)

// For ContainerView (e.g., modal FlyoutPage), pass insets through to child views
// This allows the CoordinatorLayout inside to handle insets correctly
if (v is ContainerView)
{
    return insets;
}

This minimal approach allows the standard inset handling to work correctly on the child CoordinatorLayout without any refactoring.

Testing

• UI test Issue32277 validates the fix by pushing a FlyoutPage modally and using screenshot verification to ensure proper AppBarLayout insets
• Test restricted to non-desktop platforms (Android and iOS) using #if ANDROID || IOS
• Manual verification: Maui.Controls.Sample → Core → Modal → Push Modal Flyout Page

Fixes #32277

Original prompt

---

This section details on the original issue you should resolve

<issue_title>When a FlyoutPage is pushed Modally it doesn't inset the AppBarLayout</issue_title>
<issue_description>### Description

Currently when you push a FlyoutPage modally the navigationbar is not correctly being padded, this is most likely because the AppBarLayout isn't being found inside the GlobalWindowInsetListener

Reproduction

Run Maui.Samples
Navigate to Core => Modal
Push Flyout Page Modally</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes When a FlyoutPage is pushed Modally it doesn't inset the AppBarLayout #32277

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[NirmalKumarYuvaraj]

@copilot , This issue occurs only if the flyout page is wrapped inside modal page. No issue if we directly load the FlyoutPage.

[NirmalKumarYuvaraj]

@copilot , When a FlyoutPage is pushed modally, the listener is triggered for the ContainerView. Normally, insets are processed using a CoordinatorLayout-based approach. However, when the ContainerView becomes the root view of the modal flyout, the insets for the CoordinatorLayout are skipped.
Adding a condition like if (v is ContainerView) return insets; fixes the issue and ensures that insets are applied correctly.

[Copilot]

@copilot , When a FlyoutPage is pushed modally, the listener is triggered for the ContainerView. Normally, insets are processed using a CoordinatorLayout-based approach. However, when the ContainerVie...

Implemented the ContainerView early return approach in 3622f9c. This simpler solution passes insets through to child views, allowing the CoordinatorLayout to handle them correctly without needing recursive search.

[NirmalKumarYuvaraj]

@copilot , Remove the unwanted refactoring changes.

[Copilot]

@copilot , Remove the unwanted refactoring changes.

Removed the unwanted refactoring in d367acb. The PR now contains only minimal changes: 7 lines added to GlobalWindowInsetListener.cs for the ContainerView fix, and 34 lines added to ModalTests.Android.cs for the test.

[NirmalKumarYuvaraj]

@copilot , The test case added seems incorrect. Create a UI Test case for this scenario and with Issue32277 as IssueID. The test page Issue32277 should be a content page. That should contain a button. In the button click, Push the flyoutPage modally. Restrict this test case in desktop platforms.
Example code:

public partial class Issue32277 : ContentPage
{
	public Issue32277()
	{
        Button button = new Button
		{
			Text = "Go to Issue32277 Page"
		};
		button.Clicked += async (s, e) =>
		{
			await Navigation.PushModalAsync(new Issue32277_FlyoutPage());
		};
		Content = new StackLayout
		{
			Children =
			{
				button
			}
		};
	}
}

public class Issue32277_FlyoutPage : FlyoutPage
{
	public Issue32277_FlyoutPage()
	{
		Flyout = new ContentPage
		{
			Title = "Flyout",
			Content = new StackLayout
			{
				Children =
				{
					new Label { Text = "This is the flyout page." }
				}
			}
		};

		Detail = new NavigationPage(new ContentPage());
	}
}

[Copilot]

@copilot , The test case added seems incorrect. Create a UI Test case for this scenario and with Issue32277 as IssueID. The test page Issue32277 should be a content page. That should contain a button....

Replaced the DeviceTest with UI Test in 61460bb. Created Issue32277.cs in both TestCases.HostApp (test page with button to push FlyoutPage modally) and TestCases.Shared.Tests (UI test restricted to Android and iOS platforms using #if ANDROID || IOS).

[NirmalKumarYuvaraj]

@copilot , replace App.WaitForElement("DetailLabel", "Detail page should be visible with proper insets"); with VerifyScreenshot().

[Copilot]

Updated in e3adbcc. Replaced App.WaitForElement("DetailLabel", "Detail page should be visible with proper insets") with VerifyScreenshot() for visual verification of proper AppBarLayout insets.

[Copilot]

Pull Request Overview

This PR fixes an issue where modal FlyoutPages don't receive proper window insets on Android, causing the AppBarLayout to render behind system UI elements. The fix adds a special case in the GlobalWindowInsetListener to pass insets through to child views when the view is a ContainerView.

Key changes:

• Modified window inset handling to allow ContainerView to pass insets to its children
• Added UI test coverage for modal FlyoutPage scenarios

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
src/Core/src/Platform/Android/GlobalWindowInsetListener.cs	Added check to pass insets through ContainerView to child views (e.g., CoordinatorLayout)
src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue32277.cs	Added NUnit test to verify modal FlyoutPage receives proper AppBarLayout insets
src/Controls/tests/TestCases.HostApp/Issues/Issue32277.cs	Added HostApp UI page demonstrating modal FlyoutPage inset issue

[Copilot]

This platform directive unnecessarily restricts the test. According to the UI Testing Guidelines (CodingGuidelineID: 1000002), tests should run on all applicable platforms by default unless there is a specific technical limitation. The HostApp code-behind specifies PlatformAffected.Android, which suggests this is primarily an Android issue, but the test infrastructure will handle platform filtering automatically. Unless FlyoutPage modal navigation has known issues on iOS/Windows/MacCatalyst that would cause the test to fail, this directive should be removed to allow the test to run on all platforms.

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[sheiksyedm]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[PureWeen]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[PureWeen]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[PureWeen]

• this was fixed by a different PR but this PR has tests that are missing for validating this behavior