#38639·maui

[Android][Shell] FlyoutHeader and FlyoutFooter can't extend backgrounds into system-bar areas

Author: maxchristophudriCreated Sep 17, 2026Updated Sep 17, 2026
Labelst/bug

Description

After upgrading from .NET9 to .NET10, I noticed that when using custom FlyoutHeader and/or FlyoutFooter on Android, the header and footer views are laid out inside the safe-area-inset flyout container. This prevents the background of the custom header and footer from extending behind the status bar, display cutout/notch, and navigation/gesture bar.

Desired behavior I would like to use custom backgrounds for the flyout header and footer that extend into the system-bar areas, while keeping the actual header/footer content (like labels or images) within the safe area. Ideally, this should be done using the SafeAreaEdges property, which would also eliminate the need to set a margin.

Current behavior The custom header and footer appear to be hosted inside a native flyout container that receives system-bar and display-cutout insets. As a result, the complete header/footer is laid out below the status bar or above the navigation/gesture area.

For example, the following header does not draw its background behind the status bar - the yellow background starts below the status bar instead of extending behind it:

<Shell.FlyoutHeader>
    <ContentView BackgroundColor="Yellow">
        <Grid BackgroundColor="Red" Margin="0,50,0,0">
            <Label Text="Header" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
        </Grid>
    </ContentView>
</Shell.FlyoutHeader>

Same applies to footer vice versa:

<Shell.FlyoutHeader>
    <ContentView BackgroundColor="Yellow">
        <Grid  BackgroundColor="Red" Margin="0,0,0,20">
            <Label Text="Footer" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
        </Grid>
    </ContentView>
</Shell.FlyoutHeader>

Neither setting the property SafeAreaEdges="None" on the ContentView or Grid, nor setting the Shell property: FlyoutHeaderBehavior="Fixed" does change the result.

Relevant implementation This appears to be related to the Android Shell Flyout inset handling introduced in PR #34510. The fix applies system-bar and display-cutout insets to the native flyout container, conceptually similar to: view.SetPadding(leftInset,topInset,rightInset,bottomInset);

Because the custom FlyoutHeader and FlyoutFooter are hosted inside this container, setting SafeAreaEdges="None" cannot make the components extend beyond the bounds of its parent.

Environment Before: TargetFramework: net9.0-android36.0 MauiVersion: 9.0.120 Android target SDK: 36

After TargetFramework: net10.0-android MauiVersion: 10.0.101 Android target SDK: 36

Before (.NET 9) Now (.NET 10)

Steps to Reproduce

  1. Create a new .NET MAUI project using the standard template (.NET 9; no sample content)
  2. In .csproj: Set <TargetFrameworks>net9.0-android36.0</TargetFrameworks>
  3. In Plattforms.Android.Resources.values -> colors.xaml: Change value of colorPrimary to: @android:color/transparent
  4. InAppShell.xaml: Insert the header/footer-code from above ⬆️ + add FlyoutBehavior="Flyout" to <Shell ...>
  5. See old behaviour
  6. Repeat steps 1-4 with .NET 10 standard template to compare with current behaviour.

Link to public reproduction project repository

No response

Version with bug

10.0.101

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

9.0.120 SR12

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

bash