How to change Navigation Bar color in iOS 7?
Solution 1
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
Solution 2
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.
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.
Solution 3
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
Solution 4
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];
Solution 5
In viewDidLoad
, set:
self.navigationController.navigationBar.barTintColor = [UIColor blueColor];
Change ( blueColor
) to whatever color you'd like.
Related videos on Youtube
Patricio Guerra
15 years old. Wanna do something significant; and I have a hunch I'm getting close.
Updated on May 24, 2021Comments
-
Patricio Guerra almost 3 years
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 aview 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 mystoryboard
.-
Carmen over 10 years
-
Chandramani almost 8 years[[UINavigationBar appearance] setBarTintColor:[UIColor blackColor]]; this wll work from ios 7 onwards
-
Chandramani almost 8 yearsfollow the this tutorial appcoda.com/customize-navigation-status-bar-ios-7
-
-
Patricio Guerra over 10 yearsAnd where exactly can I put this code?? Sorry for the newbie question there hahah
-
Patricio Guerra over 10 yearsbut 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.
-
pNre over 10 yearsthe code can be placed in the - (void)viewDidLoad method of the navigation controller
-
Rajneesh071 over 10 yearsinside viewController
-
Pascal Bayer over 10 yearsChanging 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.
-
HalR over 10 yearsI would put it in viewDidLoad in your viewController.
-
David Thompson over 10 yearsif (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: developer.apple.com/library/ios/documentation/userexperience/…
-
IgniteCoders over 10 yearsOn iOS 7: -self.navigationController.navigationBar.barTintColor is the bar color AND -self.navigationController.navigationBar.tintColor is the buttons text color (back, done...).
-
SimpsOff over 10 yearsYou can also use if ([self.navigationController.navigationBar respondsToSelector:@selector(setBarTintColor:)]) vs the version number to check if you can set the barTintColor
-
Samin about 10 yearsadd
[[UINavigationBar appearance] setBarTintColor:[UIColor barColor]];
for iOS 7 -
Ankish Jain about 10 yearsYou should put in viewWillAppear , it wouldnt reflect otherwise.
-
Jayprakash Dubey almost 10 yearsThis one helped and +1 for sure!
-
Symmetric almost 10 yearsThanks, I had changed this months ago while playing around and couldn't figure out how to change it back!
-
pqsk almost 10 yearsNo problem, glad I could help someone
-
lielvilla over 9 years
UIStatusBarStyleLightContent
works, but it seems the correct enum forsetBarStyle:
isUIBarStyleBlack
-
Ispas Claudiu over 9 yearsI think this is the most straight forward answer! Thx
-
pqsk over 9 yearsNo problem. Glad it's still helpful
-
Guillermo Barreiro over 9 yearsQuite easier using the Storyboard!
-
Ken over 9 years[UINavigationBar appearance] was very helpful.
-
Rob85 over 8 yearsSelecting black for iOS 9 is deprecated, any chance of an updated answer
-
alondono over 8 years@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 over 8 years@Rob85 I've checked Apple's Developer website, and styles
Default
andBlack
are still available in iOS 9. The deprecated ones areBlackOpaque
andBlackTranslucent
, which were replaced by a combination ofBlack
style and the Translucent tick-box. UIBarStyle on Apple's Developer website -
Rob85 over 8 yearsSorry @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
-
alondono over 8 years@Rob85 Cool! Thanks for letting me know.
-
Anton Tropashko about 8 yearsany ideas why apple needed an extra prop when there is backgroundColor already?
-
TheJeff over 7 yearsIn 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;
-
John Doe over 7 yearsThis answer still works. I like configuring the visuals using visual editor, and leave the code to do actual logic.