Change the Nav Bar Color

PDF for offline use
Related SDKs:

Let us know how you feel about this

Translation Quality


0/250

There are two properties in the UINavigationBar class which will allow you to change colors. TintColor will change the color of the back indicator image, button titles and button Images. barTintColor will change the color of the bar itself. This recipe shows how to change the the tint and background colors of a navigation bar.

Recipe

To change the color of the navigation bar items, set the TintColor property of the UIViewController’s NavigationBar property:

this.NavigationController.NavigationBar.TintColor = UIColor.Magenta;

To change the color of the navigation bar, set the barTintColor property of the UIViewController’s NavigationBar property:

this.NavigationController.NavigationBar.BarTintColor = UIColor.Yellow;

The Image below shows the updated Navigation Bar:

To reset the color to its default, set this value to null:

this.NavigationController.NavigationBar.TintColor = null;
this.NavigationController.NavigationBar.BarTintColor = null;

Additional Information

You can style all the navigation bars in your application at once by styling the static UINavigationBar class with these lines:

UINavigationBar.Appearance.barTintColor = UIColor.Blue;
UINavigationBar.Appearance.TintColor = UIColor.White;

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.