[ios] How to change Navigation Bar color in iOS 7?

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.

This question is related to ios ios7 storyboard uikit uinavigationbar

The answer is


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


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]];
}

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];
}

- (void)viewDidLoad
{
    [super viewDidLoad];

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

In viewDidLoad, set:

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

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


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.


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];
}

//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;
}

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)!
    ]

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.


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];

For Color :

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

For Image

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

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];

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


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

// *barTintColor* sets the background color
// *tintColor* sets the buttons color

In iOS 7 you must use the -barTintColor property:

navController.navigationBar.barTintColor = [UIColor barColor];

#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]];
    }

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];
    }
}

Examples related to ios

Adding a UISegmentedControl to UITableView Crop image to specified size and picture location Undefined Symbols error when integrating Apptentive iOS SDK via Cocoapods Keep placeholder text in UITextField on input in IOS Accessing AppDelegate from framework? Autoresize View When SubViews are Added Warp \ bend effect on a UIView? Speech input for visually impaired users without the need to tap the screen make UITableViewCell selectable only while editing Xcode 12, building for iOS Simulator, but linking in object file built for iOS, for architecture arm64

Examples related to ios7

Xcode: Could not locate device support files How to Apply Gradient to background view of iOS Swift App How do I hide the status bar in a Swift iOS app? Using Predicate in Swift How do I programmatically set device orientation in iOS 7? What is the height of Navigation Bar in iOS 7? Warning :-Presenting view controllers on detached view controllers is discouraged Color Tint UIButton Image iOS change navigation bar title font and color How to embed small icon in UILabel

Examples related to storyboard

How to make a simple rounded button in Storyboard? Outlets cannot be connected to repeating content iOS creating custom tableview cells in swift How to change Navigation Bar color in iOS 7? How can I switch views programmatically in a view controller? (Xcode, iPhone) How can I load storyboard programmatically from class? What is the difference between Modal and Push segue in Storyboards? Load view from an external xib file in storyboard Perform Segue programmatically and pass parameters to the destination view Custom Cell Row Height setting in storyboard is not responding

Examples related to uikit

CGRectMake, CGPointMake, CGSizeMake, CGRectZero, CGPointZero is unavailable in Swift How to trap on UIViewAlertForUnsatisfiableConstraints? Changing Placeholder Text Color with Swift Move view with keyboard using Swift How to use UIVisualEffectView to Blur Image? preferredStatusBarStyle isn't called How to change Navigation Bar color in iOS 7? UICollectionView spacing margins How to programmatically get iOS status bar height Get UIScrollView to scroll to the top

Examples related to uinavigationbar

Swift programmatically navigate to another view controller/scene How to enable back/left swipe gesture in UINavigationController after setting leftBarButtonItem? How to hide a navigation bar from first ViewController in Swift? Change color of Back button in navigation bar NavigationBar bar, tint, and title text color in iOS 8 transparent navigation bar ios presenting ViewController with NavigationViewController swift Changing navigation title programmatically Navigation bar with UIImage for title Changing navigation bar color in Swift