CODEWITHSUNDEEP
c#.netxamlmaui
Cody
Cody

Reputation: 319

.NET MAUI: How to change the navigation bar colour of an app that just uses ContentPages?

In .NET MAUI, a ContentPage doesn't have the BarBackgroundColor property, unlike the NavigationPage and TabbedPage. Is there another way to change the nav bar colour, such as a property in the Styles.xaml that I'm not aware of?

And by nav bar, I mean the bar on the bottom with the back button and such, not the top bar with the title. navigation bar

Upvotes: 7

Views: 18331

Answers (4)

Kasun Wadasinghe
Kasun Wadasinghe

Reputation: 141

You can change your navigation bar colours with MauiProgram.cs by writing the following code

    builder.ConfigureLifecycleEvents(events => {
#if ANDROID
                events.AddAndroid(android=> android.OnCreate((activity,bundle) => MakeNavigationBarTranslucent(activity)));
                static void MakeNavigationBarTranslucent(Android.App.Activity activity){
                activity.Window.SetNavigationBarColor(Android.Graphics.Color.ParseColor("#3F51B5"));
    }
#endif

            });

Or

Under Platforms > Android MainActivity.cs

public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Bundle? savedInstanceState)
    {
        Window.SetNavigationBarColor(Android.Graphics.Color.Red);
        base.OnCreate(savedInstanceState);
    }
}

Change activity bar and Navigation bar at splash screen you can add following part for Platform > Android > Resources > values colors.xml inside <resources></resources> tags

 <!--set your selected item background color-->
 <color name="ListViewSelected">#dce0f3</color>

<style name="SplashTheme" parent="Maui.SplashTheme">
  <item name="android:statusBarColor">@color/colorPrimary</item>
  <item name="android:navigationBarColor">@color/colorPrimary</item>
</style>

and change Activity theme as Theme = "@style/SplashTheme"

final code looks like this

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

Ref : https://learn.microsoft.com/en-us/answers/questions/1341985/net-maui-how-to-change-status-bar-and-navigation-b

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

Upvotes: 0

KarsaOrlong1981
KarsaOrlong1981

Reputation: 231

I know is a little bit late but mabe it can help some others too. You can go to Resources/Styles/Styles.xaml and there you will find that:

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

And in your App.xaml.cs:

    MainPage = new NavigationPage(new MainPage());

Upvotes: 7

tataelm
tataelm

Reputation: 939

I am assuming you are using AppShell. You can access those properties like this:

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

EDIT

Now I understand your question better, here is your answer:

On your solution explorer, go to:

Platforms > Android > Main Activity.cs

You need to call OnCreate method here.

You can start typing "override OnCreate" and select the OnCreate method from that menu. After that you can set those colors.

protected override void OnCreate(Bundle savedInstanceState)
{
    Window.SetStatusBarColor(Android.Graphics.Color.Orange);
    Window.SetNavigationBarColor(Android.Graphics.Color.Green);

    base.OnCreate(savedInstanceState);
}

Upvotes: 11

Julian
Julian

Reputation: 8864

Somewhere in your App.xaml.cs or MauiProgram.cs you could write something like this to change the bottom navigation bar color on Android:

#if ANDROID 
   Microsoft.Maui.ApplicationModel.Platform.CurrentActivity.Window.SetNavigationBarColor(Colors.Blue.ToAndroid());
#endif

Upvotes: 0

Related Questions