iOS: How To Easily Customize The Look Of Your UINavigationBar And UIBarButtonItem Across Your Whole App

Yesterday, I had the fun task of changing the look of the back button across the whole iOS app. In the process, I ended up learning A LOT about customizing the UINavigationBar in general.

The easiest solution I’ve found and learned a lot about is that you can actually do a lot of your customization in the AppDelegate using the general [UINavigationBar appearance] and [UIBarButton appearance] to affect all instances of UINavigationBar and UIBarButton in the app.

Just add the below code your need in your AppDelegate, and you’re good to go!

Setting a Custom Navigation Bar Image

Have a different background for your Navigation Bar? No problem! In your app delegate, simply change the image in the [UINavigation appearance]

[[UINavigationBar appearance] setBackgroundImage:YourBackgroundUIImage
                                   forBarMetrics:UIBarMetricsDefault];

Of course if your app goes landscape in some places, make sure to set a landscape image as well:

[[UINavigationBar appearance] setBackgroundImage:YourLandscapeUIImage
                                   forBarMetrics:UIBarMetricsLandscapePhone];

Styling Your Navigation Bar Title Text

You can actually customize what your navigation bar title text looks like, everything down to the shadows. First populate a text attributes dictionary with the text attributes you need for your styling, then pass those in!

    // your shadow offset if your title needs it
    NSValue *shadowOffset = [NSValue valueWithUIOffset:UIOffsetMake(0, 0)];
    
    // your text attributes dictionary
    NSDictionary *textAttributes = @{ UITextAttributeTextColor       : [UIColor YourFunColor],
                                      UITextAttributeFont            : [UIFont YourSpecialFont],
                                      UITextAttributeTextShadowColor : shadowOffset
                                    } 

     [[UINavigationBar appearance] setTitleTextAttributes:textAttributes];

Setting a Custom Bar Button Image

It’s just as easy to set a custom Bar Button Image:

    [[UIBarButtonItem appearance] setBackgroundImage:YourUIBarButtonImage
                                            forState:UIControlStateNormal
                                          barMetrics:UIBarMetricsDefault];

Don’t forget to add a pressed button image if you have one!

    [[UIBarButtonItem appearance] setBackgroundImage:YourPressedUIBarButtonImage
                                            forState:UIControlStateHighlighted
                                          barMetrics:UIBarMetricsDefault];

Customizing Your Back Button Image

If you haven’t guessed it already, you can also customize what your back button looks like!

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

And, of course, don’t forget to add the pressed state image if you have one:

    [[UIBarButtonItem appearance] setBackButtonBackgroundImage:YourBackButtonImage
                                                      forState:UIControlStateHighlighted
                                                    barMetrics:UIBarMetricsDefault];

If you need the text to move relative to the image, you can easily offset it:

     [[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(5, 0) 
                                                          forBarMetrics:UIBarMetricsDefault];

Customizing Your Bar Button Fonts

Just like you can customize the font of your navigation bar title, you can also customize the font of your bar buttons. Keep in mind that all the bar buttons – the right and left and back button – will have this same font.

   // your shadow offset if your title needs it
    NSValue *shadowOffset = [NSValue valueWithUIOffset:UIOffsetMake(0, 0)];
    
    // your bar button text attributes dictionary
    NSDictionary *textAttributes = @{ UITextAttributeTextColor       : [UIColor YourFunColor],
                                      UITextAttributeFont            : [UIFont YourSpecialFont],
                                      UITextAttributeTextShadowColor : shadowOffset
                                    } 
    [[UIBarButtonItem appearanceWhenContainedIn: [UINavigationController class],nil]          
                         setTitleTextAttributes:textAttributes 
                                       forState:UIControlStateNormal];

Enjoy!