Setting the NavigationBar colors in Xamarin.Forms

Have’t you ever got bored of the default colors of the Navigation bar of your applications ? 😛 Well I know I did, so as my boss in the new company I’m working for. lol

Enough chit chat! Lemme show you how to change the background color of the default Navigation bar in our awesome Xamarin Forms framework.

Yes it’s crazy simple nowadays, as Xamarin has allowed us to control that from the PCL level itself. But earlier I recall it was pretty complex where we had to write custom renderers and stuff.

How to… from C# code level ?

Xamarin has introduced the following properties for this job, BarBackgroundColor, and BarTextColor. You could easily set these properties for your NavigationPage instance and woahlah ! You are done.

public App()
	MainPage = new NavigationPage(new Page1())
		BarBackgroundColor = Color.FromHex("#ff5300"),
		BarTextColor = Color.White,


Alright now, hit Run and check it out fellas !


Nexus 4 (Lollipop) Screenshot 1  Simulator Screen Shot 4 Feb 2016, 12.28.46 PM

Oh look at that gorgeous NavigationBar… Such an eye-candy view.. lol

Alright looks good… moving on… 😛

How to… from XAML code level ?

What if you wanted to set these properties in XAML level ? 😀

Well to tell you a little story, the project I’m working now is pretty complex and the architecture is super awesome, that we have to dive massively into MVVM and Architectural design stuff… So we usually keep all the UI related stuff in XAML level. 😉 So yeah this is how I originally implemented it, but I did the C# code stuff just to show the separation. End of Storytime ! lol 😛

So here’s how to handle this in XAML…

      <!-- Styles -->
      <Style TargetType="NavigationPage">
        <Setter Property="BarBackgroundColor" Value="#ff5300"/>
        <Setter Property="BarTextColor" Value="White"/>
      <!-- Styles -->



You simply put those values in your global Style level, so when the app is running it will fetch them from those values and set it to the navigation bar.


That’s it… Cheers!

Stay Awesome developers !

11 thoughts on “Setting the NavigationBar colors in Xamarin.Forms

  1. Thanks for the most awesome response. Can you please guide me how to change the tabbed page’s (tab-background color) and their color be different

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.