iOS

Customizing Navigation Bar and Status Bar in iOS 7


Like many of you, I have been very busy upgrading my apps to make them fit for iOS 7. The latest version of iOS introduces lots of visual changes. From a developer’s perspective, the navigation bar and status bar are two noticeable changes that need to cater. The status bar is now transparent, that means the navigation bar behind it shows through. In some cases, the background image for a navigation bar can extend up behind the status bar.

Some time ago, I’ve written a tutorial about how to customize a navigation bar. I think it’s time to revisit the customization and see how it is done in iOS 7. Here are some of the tips and tricks that you’ll find in this article:

  • Setting the background color of navigation bar
  • Using background image in navigation bar
  • Customizing the color of back button
  • Changing the font of navigation bar title
  • Adding multiple bar button items
  • Changing the style of status bar
  • Hiding the status bar
custom navigation bar iOS 7

You’ll need Xcode 5 to properly execute the code as presented in this tutorial. So if you’re still using older versions of Xcode, make sure you upgrade to Xcode 5 before running the sample Xcode project.

Default Navigation Bar in iOS 7

Before we go in to the customization, let’s first take a look at the default navigation bar generated by Xcode 5 and iOS 7. Simply create a Xcode project using Single View Controller template. Embed the view controller in a navigation controller. If you don’t want to start from scratch, you can just download this sample Xcode project.

Xcode 5 bundles both iOS 6 and iOS 7 Simulators. Try to run the sample project using both versions of Simulators.

Default Navigation Bar

As you can see, the navigation bar in iOS 7 is by default intertwined with the status bar. The default color is also changed to light gray, as well.

Changing the Background Color of Navigation Bar

In iOS 7, the tintColor property is no longer used for setting the color of the bar. Instead, use the barTintColor property to change the background color. You can insert the below code in the didFinishLaunchingWithOptions: of AppDelegate.m.

Here is the result:

Change Navigation Bar Background Color

Normally you want to use your own color as the system color doesn’t look nice. Here is a very useful macro for setting RGB color:

Simply put it somewhere at the beginning of AppDelegate.m and use it to create any UIColor object with whatever RGB color you want. Below is an example:

By default, the translucent property of navigation bar is set to YES. Additionally, there is a system blur applied to all navigation bars. Under this setting, iOS 7 tends to desaturate the color of the bar. Here are the sample navigation bars with different translucent setting.

Navigation Bar Translucent

To disable the translucent property, you can simply select the navigation bar in Storyboard. Under Attribute Inspectors, uncheck the translucent checkbox.

Storyboard Navigation Bar Translucent

Using Background Image in Navigation Bar

If your app uses a custom image as the background of the bar, you’ll need to provide a “taller” image so that it extends up behind the status bar. The height of navigation bar is changed from 44 points (88 pixels) to 64 points (128 pixels).

You can still use the setBackgroundImage: method to assign a custom image for the navigation bar. Here is the line of code for setting the background image:

The sample Xcode project bundles two different background images: nav_bg.png and nav_bg_ios7.png. Try to test them out.

Navigation Bar Background Image

Changing the Font of Navigation Bar Title

Just like iOS 6, you can customize the text style by using the “titleTextAttributes” properties of the navigation bar. You can specify the font, text color, text shadow color, and text shadow offset for the title in the text attributes dictionary, using the following text attribute keys:

  • UITextAttributeFont – Key to the font
  • UITextAttributeTextColor – Key to the text color
  • UITextAttributeTextShadowColor – Key to the text shadow color
  • UITextAttributeTextShadowOffset – Key to the offset used for the text shadow

Here is the sample code snippets for altering the font style of the navigation bar title:

If you apply the change to the sample app, the title of navigation bar should look like this:

Custom Navigation Bar Title

Customizing the Color of Back button

In iOS 7, all bar buttons are borderless. The back button is now a chevron plus the title of the previous screen (or just displays ‘Back’ as the button title if the title of the previous screen is nil). To tint the back button, you can alter the tintColor property, which provides a quick and simple way to skin your app with a custom color. Below is a sample code snippet:

In addition to the back button, please note that the tintColor property affects all button titles, and button images.

Custom Back Button Color

If you want to use a custom image to replace the default chevron, you can set the backIndicatorImage and backIndicatorTransitionMaskImage to your image.

The color of the image is controlled by the tintColor property.

Chevron replacement iOS 7

Use Image as Navigation Bar Title

Don’t want to display the title of navigation bar as plain text? You can replace it with an image or a logo by using a line of code:

We simply change the titleView property and assign it with a custom image. This is not a new feature in iOS 7. The code also applies to lower versions of iOS.

Custom Navigation Title Image

Adding Multiple Bar Button Items

Again, this tip is not specifically for iOS 7. But as some of you have raised such question before, I decide to put the tip in this tutorial. From time to time, you want to add more than one bar button item on one side of the navigation bar. Both the leftBarButtonItems and rightBarButtonItems properties lets you assign custom bar button items on the left/right side of the navigation bar. Say, you want to add a camera and a share button on the right side of the bar. You can use the following code:

Here is the sample result:

Add Multiple Bar Button Items

Changing the Style of Status Bar

In older versions of iOS, the status bar was always in black style and there is not much you can change. With the release of iOS 7, you’re allowed to change the appearance of the status bar per view controller. You can use a UIStatusBarStyle constant to specify whether the status bar content should be dark or light content. By default, the status bar displays dark content. In other words, items such as time, battery indicator and Wi-Fi signal are displayed in dark color. If you’re using a dark background in navigation bar, you’ll end up with something like this:

Dark Navigation Bar

In this case, you probably need to change the style of status bar from dark to light. There are two ways to do this. In iOS 7, you can control the style of the status bar from an individual view controller by overriding the preferredStatusBarStyle:

For the sample app, simply put the above code in the RecipeNavigationController.m and the status bar will display light content.

Dark Navigation Bar Light Status Bar

The method introduced above is the preferred way to change the status bar style in iOS 7. Alternatively, you can set the status bar style by using the UIApplication statusBarStyle method. But first you’ll need to opt out the “View controller-based status bar appearance”. Under the Info tab of the project target, insert a new key named “View controller-based status bar appearance” and set the value to NO.

View Controller-based Status Bar

By disabling the “View controller-based status bar appearance”, you can set the status bar style by using the following code:

Hiding the Status Bar

In any case you want to hide the status bar, you can override the prefersStatusBarHidden: in your controller:

Summary

iOS 7 presents developers with new freedom to customize the appearance of navigation bar and status bar. If you’re porting the app from iOS 6 to iOS 7 or creating a brand-new app for iOS 7, I hope you’ll find these tips useful.

For your complete reference, you can download the source code of the demo project from here. Just uncomment any code snippets in the sample project to test out the change.

Like many of you, I’m still exploring all the new changes of iOS 7 SDK. I am by no means an expert on iOS 7. If you find any errors in the article, please do let me know. If you find any tips and tricks related to navigation bar and status bar, please also share with us by leaving comment below.

iOS
Enhance Your Simple Table App With Property List
Tutorial
Protocol-oriented Data Structures in Swift: A Generic Doubly Linked List
Tutorial
A Beginner’s Guide to CALayer
  • macuser79

    macuser79macuser79

    Author Reply

    A great tutorial.
    My name is Vincenzo and I always read your articles on Facebook.
    Is it possible change the font back to the key with the same size as the title of the status bar?

    Sorry for my english


    • Simon Ng

      Simon NgSimon Ng

      Author Reply

      Sorry, what do you mean by changing the font back to the key? which key are you referring to?


      • macuser79

        macuser79macuser79

        Author Reply

        Sorry back button of the uinavigationcontroller


  • Tabish Sohail

    Really a good one..
    Hope to see more tutorials on iOS7


    • Dipak Dhondge

      How can i change the height of the navigation bar to small size,please help me


  • dariux

    dariuxdariux

    Author Reply

    Hello Simon,

    I suggest to fix how to change the Font Navigation Bar Title, is deprecated code (ios 7), the code that I use for iOS 7 is:

    // Set the color of title for *all* UINAvigationBars
    [[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
    [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0], NSForegroundColorAttributeName,
    [UIFont fontWithName:@”HelveticaNeue-Light” size:16.0], NSFontAttributeName, nil]];


    • Simon Ng

      Simon NgSimon Ng

      Author Reply

      Thanks for pointing it out. The code snippet is now updated.


      • dariux

        dariuxdariux

        Author Reply

        By the way, excellent tutorial!


  • Ricky Kwok

    Ricky KwokRicky Kwok

    Author Reply

    thanks for great tutorial, appreciate your sharing a lot. keep it up.


  • wingyiulee

    wingyiuleewingyiulee

    Author Reply

    A great tutorial!


  • g

    gg

    Author Reply

    Sorry, but this [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@”nav_bg_ios7.png”] forBarMetrics:UIBarMetricsDefault]; it’s not working correctly both on iOs 6 and 7. It’s ok on 7, but on 6 it overlaps.


    • Simon Ng

      Simon NgSimon Ng

      Author Reply

      The “nav_bg_ios7.png” is specially designed for iOS 7. For iOS 6, you should use the nav_bg.png.

      If you’re creating a new app, I suggest you to focus on iOS 7. It’ll take you lots of effort to support both iOS 6 and 7.

      In case you want to make the setBackgroundImage works on both versions, you can add conditional branch and assign different background images. You can use the following code to determine the iOS version:

      if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) {

      }


      • Naveen

        NaveenNaveen

        Author Reply

        Hi,

        I tried with changing the image name to “nav_bg.png” in iOS 6. It is showing a translucent status bar. How to display the default status bar in iOS6


  • stever1000

    stever1000stever1000

    Author Reply

    How would I hide the bottom 1px grey border of the navigation bar? See Apple’s Notes App for an example.


  • proxi

    proxiproxi

    Author Reply

    It seems that setting background image on a navbar disables the blur. Any idea on how to achieve translucent navbar with blur and custom background image / gradient?


  • Mohammad Jeragh

    Great Tutorial.

    I downloaded your code and added the snippet for “titleTextAttributes” and still the font did not change from the default setting.
    Please help.


  • Manu Sharma

    Any idea if I can customize status bar text color and even better, font.


  • Will Yan

    Will YanWill Yan

    Author Reply

    A great tutorial,very helpful,thanks a lot !


  • Christophe Chantraine

    Very nice! Thank you so much for your work and share it to us! Waiting for another great tutorial! 😀


  • SiennaAmelia

    Decent ! Excellent Article helped me a lot
    For more information Check the below link. http://stackoverflow.com/questions/19632413/all-the-ios-ui-bars-appear-opaque-on-phones/19635588#19635588


  • scorePro

    scoreProscorePro

    Author Reply

    Great article, full of useful little tips. iOS7 takes a lot of getting used to so articles like this which are short and to the point make an invaluable resource. Keep them coming!


  • Zoe

    ZoeZoe

    Author Reply

    Fantastic blog post – could I request an addendum? Custom widths between the UIBarButtonItem’s and also, how to use auto-layout to pin a button to the nav bar’s title label (so whenever it grows, the button moves with it)


  • Ahha

    AhhaAhha

    Author Reply

    Fantasic blog for iOS programming. Many thanks for your share!


  • LilMoke

    LilMokeLilMoke

    Author Reply

    Have you used: setBackButtonBackgroundImage? I added a few lines of code to your sample to change the back button, but in iOS 7 it does not appear to work the first time, if I go back and then present the view again the back button shows up. Here are the lines I added:

    UIImage * btBack_30 = [[UIImage imageNamed:@”btBack_30″] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 5)];

    UIImage * btBack_24 = [[UIImage imageNamed:@”btBack_24″] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 12, 0, 5)];

    [[UIBarButtonItem appearance] setBackButtonBackgroundImage:btBack_30 forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

    [[UIBarButtonItem appearance] setBackButtonBackgroundImage:btBack_24 forState:UIControlStateNormal barMetrics:UIBarMetricsLandscapePhone];

    I was wondering if I am doing something wrong, or if this is an Apple bug of some sort. Any help is appreciated!!


  • Larkum

    LarkumLarkum

    Author Reply

    Hi, I have been trying everything that i can think of and have googled with no joy, how would I change the Navigation Bar appearance on an individual controller,

    I.e i have used the method above to change the navigation bar to blue, but on 2 tableView pages i want the colour to appear red.

    how would i do that?

    Im sorry I’m new to Building apps, and i just can’t find an answer to this anywhere.

    Thanks

    Larkum


  • Rajesh Velicheti

    Excellent explanation, thank you.


  • Bhavesh Agrawal

    Really Vey Helpful tutorial. Thank you for providing this high quality tutorial….


  • Mobisoft Infotech

    Appreciates this so much. Keep sharing interesting facts

    on your next blog.

    mobisoftinfotech.com/classes/4th-ranked-iphone-

    developer-usa/


  • santosh

    santoshsantosh

    Author Reply

    thanks..!! It helped me..!!


  • Isuru Nanayakkara

    Great tutorial. Helped me to learn how to add multiple buttons to the navigation bar. Thank you.


  • Wanbok

    WanbokWanbok

    Author Reply

    Great! It helps me so much. Thanks 🙂


  • ghouse

    ghouseghouse

    Author Reply

    how can i change the status bar text color to any other color like yellow, green in

    Changing the Style of Status Bar


  • waye

    wayewaye

    Author Reply

    Nice tutorial! I met a problem in the process:
    navigation bar is translucent, by default. Is there a way to disable it for all my navigation bar?


  • Jason Lee

    Jason LeeJason Lee

    Author Reply

    Great Tutorial~
    I have a question about size.
    How to enlarge navigationbar Height?


  • Hugh Mbaezue

    Excellent tutorial. Thank you. This helped me a lot!


  • acekko

    acekkoacekko

    Author Reply

    THANKS A LOT ! IT’S A
    VERY USEFULL POST !


  • Flint

    FlintFlint

    Author Reply

    I have a trouble with status bar color that I accurately described at stack overflow, I will be very grateful if somebody will help me to figure this out, my question is here http://stackoverflow.com/questions/20941145/ios-game-center-friend-invitation-request-view-controller-changes-status-bar-co


  • UserName1010

    good comprehensive tutorial. with images as example.


  • Jhasera

    JhaseraJhasera

    Author Reply

    How do you select Navigation Bar Attributes – I am using Xcode 5 and when I click on it on story board it doesn’t display.


  • Terrance Shaw

    A great place to put your UIColorFromRGB #define would be the project .pch file. This way, you can use it in each view controller throughout your project.


  • Frenchie

    FrenchieFrenchie

    Author Reply

    Thanks for this great article !


  • Roger23

    Roger23Roger23

    Author Reply

    Instead of your macro, you can use this category on NSString, to generate colors from RGB code, as simple as [@”#067AB5″ representedColor]

    https://github.com/nicolasgoutaland/NSString-Color


  • Andrew

    AndrewAndrew

    Author Reply

    Changing the font is not working for me!


  • Thomas Gordon

    The changing color of the Navigationbar above doesn’t affect the navigation bar. I found that to change the color of the navigationbar, I used this:
    [[[self navigationController] navigationbar] setBarTintColor:[UIColor blueColor]];
    The above line set the bar color to blue.


  • A. Nony Mous

    Simon, this info is very useful. Many thanks for posting it. My navbar is rocking now. 🙂


  • Element115

    Element115Element115

    Author Reply

    How come my back button won’t show white?? It keeps showing a gray color.


  • KnowledgeSeeker

    Thanks for the awesome link.


  • 3sd

    3sd3sd

    Author Reply

    thanks 🙂


  • Si

    SiSi

    Author Reply

    Ready to update this for Swift? 😉


  • Alina Pupazan

    I wish this was also done in swift


  • Cherie

    CherieCherie

    Author Reply

    Hey thanks for the tips! However, I was just wondering if there’s a way to change the height of the navigation bar? Because I’m using large text in the navigation bar and there isn’t enough space to display the words.

    I found a link (http://www.emdentec.com/blog/2014/2/25/hacking-uinavigationbar) in Objective-C but it doesn’t work well with Swift (no such override method :/) so I was wondering if there’s a version for Swift as well.

    Any help will be greatly appreciated!


  • Hardik Gupta

    Thanks for great Tutorial,
    How can i hide the menu, when i click anywhere on controller and when menu shows.


  • Frak

    FrakFrak

    Author Reply

    Hi Simon,

    I was able to change the Navigation bar’s title text using ” [[UINavigationBar appearance] setTitleTextAttributes” However, a subsequent call to open an email form using (boilder-plate code like this) :

    MFMailComposeViewController* mailController = [[MFMailComposeViewController alloc] init];
    mailController.mailComposeDelegate = self;
    [self presentViewController:mailController animated:YES completion:NULL];

    would present the mail view but with the changed navigation bar parameters. This results in an unreadable title in the mail view because of the white background (even worse if there is no shadow). Sometimes, the “Send” and “Cancel” buttons are also white and unreadable.

    I read that the email form’s parameters are expressly prohibited by Apple from change and yet, here it is getting changed inadvertently by manipulating my own view controller’s parameters.
    Do you know of a way to reverse that? ie make the system mail controller view NOT take on my project’s appearance parameters?

    Thank you


  • Steffy Jose

    Nice blog Simon. You are right there is a slight difference in navigation bar between iOS7 and iOS6. The color changed to light gray.


Shares