How to change Navigation Bar color in iOS 7?

Question

How do I change the Navigation Bar color in iOS 7?

Basically I want to achieve something like the Twitter Nav Bar (updated Twitter for iOS7 that is). I embedded-in a nav bar atop a view controller. All I want is to change the nav bar color to light blue along with the utility bar at the top. I can't seem to find an option in my storyboard.

[stackoverflow.com/questions/18177010](http://stackoverflow.com/questions/18177010/how-to-change-navigation-bar-color-in-ios-7-or-6/18870519#18870519) — Carmen, Nov 19 '13 at 10:42
[[UINavigationBar appearance] setBarTintColor:[UIColor blackColor]]; this wll work from ios 7 onwards — Chandramani, May 26 '16 at 07:48
follow the this tutorial http://www.appcoda.com/customize-navigation-status-bar-ios-7/ — Chandramani, May 26 '16 at 07:48

score 320 · Answer 1 · edited Jun 20 '20 at 09:12

320

The behavior of tintColor for bars has changed in iOS 7.0. It no longer affects the bar's background.

From the documentation:

barTintColor Class Reference

The tint color to apply to the navigation bar background.

@property(nonatomic, retain) UIColor *barTintColor

Discussion
This color is made translucent by default unless you set the translucent property to NO.

Availability

Available in iOS 7.0 and later.

Declared In
UINavigationBar.h

Code

NSArray *ver = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
if ([[ver objectAtIndex:0] intValue] >= 7) {
    // iOS 7.0 or later   
    self.navigationController.navigationBar.barTintColor = [UIColor redColor];
    self.navigationController.navigationBar.translucent = NO;
}else {
    // iOS 6.1 or earlier
    self.navigationController.navigationBar.tintColor = [UIColor redColor];
}

We can also use this to check iOS Version as mention in iOS 7 UI Transition Guide

if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) {
        // iOS 6.1 or earlier
        self.navigationController.navigationBar.tintColor = [UIColor redColor];
    } else {
        // iOS 7.0 or later     
        self.navigationController.navigationBar.barTintColor = [UIColor redColor];
        self.navigationController.navigationBar.translucent = NO;
    }

EDIT Using xib

enter image description here

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 21 '13 at 07:13

Rajneesh071

30,846
15
61
74

3

but where can I place this code?? Im very new to this hahah. I placed it within the app delegate and it really doesnt seem to be doing much. It builds just fine though. – Patricio Guerra Sep 21 '13 at 07:52
1

inside viewController – Rajneesh071 Sep 21 '13 at 08:28
1

I would put it in viewDidLoad in your viewController. – HalR Oct 17 '13 at 05:23
2

if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) This would be better to test which iOS version you're running on, as stated by apple in the transition guide: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/TransitionGuide/SupportingEarlieriOS.html – David Thompson Nov 04 '13 at 17:35
1

You can also use if ([self.navigationController.navigationBar respondsToSelector:@selector(setBarTintColor:)]) vs the version number to check if you can set the barTintColor – SimpsOff Dec 24 '13 at 17:32
You should put in viewWillAppear , it wouldnt reflect otherwise. – Ankish Jain Mar 28 '14 at 09:28
1

This one helped and +1 for sure! – Jayprakash Dubey Jun 30 '14 at 08:32
Quite easier using the Storyboard! – Guillermo Barreiro Feb 10 '15 at 19:14
any ideas why apple needed an extra prop when there is backgroundColor already? – Anton Tropashko Mar 16 '16 at 06:42

score 130 · Answer 2 · edited Oct 18 '18 at 02:03

130

Doing what the original question asked—to get the old Twitter's Nav Bar look, blue background with white text—is very easy to do just using the Interface Builder in Xcode.

Using the Document Outline, select your Navigation Bar.
In the Attributes Inspector, in the Navigation Bar group, change the Style from Default to Black. This changes the background colour of the Navigation and Status bars to black, and their text to white. So the battery and other icons and text in the status bar will look white when the app is running.
In the same Navigation Bar group, change the Bar Tint to the colour of your liking.
If you have Bar Button items in your Navigation Bar, those will still show their text in the default blue colour, so in the Attributes Inspector, View group, change the Tint to White Colour.

That should get you what you want. Here is a screenshot that would make it easier to see where to make the changes.

Where to make the necessary changes, including the result in iOS Simulator

Note that changing only the Bar Tint doesn't change the text colour in the Navigation Bar or the Status Bar. The Style also needs to be changed.

edited Oct 18 '18 at 02:03

pkamb

33,281
23
160
191

answered Oct 17 '14 at 09:16

alondono

2,496
2
28
34

Selecting black for iOS 9 is deprecated, any chance of an updated answer – Rob85 Oct 20 '15 at 13:44
@Rob85 I am not in front of Xcode right now, but when Xcode 7 (with iOS 9) was released I verified that these instructions were still up-to-date. Make sure that the Navigation Bar is selected, the black style should be in the attributes inspector of the Navigation Bar. – alondono Oct 20 '15 at 23:08
2

@Rob85 I've checked Apple's Developer website, and styles `Default` and `Black` are still available in iOS 9. The deprecated ones are `BlackOpaque` and `BlackTranslucent`, which were replaced by a combination of `Black` style and the Translucent tick-box. [UIBarStyle on Apple's Developer website](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIKitDataTypesReference/index.html#//apple_ref/c/tdef/UIBarStyle) – alondono Oct 20 '15 at 23:22
Sorry @alondono you are absolutely correct, i was clicking on the navigation bar on the Navigation Controller not in document outline thats why i couldn't see it . The black that i am seeing deprecated was on the simulated metrics->status bar. Thanks for your replies – Rob85 Oct 21 '15 at 07:04
@Rob85 Cool! Thanks for letting me know. – alondono Oct 21 '15 at 23:10
This answer still works. I like configuring the visuals using visual editor, and leave the code to do actual logic. – John Doe Nov 05 '16 at 13:45

score 79 · Answer 3 · edited May 23 '21 at 17:59

79

self.navigationBar.barTintColor = [UIColor blueColor];
self.navigationBar.tintColor = [UIColor whiteColor];
self.navigationBar.translucent = NO;

// *barTintColor* sets the background color
// *tintColor* sets the button's color

edited May 23 '21 at 17:59

Alex Zavatone

4,106
36
54

answered Sep 21 '13 at 07:05

pNre

5,376
2
22
27

4

And where exactly can I put this code?? Sorry for the newbie question there hahah – Patricio Guerra Sep 21 '13 at 07:24
2

the code can be placed in the - (void)viewDidLoad method of the navigation controller – pNre Sep 21 '13 at 07:58
2

In iOS 9, setting the barTintColor to black will make the time, device name and battery black too so you can't see them. To avoid this, instead of using barTintColor, use self.navigationController.navigationBar.barStyle = UIBarStyleBlack; – TheJeff Aug 29 '16 at 23:58

score 46 · Answer 4 · edited Dec 13 '13 at 07:33

In a Navigation based app you can put the code in AppDelegate. A more detailed code could be:

// Navigation bar appearance (background and title)

[[UINavigationBar appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor titleColor], NSForegroundColorAttributeName, [UIFont fontWithName:@"FontNAme" size:titleSize], NSFontAttributeName, nil]];

[[UINavigationBar appearance] setTintColor:[UIColor barColor]];

// Navigation bar buttons appearance

[[UIBarButtonItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor textBarColor], NSForegroundColorAttributeName, shadowColor, NSShadowAttributeName, [UIFont fontWithName:@"FontName" size:titleSize], NSFontAttributeName, nil];

add `[[UINavigationBar appearance] setBarTintColor:[UIColor barColor]];` for iOS 7 — Samin, Feb 26 '14 at 13:41

score 25 · Answer 5 · edited Sep 22 '13 at 20:07

25

In viewDidLoad, set:

    self.navigationController.navigationBar.barTintColor = [UIColor blueColor];

Change ( blueColor ) to whatever color you'd like.

edited Sep 22 '13 at 20:07

Andrew

3,874
5
39
67

answered Sep 22 '13 at 19:44

zeezoo

251
2
3

William Hu · Answer 6 · 2019-06-20T18:08:21.733

18

For swift change navigation bar color:

self.navigationController?.navigationBar.barTintColor = UIColor.red

change title font,size, color:

self.title = "title"
self.navigationController?.navigationBar.titleTextAttributes = [
        NSAttributedString.Key.foregroundColor : UIColor.white,
        NSAttributedString.Key.font : UIFont(name: "Futura", size: 30)!
    ]

edited Jun 20 '19 at 18:08

answered Oct 14 '15 at 09:26

William Hu

15,423
11
100
121

score 14 · Answer 7 · edited Sep 21 '13 at 07:17

14

In iOS 7 you must use the -barTintColor property:

navController.navigationBar.barTintColor = [UIColor barColor];

edited Sep 21 '13 at 07:17

BoltClock

700,868
160
1,392
1,356

answered Sep 21 '13 at 07:06

RFG

2,880
3
28
44

score 13 · Answer 8 · answered Oct 14 '13 at 17:52

If you want to use a hex code, here is the best way to do so.

First, define this at the top of your class:

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

Then inside the "application didFinishLaunchingWithOptions", put this:

[[UINavigationBar appearance] setBarTintColor:UIColorFromRGB(0x00b0f0)];

Put you hex code in place of the 00b0f0.

[UINavigationBar appearance] was very helpful. – Ken Feb 17 '15 at 04:36 — Ken, Feb 17 '15 at 04:36

bbaassssiiee · Answer 9 · 2013-10-14T17:45:08.457

If you need to support ios6 and ios7 then you get that particular light blue using this in your UIViewController:

- (void)viewDidLoad {
    [super viewDidLoad];
    NSArray *ver = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
    if ([[ver objectAtIndex:0] intValue] >= 7) {
        self.navigationController.navigationBar.barTintColor = [UIColor colorWithRed:89/255.0f green:174/255.0f blue:235/255.0f alpha:1.0f];
        self.navigationController.navigationBar.translucent = NO;
    }else{
        self.navigationController.navigationBar.tintColor = [UIColor colorWithRed:89/255.0f green:174/255.0f blue:235/255.0f alpha:1.0f];
    }
}

On iOS 7: -self.navigationController.navigationBar.barTintColor is the bar color AND -self.navigationController.navigationBar.tintColor is the buttons text color (back, done...). — IgniteCoders, Nov 07 '13 at 12:09

score 10 · Answer 10 · answered Jul 04 '14 at 17:58

10

It's actually easier than the answers I've seen here:

1) Just make sure you select the navigation bar on the Navigation control. 
2) Select the color you want in the bar tint.
3) You have other options too, and/or individually on each view (just play with it).

I hope this helps somebody. I didn't like the answers I saw. I like to keep my code as clean as possible. Not saying that it's wrong to do it programmatically, but there are people out there like me....this is for you guys. Changing color of the navigation bar

answered Jul 04 '14 at 17:58

pqsk

2,124
3
23
28

Thanks, I had changed this months ago while playing around and couldn't figure out how to change it back! – Symmetric Jul 20 '14 at 21:25
No problem, glad I could help someone – pqsk Jul 20 '14 at 22:05
I think this is the most straight forward answer! Thx – Ispas Claudiu Jan 29 '15 at 10:58
No problem. Glad it's still helpful – pqsk Jan 29 '15 at 14:01

score 5 · Answer 11 · answered Sep 23 '13 at 07:05

//You could place this code into viewDidLoad
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.navigationController.navigationBar.tintColor = [UIColor redColor];
    //change the nav bar colour
    self.navigationController.view.backgroundColor = [UIColor redColor];
    //change the background colour
    self.navigationController.navigationBar.translucent = NO;
 }   
//Or you can place it into viewDidAppear
- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:(BOOL)animated];
    self.navigationController.navigationBar.tintColor = [UIColor redColor];
    //change the nav bar colour
    self.navigationController.view.backgroundColor = [UIColor redColor];
    //change the background colour
    self.navigationController.navigationBar.translucent = NO;
}

score 5 · Answer 12 · answered Sep 29 '13 at 01:48

To make Rajneesh071's code complete, you may also want to set the navigation bar's title color (and font, if you want) since the default behavior changed from iOS 6 to 7:

NSArray *ver = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
if ([[ver objectAtIndex:0] intValue] >= 7)
{
    self.navigationController.navigationBar.barTintColor = [UIColor blackColor];
    self.navigationController.navigationBar.translucent = NO;
    NSMutableDictionary *textAttributes = [[NSMutableDictionary alloc] initWithDictionary:mainNavController.navigationBar.titleTextAttributes];
    [textAttributes setValue:[UIColor whiteColor] forKey:UITextAttributeTextColor];
    self.navigationController.navigationBar.titleTextAttributes = textAttributes;
}
else
{
    self.navigationController.navigationBar.tintColor = [UIColor blackColor];
}

score 5 · Answer 13 · edited Sep 05 '15 at 01:18

5

Add only This code in your ViewContorller or in your AppDelegate

if([[[UIDevice currentDevice] systemVersion] floatValue] < 7.0)
{
    //This is For iOS6
    [self.navigationController.navigationBar setTintColor:[UIColor yellowColor]];
}
else
{
    //This is For iOS7
    [self.navigationController.navigationBar setBarTintColor:[UIColor yellowColor]];
}

edited Sep 05 '15 at 01:18

Abduliam Rehmanius

928
12
23

answered Jul 22 '14 at 11:18

Darshan Kunjadiya

3,323
1
29
31

MD SHAHIDUL ISLAM · Answer 14 · 2013-10-02T07:05:58.403

4

In a navigation based application you can change color

NSArray *ver = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
if ([[ver objectAtIndex:0] intValue] >= 7) {
    self.navigationController.navigationBar.barTintColor = [UIColor colorWithRed:19.0/255.0 green:86.0/255.0 blue:138.0/255.0 alpha:1];
    self.navigationController.navigationBar.translucent = NO;
} else {
    self.navigationController.navigationBar.tintColor = [UIColor colorWithRed:19.0/255.0 green:86.0/255.0 blue:138.0/255.0 alpha:1];
}

edited Oct 02 '13 at 07:05

answered Sep 30 '13 at 11:52

MD SHAHIDUL ISLAM

14,325
6
82
89

1

Changing the tintColor property in iOS7 has no longer the effect of changing the bars background color. Tint color in iOS7 only affects the text color of the BarButtonItems etc. – Pascal Bayer Oct 02 '13 at 06:50

score 4 · Answer 15 · answered May 22 '14 at 07:53

#define _kisiOS7 ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)


  if (_kisiOS7)
    {
        [[UINavigationBar appearance] setBarTintColor:[UIcolor redcolor]];
    }
    else
    {
        [[UINavigationBar appearance] setBackgroundColor:[UIcolor blackcolor]];
        [[UINavigationBar appearance] setTintColor:[UIcolor graycolor]];
    }

score 3 · Answer 16 · edited Apr 06 '14 at 19:37

3

This question and these answers are helpful. With them I was able to set my desired dark blue navigationBar color with white title and button text.

But I also needed to change the clock, carrier, signal strength, etc. to white. Black just didn't contrast enough with the dark blue.

I may have overlooked that solution in one of the previous answers, but I was able to make that change by adding this line to my top level viewController's viewDidLoad:

[self.navigationController.navigationBar setBarStyle:UIStatusBarStyleLightContent];

edited Apr 06 '14 at 19:37

Irfan

4,301
6
29
46

answered Oct 23 '13 at 19:28

John

91
1
9

`UIStatusBarStyleLightContent` works, but it seems the correct enum for `setBarStyle:` is `UIBarStyleBlack` – Collin Allen Nov 02 '14 at 05:48

score 3 · Answer 17 · answered May 19 '14 at 13:00

3

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.navigationController.navigationBar.barTintColor = [UIColor blueColor];
}

answered May 19 '14 at 13:00

Gaurav Gilani

1,584
14
18

score 3 · Answer 18 · answered Jun 06 '15 at 14:29

For Color :

[[UINavigationBar appearance] setBarTintColor:[UIColor blackColor]];

For Image

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navigationBar_320X44.png"] forBarMetrics:UIBarMetricsDefault];

How to change Navigation Bar color in iOS 7?

18 Answers18

Code

Linked

Related