[Android][Shell] FlyoutHeader and FlyoutFooter can't extend backgrounds into system-bar areas
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
- Create a new .NET MAUI project using the standard template (.NET 9; no sample content)
- In .csproj: Set
<TargetFrameworks>net9.0-android36.0</TargetFrameworks> - In Plattforms.Android.Resources.values -> colors.xaml: Change value of colorPrimary to:
@android:color/transparent - InAppShell.xaml: Insert the header/footer-code from above ⬆️ + add
FlyoutBehavior="Flyout"to<Shell ...> - See old behaviour
- 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
Source: dotnet/maui