Skip to content

Android Edge-to-Edge: Shell and NavigationPage Top Bar colour is not used for status bar. #35568

Description

@asi-evin

Description

When Enabling Edge-to-Edge, The Navigation Bar Colour does not bleed into the Navigation bar like I'd expect. Instead, the Status bar color is set using "colorPrimary" in the Android colour values instead. This appears for both NavigationPage and Shell

Steps to Reproduce

  1. Create a fresh Maui sample
  2. Enabled Edge-to-Edge in the Main Activity's OnCreate override function:
using Android.App;
using Android.Content.PM;
using Android.OS;
using AndroidX.Activity;

namespace MauiSimpleNavBarTest
{
    [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, LaunchMode = LaunchMode.SingleTop, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
    public class MainActivity : MauiAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            //Enable edge to edge
            var systemBarStyle = SystemBarStyle.Light(Android.Graphics.Color.Transparent.ToArgb(), Android.Graphics.Color.Black.ToArgb());
            EdgeToEdge.Enable(this, systemBarStyle, systemBarStyle);
        }
    }
}
  1. Ensure the Shell Background colour is set to something that is NOT the same as colorPrimary (which I beleive it is in the default sample). For NavigationPage, ensure the "BarBackgroundColor" property is set to another color.

Results

First image is the expected result, second is the actual result. Third image is without the Navigation bar to show edge-to-edge is properly enabled.

Image Image Image

Version with bug

10.0.70

Is this a regression from previous behavior?

Not sure, did not test other versions. (Edit: previous versions tested by @NafeelaNazhir below, it is not a regression).

Affected platforms

Android

Did you find any workaround?

A simple work-a-round is making sure your "colorPrimary" is the same as you Shell background color, but that has other app implications, and you can't change your navigation bar color anymore.

Using the Community Toolkit to set the Statusbar Colour also had weird results: For both NavigationPage and shell, the status bar would become the correct colour, but the bottom navBar (back button, home, etc). would become white and the app would cease to be edge-to-edge, even on different pages.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-controls-shellShell Navigation, Routes, Tabs, Flyoutplatform/androids/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triaget/bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions