How to Add Custom Backgrounds to iOS Tab & Navigation Bars

&c=” border=”0″ alt=”” />

Advertise here via BSA

The standard tab bar and navigation bar included within iOS, in all honestly, are rather bland and if you’re creating a brand new app, the last thing you want is to include something that doesn’t look the part. This tutorial will show you how to add a custom background to the UINavigationBar within a UINavigationController and a UITabBar within a UITabBarController.

Part One: Getting Set Up

1. First we need to create our Xcode project, to do this open Xcode and create a New Project (File – New – Project) and select Tabbed Application from with iOS and press Next.

Screen Shot 2012-07-30 at 08.58.36

2. Give it a name and make sure that the device family is iPhone and then press Next, save your project somewhere and then press Create.

Screen Shot 2012-07-30 at 08.59.51

3. Next, you need to prepare your graphics for use as the background, to do this make sure the image for the tab bar is 640 x 97 and has @2x at the end of the file name and then create another version at 320 x 49 and remove the @2x extension. Make sure the files at PNG files. Now, do the same for the navigation bar background but make sure that the navigation bar is 640 x 88 and then resize it using the same naming convention.

4. Now, back to your Xcode project and add your files to it, to do this go to File – Add Files to… and then locate and add all of your 4 files and make sure the Copy… checkbox is checked.

Part Two: Adding the Backgrounds

1. Now we’re going to actually add the images as the backgrounds, to do this go back to Xcode and open up AppDelegate.m and we’re going to create a UINavigationController so we have something to change the background of. To do this, add the following code just below viewController1 being created like so:

UINavigationController *navigationController1 = [[UINavigationController alloc] initWithRootViewController:viewController1];

And change the following:

self.tabBarController.viewControllers = @[viewController1, viewController2];


self.tabBarController.viewControllers = @[navigationController1, viewController2];

And then we’ve successfully added a navigation controller to our app.

2. Now, we are going to add a background to our newly created controller, to do this open up FirstViewController.m and add the following to -(void)viewDidLoad:

UIImage *navigationBarBackground = [UIImage imageNamed:@"NAME OF YOUR IMAGE"];
[[UINavigationBar appearance] setBackgroundImage:navigationBarBackground forBarMetrics:UIBarMetricsDefault];

3. Now, head back to AppDelegate.m and we’ll add the background to our tab bar, within the first method, add the following:

UIImage *tabBarBackground = [UIImage imageNamed:@"NAME OF YOUR TAB BAR BACKGROUND IMAGE"];
[self.tabBarController.tabBar setBackgroundImage:tabBarBackground];

Add this just below self.window.rootViewController = self.tabBarController;

4. Now, if we were to run our application, we will be able to see that we’ve successfully applied both of our images to the tab and navigation bar.

Click here to download the source files

Screen Shot 2012-07-30 at 09.24.11

Screen Shot 2012-07-30 at 09.24.19

Screen Shot 2012-07-30 at 09.13.16

Fuel Your Coding

Leave a Comment