.Net MAUI Android App: Change Navigation and Status Bar colors at Splash screen moment

Question

I'm trying to change Navigation Bar and Status Bar background color in my .Net MAUI Android App.

I found how to do that when the app has initialized an loaded (Status Bar: Using MauiCommunityToolkit StatusBarBehavior StatusBarColor feature. Navigation Bar: Using Window.SetNavigationBarColor).

But I have not found how to do that when the app starts and shows the Splash Screen. I need black background color for both, Status and Navigation bar but when the App starts, NavBar is white and Status Bar is Purple (default .Net MAUI color). I attached an image of how it looks when starts.

I tried changing the Primary Color in the Resources/colors.xml, and it didn't work.

My App is a MAUI Single project template (Android and iOS).

Thanks in advance for taking a look at this issue.

UPDATE: I was able to change just Status Bar, changing defautl colorPrimaryDark value in Platforms/Android/Resources/colors.xml

But still looking at how to change Navigation Bar color.

Jianwei Sun - MSFT · Accepted Answer · 2023-02-20 05:48:58Z

15

You can create a new .xml file and then put the style in or add the style to colors.xml directly:

<resources>
    <color name="colorPrimary">#512BD4</color>
    <color name="colorPrimaryDark">#2B0B98</color>
    <color name="colorAccent">#2B0B98</color>
    
    <style name="SplashTheme" parent="@style/Maui.SplashTheme">
        <item name="android:statusBarColor">@android:color/black</item>
        <item name="android:navigationBarColor">@android:color/black</item>
    </style>
</resources>

In the MainActivity.cs file (Platforms/Android):

[Activity(
    //Theme = "@style/Maui.SplashTheme",
    Theme = "@style/SplashTheme",
    MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize)]
public class MainActivity : MauiAppCompatActivity

It works well and can achieve your need.

answered Feb 20, 2023 at 5:48

Jianwei Sun - MSFT

4,5641 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jianwei Sun - MSFT Over a year ago

@maguilleng You can also see the source code about styles.xaml

Frawsty Over a year ago

I copy and pasted both your colors.xml and the MainActivity.cs and I am getting an error that the resource style/SplashTheme is not found. Did anyone else have this issue?

Artur Sizov · Accepted Answer · 2024-07-21 08:22:47Z

2

Maybe it will be useful to someone

MainPage.xaml:

xmlns:droid="clr-namespace:CommunityToolkit.Maui.PlatformConfiguration.AndroidSpecific;assembly=CommunityToolkit.Maui"
droid:NavigationBar.Color="{Binding BarColor}">

MainPageViewModel.cs:

 private Color? _statusBarColor = Colors.Black;

 public Color? StatusBarColor { get => _statusBarColor; set => SetProperty(ref _statusBarColor, value); }

This approach allows you to dynamically change the color of the navigation bar.

answered Jul 21, 2024 at 8:22

Artur Sizov

211 bronze badge

Comments

Teoman shipahi · Accepted Answer · 2025-01-12 07:10:23Z

1

From the reference: https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/behaviors/statusbar-behavior?tabs=android

1- Get CommunityToolkit (YourApp.csproj)

 <ItemGroup>
     <PackageReference Include="CommunityToolkit.Maui" Version="7.0.0" />
     <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
     <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
     <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.1" />
 </ItemGroup>

2- Update App.xaml

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourMauiApp"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="YourMauiApp.App">

3- Update MauiProgram.cs registration

 MauiAppBuilder builder = MauiApp.CreateBuilder();
 builder
     .UseMauiApp<App>()
     .UseMauiCommunityToolkit()

4- I am using AppShell.xaml but wherever you want ot change color:

add namespace

 xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Then:

 <Shell.Behaviors>
     <toolkit:StatusBarBehavior StatusBarColor="White" StatusBarStyle="DarkContent" />
 </Shell.Behaviors>

And result:

answered Jan 12 at 7:10

Teoman shipahi

23.4k16 gold badges147 silver badges175 bronze badges

1 Comment

Derek Feb 8 at 4:44

Any idea why StatusBarColor="{DynamicResource PrimaryBlue}" wouldn't work, but StatusBarColor="{StaticResource PrimaryBlue}" does work? It looks to be a BindableProperty.

Winteriscoming · Accepted Answer · 2025-11-05 19:44:44Z

0

xmlns:droid="clr-namespace:CommunityToolkit.Maui.PlatformConfiguration.AndroidSpecific;assembly=CommunityToolkit.Maui"
droid:NavigationBar.Color="#000000"

answered Nov 5 at 19:44

Winteriscoming

19011 bronze badges

Collectives™ on Stack Overflow

.Net MAUI Android App: Change Navigation and Status Bar colors at Splash screen moment

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related