Maui for android NavigationBar backgroundColor

Question

Hello all. Please how do I change NavigationBar backgroundColor to color "#ECE5DD" Thank you very much.

Answer 1

Hello,

After investigation, you could change the system navigation bar color by adding the following code to the Android MainActivity class in the MAUI program.

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    Window.SetNavigationBarColor(Android.Graphics.Color.ParseColor("#ECE5DD"));
}

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hello,

I'm not sure if AppShell is the MainPage in App class.

If so, you could change the Shell.BackgroundColor and modify the style for Shell in Resources/Styles/Styles.xaml.

Detail Steps:

Define color in Resources/Styles/Colors.xaml

<Color x:Key="NavigationBarColor">#ECE5DD</Color>

Modify Shell.BackgroundColor

<Style TargetType="Shell" ApplyToDerivedTypes="True">
        <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource NavigationBarColor}, Dark={StaticResource NavigationBarColor}}" />
       ...
    </Style>

Or you could set the color in a ContentPage

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           Shell.BackgroundColor="XXX">

If the MainPage is NavigationPage like the following code:

public App()
    {
        InitializeComponent();

   //    MainPage = new AppShell();
    MainPage = new NavigationPage(new NewPage1());
    }

You could modify the BarBackgroundColor of NavigationPage

<Style TargetType="NavigationPage">
        <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource NavigationBarColor}, Dark={StaticResource NavigationBarColor}}" />
    </Style>

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.