How to add background image on iphone Navigation bar?

Question

I want to add an image background to my navigation bar.

Is it right?

//set custom background image
UIImageView *backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"NavigationBackground.png"]];
[self.navigationBar insertSubview:backgroundView atIndex:0];
[backgroundView release];

Answer 1

Here's the code from the link @luvieere mentioned. Paste this code into to the rootview controller just above @implementation rootviewController

@implementation UINavigationBar (CustomImage)
- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed:@"NavigationBar.png"];
    [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end

As of iOS 5, there is an official way to do this. (see iOS Developer Library)

// someplace where you create the UINavigationController
if ([navigationController.navigationBar respondsToSelector:@selector(setBackgroundImage:forBarMetrics:)] ) {
    UIImage *image = [UIImage imageNamed:@"NavigationBar.png"];
    [navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
}

But still, retain the old code for backward compatibility unless you really want to ditch iOS 4 and below.

Answer 2

Your code alone won't do it, you'll have to write a category in order for it to work. There are two approaches regarding the way you should do it: the first one involves making the image a subview of your UINavigationBar and re-bringing it to front in each of your UIViewController's viewDidAppear method. This however has been reported having some issues with covering the right UIBarButtonItem. The other method involves overriding

- (void)drawRect:(CGRect)rect

and drawing the image there. Both of these are extensively covered in this blog discussion..

Answer 3

The easiest way is just set the UINavigationBar layer contents.

NSString *barBgPath = [[NSBundle mainBundle] pathForResource:@"mybgimage" ofType:@"png"];
[nBar.layer setContents: (id)[UIImage imageWithContentsOfFile: barBgPath].CGImage];

The downside is the buttons are not generated off the proper tint but you can set the navbar color to whatever is closest to your bg image and the tint should be taken care of.

Answer 4

I would do this in the appdelegate something like

+ (void)Generalstyle {
    //navigationbar
    UINavigationBar *navigationBar = [UINavigationBar appearance];
    [navigationBar setBackgroundImage:[UIImage imageNamed:@"navigation.png"] forBarMetrics:UIBarMetricsDefault];

}

And in

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

    [[self class] Generalstyle];

}

.h file:

+ (void) Generalstyle;

Answer 5

in ios5 , I set the navigation bar background image(for all the navigation bar image) in AppDelegate.m:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [application setStatusBarStyle:UIStatusBarStyleBlackOpaque animated:NO];
    UIImage *navBarBackgroundImage = [UIImage imageNamed:@"nav_bg"];
    [[UINavigationBar appearance] setBackgroundImage:navBarBackgroundImage forBarMetrics:UIBarMetricsDefault];
    return YES;
}

Answer 6

When iphone 5 come we have to set both device type. So use this

if([self.navigationController.navigationBar respondsToSelector:@selector(setBackgroundImage:forBarMetrics:)] ) {
//iOS 5 new UINavigationBar custom background
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"navbg_ForiPhone5_Imagename.png"] forBarMetrics: UIBarMetricsDefault];
} else {
[self.navigationController.navigationBar insertSubview:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"navbg_ForOtherIphone_Imagename.png"]] atIndex:0];
}

For more info go to this link

Answer 7

This one working fine in iOS 6 and 7

UINavigationBar *navBar = [[self navigationController] navigationBar];
  UIImage *backgroundImage = [UIImage imageNamed:@"nav-bar-background-normal"];
  [navBar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault];

Answer 8

Swift version :

let navBar = UINavigationBar.appearance();
navBar.setBackgroundImage(UIImage(named: "yourImageName"), forBarMetrics: .Default)

Updated Swift 3.2 :

let navBar = UINavigationBar.appearance();
        navBar.setBackgroundImage(UIImage(named: "yourImageName"), for: .default)

Answer 9

You could also add a category that extends the UINavigationBar class and override the drawRect: method in the category.

Answer 10

what i did was just created an UIImage with the image i wanted and added to the navigation bar like this.

UIImage *image = [UIImage imageNamed:@"yourImage.png"];

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

Answer 11

While adding Navigation Bar background image, you should be very careful about its dimensions. Please make sure you have following dimensions for different screen sizes.

1) background.png => 320x44
2) background@2x.png => 640x88 // used for iPhone5 and for retina devices
3) background@3x.png => 1334x183 // used for iPhone6

Use following code to add background image and to avoid any tiling in Navigation Bar's background image.

[self.navigationController.navigationBar setBackgroundImage:[[UIImage imageNamed:@"background"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0) resizingMode:UIImageResizingModeStretch] forBarMetrics:UIBarMetricsDefault];

Answer 12

Try this code in your AppDelegate Class to show image at navigation bar. It will help you alot.

[[UINavigationBar appearance] setBackgroundImage:[[UIImage imageNamed:@"headerImg.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)] forBarMetrics:UIBarMetricsDefault];