Add Texture To The UINavigationBar

One thing iPhone designers love to do these days is add texture to the navigation bar.  Leather and wood grain texures are very popular.  Luckily for iPhone developers, it’s actually a very simple task to incorporate these images into our Apps.  In this iOS Quick Tip.  I’m going to show you how add textures to your iPhone app Navigation Bar.

1. We’re going to start by creating a new project in XCode. In the File menu choose New Project. Choose the Master-Detail Application and click Next. Name your new project NavBarTexture and click Next again.

2. Now we have to add the texture images to the project. I’ve created two 24-bit PNG images for each texture I’m going to demonstrate in this project. One is 640×88 pixles for the retina display screens and the other is 320 x 44 for older iPhones and iPods. Notice that the name of the images match except the larger retina display images end with @2x.

I like to keep my images in a group called images under Supporting Files. You can create this group by Ctl+Click on the Supporting Files group and choose New Group. Then rename the group “images”.

Now we can drag and drop the images into the new image group.

Make sure the option to Copy items into the destinations group’s folder is selected.

3. Finally we’re going to add the code that applys the images to the Navigation Bar. Enter the code you see below into viewDidLoad method in the MasterViewController.m file.

// change the color of the navigation bar.
UINavigationBar *navigationBar = self.navigationController.navigationBar;
UIImage *image = [UIImage imageNamed: @"NavBar-Wood.png"];
[navigationBar setBackgroundImage:image forBarMetrics: UIBarMetricsDefault];
self.navigationController.navigationBar.tintColor = [UIColor brownColor];

This code will set a variable for the navigation bar and another variable for the image we’ll be using as our texture.  In this case, it’s the NavBar-Wood.png image.  It then sets the image as the background for the navigation bar.  The last line will change the tintColor of the navigation buttons.  This is to make them match the image a little bit better.

To change the texture to one of the other examples, all you have to do is change the second line of code where it assigns the PNG file.

UIImage *image = [UIImage imageNamed: @"NavBar-Leather.png"];

Here are the screenshots of all three textures.

You can download these texture and the PSD file here.