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];

I prefer this code because categories uses aren't recommended! You'll see that it works fine if you use it. — Stephane, Oct 22 '11 at 18:43

iwat · Accepted Answer · 2011-12-12T15:47:22.773

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.

don't forget to upvote for @luvieere, he deserves his credit. — iwat, Dec 12 '11 at 15:37

score 32 · Answer 2 · edited Aug 17 '17 at 13:06

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..

score 9 · Answer 3 · edited Jul 20 '12 at 12:34

9

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.

edited Jul 20 '12 at 12:34

The iOSDev

5,237
7
41
78

answered Aug 31 '10 at 19:08

drunknbass

1,662
1
13
19

This method is much easier and gives you more flexibility as to the images used for drawing. I just tried this out and it works great! Just remember to import the `QuartzCore` library. – FreeAsInBeer Jun 01 '11 at 15:44
Works great, thanks. I try to steer clear of categories, i've found them unreliable, so this is great. – Chris Jul 27 '11 at 03:53

score 8 · Answer 4 · answered Jul 31 '12 at 15:51

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;

score 8 · Answer 5 · answered Aug 08 '13 at 03:26

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;
}

Isuru Jayathissa · Answer 6 · 2012-12-19T12:46:06.243

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

score 2 · Answer 7 · answered Feb 12 '14 at 12:09

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];

Babul Prabhakar · Answer 8 · 2018-02-22T10:10:21.573

1

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)

edited Feb 22 '18 at 10:10

answered Apr 12 '16 at 20:34

Babul Prabhakar

2,373
1
18
25

score 0 · Answer 9 · answered Nov 07 '09 at 09:08

0

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

answered Nov 07 '09 at 09:08

nduplessis

12,236
2
36
53

It's hard to say. Where will you use it? You might need to bring the background image view to the front every time the bar is displayed – nduplessis Nov 07 '09 at 09:23

score 0 · Answer 10 · answered Sep 04 '13 at 19:54

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];

score 0 · Answer 11 · answered Feb 27 '17 at 06:52

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];

score 0 · Answer 12 · answered Mar 30 '17 at 17:02

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];

How to add background image on iphone Navigation bar?

12 Answers12

Linked

Related