[Android] How to paint the system top status bar the same background as the default content background

[paulober]

I want the modern android app look where the content background ist the same as the status bar background and it adapts depending on dark and light mode. To achieve this I tried using the CommunityToolkit StatusbarBehaviour from C# code to dynamically adjust but at the moment it works for a brief moment at the start of the app and then it switches to the primary color of the colors.xaml.
Does anyone know a reliable solution to implement this basic feature in a .NET MAUI app?

Here is my workaround I tried to use in AppShell.xaml.cs:

#if ANDROID
    private StatusBarBehavior _androidStatusBarBehavior = null!;
#endif

    public AppShell()
    {
        InitializeComponent();

#if ANDROID
        SetupAndroidStatusBar();
#endif
    }

#if ANDROID
private void SetupAndroidStatusBar()
    {
        _androidStatusBarBehavior = new StatusBarBehavior
        {
            ApplyOn = StatusBarApplyOn.OnBehaviorAttachedTo
        };

        Behaviors.Add(_androidStatusBarBehavior);

        // initial config
        ApplyThemeToSystemBars();

        if (Application.Current != null)
        {
            // subscribe to event for theme changes to update the behavior
            Application.Current.RequestedThemeChanged += (s, e) => ApplyThemeToSystemBars();
        }
    }

    private void ApplyThemeToSystemBars()
    {
        var isDark = Application.Current?.RequestedTheme == AppTheme.Dark;

        var window = Platform.CurrentActivity?.Window;
        if (window == null) return;
        var controller = new WindowInsetsControllerCompat(window, window.DecorView);

        if (isDark)
        {
            _androidStatusBarBehavior.StatusBarStyle = StatusBarStyle.LightContent;
            controller.AppearanceLightNavigationBars = false;

            if (Application.Current?.Resources.TryGetValue("DarkBackground", out var value) ?? false)
            {
                var darkColor = (Color)value;
                _androidStatusBarBehavior.StatusBarColor = darkColor;
#pragma warning disable CA1422
                window.SetNavigationBarColor(darkColor.ToPlatform());
#pragma warning restore CA1422
            }
        }
        else
        {
            _androidStatusBarBehavior.StatusBarStyle = StatusBarStyle.DarkContent;
            controller.AppearanceLightNavigationBars = true;

            if (Application.Current?.Resources.TryGetValue("LightBackground", out var value) ?? false)
            {
                var lightColor = (Color)value;
                _androidStatusBarBehavior.StatusBarColor = lightColor;
#pragma warning disable CA1422
                window.SetNavigationBarColor(lightColor.ToPlatform());
#pragma warning restore CA1422
            }
        }
    }
#endif

[stephenquan]

Since CommunityToolkit's StatusBarBehavior was mentioned, I recommend this discussion be moved to that repo https://github.com/CommunityToolkit/Maui/discussions

[paulober]

Since CommunityToolkit's StatusBarBehavior was mentioned, I recommend this discussion be moved to that repo https://github.com/CommunityToolkit/Maui/discussions

I would agree that they need that discussion too but my problem is that this even the Android platform specific code without community toolkit doesn't work in Maui because MAUI somehow overwrites this with the primary colors.xaml by default and can't work around it. How do other apps do it? Just accept it?

[asi-evin]

As an extreme work-a-round, you could make the bar transparent, and then add a colored boxview behind the status bar.

[stephenquan]

I'm not entirely sure I understand the issue. Screenshots might help clarify things. Based on my limited understanding of the problem, CommunityToolkit's StatusBarBehavior should cover this scenario, though there might be an unknown or recent regression as a consequence of the .NET MAUI 10 upgrade.

[stephenquan]

CommunityToolkit.Maui 14.0.0 got released with:

• StatusBarBehavior
  • Fixes StatusBarBehavior on Android 35+