MAUI - Android Navigationbar BarBackgroundColor is not updating as per the Theme color specified.

[febinDonz]

Description

Android Navigationbar BarBackgroundColor is not reflecting when the theme is changed.
Rest of the UI is updating to the theme color that is specified though AppThemeBinding.
When Naviagte to another page , suddenly navigation bar shows the theme color

Steps to Reproduce

1. Create a new MAUI project
2. Add following code to the App.xaml for the NavigationPage style.

   <Style TargetType="NavigationPage">
        <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource Red}, Dark={StaticResource Green}}" />
        <Setter Property="BarTextColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
        <Setter Property="IconColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
    </Style>

3. Set MainPage = new NavigationPage( new MainPage() );
4. Run the App and try to change the theme by pressing the Dark / Light button . You can see that Navigatiobar background color not changing its color and rest of the UI components are updating as per the theme color specified.
5. Navigate to second page, Suddenly Navigationbar changes the color

Link to public reproduction project repository

https://github.com/febinDonz/Maui-Theme-Bug

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 11 and up

Did you find any workaround?

no

Relevant log output

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 1.0. Repro on Android 13.0-API33 with below Project:
theme.zip

Dark mode:

Light mode:

[HaroldMac]

Work around.

If you set the app theme color for the navigation page bar background before setting the app theme the color will update. It doesn't appear to matter what color you set the light or dark value to as long as it set to something before changing your app theme.

this.SetAppThemeColor(NavigationPage.BarBackgroundProperty, Color.FromArgb("#000000"), Color.FromArgb("#000000"));
if (IsDarkTheme)
Application.Current.UserAppTheme = AppTheme.Dark;
else
Application.Current.UserAppTheme = AppTheme.Light;

[mfeingol]

@HaroldMac: can you elaborate a little? I'm not seeing this workaround work at all, unfortunately.

[mfeingol]

@mattleibow - since you're in the NavigationPage space... any chance you could take a look at this one? I'm seeing the same issue as the OP on 8.0.4-nightly.9717.

Thanks.

[reinierkops]

@jfversluis is there anything you can do for us? This issue is since .net6 there, and still there is an issue. In the 'Shell World', this is not an issue (but there are other issues too).

[stefandb1995]

@reinierkops Not sure if you still want it but I figured out a workaround for this that's working for my case! You can append to the NavigationPage mapper and then force the Toolbar colour to update. Our case is a bit weird, so not sure if it will work a 100%, but something to at least get you going.

NavigationViewHandler.Mapper.AppendToMapping(NavigationPage.BarBackgroundColorProperty.PropertyName, SetToolbarColour);

private static void SetToolbarColour(INavigationViewHandler handler, IStackNavigationView view) { if (view is NavigationPage navigationPage && navigationPage.Window is IToolbarElement toolBarOwner) { if (toolBarOwner.Toolbar.Handler is ElementHandler<IToolbar, Google.Android.Material.AppBar.MaterialToolbar> androidToolbarHandler) { if (androidToolbarHandler.PlatformView is Google.Android.Material.AppBar.MaterialToolbar materialToolbar) { //SetColour, using red as an example. materialToolbar.BackgroundTintList = ColorStateList.ValueOf(Colors.Red.ToAndroid()); } } } }

This should get hit when you update the theme. Hope it works!

[AlleSchonWeg]

Tested it with 8.0.20-nightly.10426. The:

• BarBackground
• BarBackgroundColor
• BarTextColor

only updates when i close the page and open it again. I changed the theme via system settings.

[Jerome-Liger]

Tested with official 8.0.20 release, I got the same comportment as @AlleSchonWeg
(FYI I'm with Prism/ShinyFramework, so Shell can't be used... only classic "NavigationPage" is supported)

When I changes the light/dark mode (from "System" or even "manually set"), every controls in my app are correctly and automatically themed (with AppThemeBinding helps) EXCEPT the NavigationBar colors (BarBackgroundColor/BarTextColor) AND the StatusBarColor of the current page.
Here's my customNavigationPage (a "PrismNavigationPage" that implement/use the classic MAUI NavigationPage) :

<?xml version="1.0" encoding="utf-8" ?>
<prism:PrismNavigationPage
    x:Class="PocWikaWirelessDevice.Presentation.Views.NavigationPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:prism="http://prismlibrary.com"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    BarBackgroundColor="{AppThemeBinding Light={StaticResource Blue},
                                         Dark={StaticResource LightBlue}}"
    BarTextColor="{AppThemeBinding Light={StaticResource White},
                                   Dark={StaticResource Gray}}">
    <prism:PrismNavigationPage.Behaviors>
        <toolkit:StatusBarBehavior StatusBarColor="{AppThemeBinding Light={StaticResource Blue}, Dark={StaticResource LightBlue}}" StatusBarStyle="{AppThemeBinding Light='LightContent', Dark='DarkContent'}" />
    </prism:PrismNavigationPage.Behaviors>
</prism:PrismNavigationPage>

But if I navigate just once after changing the theme (back or add to stack or whatever...), the StatusBar&Navbar colors are correctly themed !
I tried to observe NavigationPage PropertyChanges, and when I change the Theme, MAUI correctly hits the propertyChanges in debug... so I really think it's "just" a refreshing/redrawing problem (I've tried to forceLayout without success) :

private void NavigationPage_PropertyChanged(object? sender, PropertyChangedEventArgs e)
{
    if (e?.PropertyName == nameof(BarBackgroundColor))
    {
        this.CurrentPage?.ForceLayout();
        this.ForceLayout();
    }
    if (e?.PropertyName == nameof(BarTextColor))
    {
        this.CurrentPage?.ForceLayout();
        this.ForceLayout();
    }
    Console.WriteLine($"NavigationPage PropertyChanged : {e?.PropertyName}");
}

So my current (awful) workaround is to automatically close and navigate again to the current page... it works (but it's bad)

Please, investigate and correct this "basic" for Theming

[ojoyal]

Similar to @Stephandb but without the handler.
I added this in MainActivity and I call it using messaging. It did the trick:

private void ChangeStatusAndToolbarColors(Color color)
    {
        var platformColor = color.ToPlatform();

        // StatusBar
        Window.SetStatusBarColor(platformColor);

        // Toolbar
        if (Microsoft.Maui.Controls.Application.Current?.MainPage is IToolbarElement { Toolbar.Handler.PlatformView: MaterialToolbar toolbar })
        {
            toolbar.BackgroundTintList = ColorStateList.ValueOf(platformColor);
        }
    }

[Jerome-Liger]

Yep, nice workaround @ojoyal (far better than mine... lighter and shorter with android platform specific call and messaging 👍)
But it's remain an "overloaded custom workaround"...
I still hope this will be corrected/included in the next MAUI releases, what would be the best/cleanest and most transparent solution.

[BurkusCat]

I'm seeing this issue in both Android and WinUI. I think this works fine in iOS though.

This is a WinUI screenshot where the page started themed red but I tried to have it dynamically to blue.

[breyed]

Building off stefandb1995’s workaound, this workaround also updates the text and icon colors. It’s not a complete workaround, since the menu button color still remains stuck on the initial theme color (so a fix for this issue is still a priority).

This udpated workaround appends the mapping in the same way as the initial one:

NavigationViewHandler.Mapper.AppendToMapping(NavigationPage.BarBackgroundColorProperty.PropertyName, SetToolbarColor);

The method to set the colors then goes through the menu and sets the text and icon colors:

static void SetToolbarColor(INavigationViewHandler handler, IStackNavigationView view) {
	if (!(view is NavigationPage navigationPage && navigationPage.Window is IToolbarElement toolBarOwner &&
		toolBarOwner.Toolbar?.Handler is ElementHandler<IToolbar, Google.Android.Material.AppBar.MaterialToolbar> androidToolbarHandler &&
		androidToolbarHandler.PlatformView is Google.Android.Material.AppBar.MaterialToolbar materialToolbar))
		return;

	materialToolbar.BackgroundTintList = ColorStateList.ValueOf(Styles.AndroidNavigationBarBackgroundColor.ToRequestedThemeColor().ToPlatform());
	var textColor = Styles.TextColor.ToRequestedThemeColor().ToPlatform();
	materialToolbar.SetTitleTextColor(textColor);
	var menu = materialToolbar.Menu;
	if (menu == null) return;
	for (int i = 0; i < menu.Size(); ++i) {
		var item = menu.GetItem(i)!;
		var oldIcon = item.Icon;
		if (oldIcon != null) {
			var newIcon = DrawableCompat.Wrap(oldIcon);
			newIcon.SetTint(textColor);
			item.SetIcon(newIcon);
		}
		var oldTitle = item.TitleFormatted;
		if (oldTitle != null && oldTitle.Length() > 0) {
			var newTitle = new SpannableString(oldTitle);
			newTitle.SetSpan(new ForegroundColorSpan(textColor), 0, newTitle.Length(), 0);
			item.SetTitle(newTitle);
		}
	}
}

[samhouts]

We agree that this is an important issue. As our roadmap indicates, for the near future, we are focused on:

• Issues impacting Xamarin.Forms upgrades to .NET MAUI
• CollectionView
• Layout

I am marking this as a p/2 issue because it does not meet our focus areas right now, but we are constantly revisiting the backlog for important issues to address as time allows. Thank you for your patience and understanding!