iOS Programming 101: How to Customize Navigation Bar and Back Button

76 Flares 76 Flares ×

Previously, in our iOS Programming 101 series, we showed you how to customize the appearance of the Tab Bar. In this tutorial, we’ll continue to talk about UI customization and cover how to use Appearance API to make the Navigation Bar more beautiful.

Here are what you’ll learn in this tutorial:

  1. Customizing the View with background image
  2. Customizing UINavigationBar including background image and text style of title
  3. Customizing the appearance of UIBarButtonItem

As usual, we’re going to illustrate the concept by converting a plain navigation bar to one with customized graphics. However, to help you focus on learning the customization, we’ve prepared the Xcode project for you to start with. Before proceeding, first download the Xcode project here (note: the project is created using Xcode 4.5).

If you build and run the project, you’ll get an app with simple navigation UI. Now we’ll work together to style the navigation bar, customize the bar buttons and assign our own background image for the view.

Demo App - Custom Navigation Bar

Demo App – Custom Navigation Bar

Customizing the View Background

First, we would like to change the background of view controller with our own image. If you open the Xcode project, you’ll see a set of images that we’ve added for you. To set the background image, open the “RecipeViewController.m” and add the following line of code to the end of “viewDidLoad” method:

1
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"common_bg"]];

Apparently, you can use the “backgroundColor” property of the view to change the background color. What you may not know is that you can also use the same property to set the background image. The trick is to create a UIColor object using the “colorWithPatternImage”. During drawing, the image in the pattern color is tiled as necessary to cover the view area.

After the change, compile and run the app. It should like this:

Custom Nav Bar - Styling Background

Customizing the Background of View Area

Styling the UINavigationBar

Prior to iOS 5, developers can only change the style of navigation bar through a handful of properties. But the problem is the change only applies to the navigation bar of a specific view. From iOS 5 and onwards, the SDK allows developers to style the navigation bar by using Appearance API. You can easily customize the appearance of navigation bars throughout the app using the appearance proxy ([UINavigationBar appearance]).

Changing Navigation Bar Background

Open “AppDelegate.m” and add the following in the “application:didFinishLaunchingWithOptions” method:

1
2
3
4
5
6
7
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    UIImage *navBackgroundImage = [UIImage imageNamed:@"navbar_bg"];
    [[UINavigationBar appearance] setBackgroundImage:navBackgroundImage forBarMetrics:UIBarMetricsDefault];

return YES;
}

The first line of code creates the UIImage object with our own background image of navigation bar. Then we use the appearance proxy to assign the image.

Customizing the Title Text of Navigation Bar

Next, we’ll change the font style of the title text. 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

In the “application:didFinishLaunchingWithOptions” method of AppDelegate.m, add the following code:

1
2
3
4
5
6
    [[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
                                                           [UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], UITextAttributeTextColor,
                                                           [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8],UITextAttributeTextShadowColor,
                                                           [NSValue valueWithUIOffset:UIOffsetMake(0, 1)],
                                                           UITextAttributeTextShadowOffset,
                                                           [UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21.0], UITextAttributeFont, nil]];

The above code alters the text style of navigation bar title. We use the HelveticaNeue-CondensedBlack as the font type, set the color to white and add a shadow to the text.

Now compile and run the app again. This is what the customized navigation bar looks like:

Custom Nav Bar - Background and Text

Navigation Bar with customized background and text style

Customizing the Appearance of UIBarButtonItem

Lastly, we’re going to change the appearance of back button, as well as, other navigation bar buttons (i.e. UIBarButtonItem). Again, open “AppDelegate.m” and add the following code in the “application:didFinishLaunchingWithOptions” method:

1
2
3
4
5
6
7
    // Change the appearance of back button
    UIImage *backButtonImage = [[UIImage imageNamed:@"button_back"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 6)];
    [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

    // Change the appearance of other navigation button
    UIImage *barButtonImage = [[UIImage imageNamed:@"button_normal"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 6, 0, 6)];
    [[UIBarButtonItem appearance] setBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

We first create the UIImage objects using our own images (i.e. button_back.png and button_normal.png) and then set the image object as the background image of the UIBarButtonItem. But what’s the resizableImageWithCapInsets: method for? The buttons in navigation bar are not in fixed size. It’ll be automatically resized depending on the text length of the button. For round rectangular button, you probably don’t want to stretch the button in all directions. So we use the resizableImageWithCapInsets: method to add cap insets to the image. During resizing of the image, areas covered by a cap are not resized. The below illustration will give you a better idea about the cap inset:

resizableImageWithCapInsets illustrated

resizableImageWithCapInsets illustrated

We define the cap inset using the UIEdgeInset structure. The UIEdgeInsets is structure that specifies float values for each cap inset: top, left, bottom and right areas of an image. For instance, line 1 of the above code instructs iOS that the left 13 pixels and the right 6 pixels of the back button image are not scaled or resized.

After making the code change, compile and run the app again. You should now have the custom back and edit buttons.

Custom Nav Bar Buttons

Navigation Bar with customized UIBarButtonItems

What’s Next

Hope you enjoy this tutorial! For your reference, you can download the final Xcode project here. The appearance proxy gives iOS developers a much easier way to customize the UI controls. You should utilize it to make your app more attractive. In later tutorials, we’ll show you how to style other UI components such as UITableView in iOS app.

As always, leave us comment if you have any questions about the tutorial.

You May Like These:

Get Free Chapters of Our Swift Book

Beginning iOS 8 Programming with SwiftIf you want to create an app but don't know where to begin, this book covers the whole aspect of Swift programming and iOS 8 development and shows you every step from an idea to a real app on App Store. This book features a lot of hands-on exercises and projects. You will first create a simple app, then prototype an app idea, and later add some features to it in each chapter, until a real app is built. Want to learn more? Check it out here and get three free chapters.


  • Guntarion

    Super Awesome! Thank you verymuch for the tutorial.

    Can’t wait for the tutorial of creating a custom UITableView design :-)

  • Pingback: How To Customize Navigation Bar and Back Button | iOS … – AppCoda | MUSCLE CODER()

  • http://www.facebook.com/RezaRahmati59 Reza Rahmati

    Thank you for useful tutorials
    I have a problem, I have changed the navagationbaritems background as you said, every thing is ok, but whenever I change the title of button (programatically) the background will be get back to it’s default.
    I write the codes of changing the background in button action too, nothing is changed…
    I’ll appreciate letting me know the solution.
    Reza

  • http://www.facebook.com/RezaRahmati59 Reza Rahmati

    Is there any supportive one?

  • http://www.facebook.com/seb.hennig Sebastian Hennig

    Very cool tutorial, thx for that :)

  • http://railsandtales.tumblr.com/ Ewelina

    Like always great tutorial :) I love this site!

    • http://www.simonblog.com Simon Ng

      Great to hear that. Thanks!

  • Tenny

    I think you have the best, easiest to follow xcode tutorials on the web! Every tutorial of yours is worth bookmarking! Great job and keep it up! Just wondering, are you a fulltime ios programmer? This blog is a side hobby?

    • http://www.simonblog.com Simon Ng

      Thanks for your kind words. It’s just my side hobby but hope one day it’ll turn into a full-time job :-)

  • The.Dude.In.Charge

    Dude, you are literarily the most awesome iOS tuts guy ever. I’ve been to raywenderlich, stack overflow & youtube and you left them all in your dust with this tutorial. Kudos.
    Side hope: One day please do one on how you make your graphics assets :)

  • Lonely Coder

    Really helpful, would be even better if you had screenshots after every change you made to the display.

  • Pingback: iOS Programming 101: Customize UITableView and UITableViewCell Background using Storyboard | Sochinda's Blog()

  • dina youssef

    That was a great help. Most tutorials had you create a UIButton and then adding it as custom view to the bar button item which worked with all bar button items except the back button. This worked quiet well. Thank you.

  • jjpp

    good one

  • arash

    So nice!

  • Min

    Thanks for your help, but I still have a problem, how do I delete the text(Back) inside the button?

    • Krupit

      it’s very simple…..
      write this code in your viewcontroller.m

      – (IBAction)clearbutton:(id)sender
      {
      nametextbox.text==@””;
      }

  • HtunLinAung

    I have three nav background images and i want to change these images to nag bar of three views.

    Can i do that or not?

  • Podster

    Is there a way to set all UIBarButtonItem to plain style without borders? I tried below code but does not work…

    [[UIBarButtonItem appearance] setStyle:UIBarButtonItemStylePlain];

    Any ideas?

  • Pingback: Some of my favorite iOS Api’s | Nytek Productions()

  • Pingback: Nytek Productions | Some of my favorite iOS Api’s()

  • Salvatore

    This guide is working perfectly for me in portrait mode, but when in landscape mode, the back button is too lowered and is getting cut off by the underlying view(the bar button is working perfectly on the otherhand). I think it has to do with the values in the UIEdgeInsetsMake method, but i can’t get seem to find the optimal values.
    Can anyone give me an hand?

    Thank you

    • Salvatore

      Just found the answer:

      UIImage *backButtonImage = [[UIImage imageNamed:@”bar_button_back”] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 6)];
      [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
      [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsLandscapePhone];

  • Bonnke

    Very very very nice tutorials on this blog… Thanks a lot

  • eagle.dan

    Awaiting new tutorial to fix button background issues on iOS7

  • Pingback: Customizing Navigation Bar and Status Bar in iOS 7 | RZMars()

  • Pingback: Customizing Navigation Bar and Status Bar in iOS 7 (link from http://www.appcoda.com/customize-navigation-status-bar-ios-7/)()

76 Flares Twitter 16 Facebook 51 Google+ 4 LinkedIn 5 76 Flares ×