how to put background image for navigation bar?

Question

I want to put background image for navigation bar. I tried the following code but it hides the title for navigation.

self.title = @"My title";
UINavigationBar *navBar = self.navigationController.navigationBar;
UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"top.png"]];
[navBar addSubview:image];
[navBar sendSubviewToBack:image];

Any buddy know why is it so?

possible duplicate of [How do I change the background of a UINavigationBar?](http://stackoverflow.com/questions/4319112/how-do-i-change-the-background-of-a-uinavigationbar) — John Parker, Dec 13 '10 at 09:13
@middaparka it may be a possible duplicate but not fully. Please check my answer and think of it. — Madhup Singh Yadav, Dec 13 '10 at 10:24

Flea · Answer 1 · 2013-04-30T15:26:55.400

3

This should go where your navigation controller is initialized, i.e. MainViewController.m

// Set the background image of the navigation bar
UIImage *image = [UIImage imageNamed:@"banner-with-logo.png"];
[self.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

edited Apr 30 '13 at 15:26

answered Apr 23 '12 at 16:27

Flea

11,176
6
72
83

score 3 · Accepted Answer · edited Jan 27 '14 at 04:14

3

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"background.png"] forBarMetrics:UIBarMetricsDefault];

edited Jan 27 '14 at 04:14

iSmita

1,292
1
9
24

answered Oct 25 '12 at 17:36

Viral Narshana

1,855
2
21
45

score 0 · Answer 3 · answered Dec 13 '10 at 09:12

You can done by override the drawRect method

@implementation UINavigationBar (TENavigationBar)

- (void) drawRect:(CGRect)rect
{
    UIImage *image = [UIImage imageNamed:@"navigation_background"];

    [image drawInRect:CGRectMake(0, 
                                 0, 
                                 self.frame.size.width, 
                                 self.frame.size.height)];
}

@end

score 0 · Answer 4 · answered Dec 13 '10 at 09:21

Solution by WaiLam will work but if you are playing movies in your app the player navigation bar will also get change. Here is a better approach -

@implementation UINavigationBar (UINavigationBarCategory)

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx 
{
    if([self isMemberOfClass:[UINavigationBar class]])
    {
        UIImage *image;
        image=[UIImage imageNamed:@"hor_bar"];
        CGContextClip(ctx);
        CGContextTranslateCTM(ctx, 0, image.size.height);
        CGContextScaleCTM(ctx, 1.0, -1.0);
        CGContextDrawImage(ctx,
                           CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), image.CGImage); 
    }
    else 
    {        
        [super drawLayer:layer inContext:ctx];     
    }
}  
@end

score 0 · Answer 5 · answered Dec 13 '10 at 09:23

This will add an image, with the correct sizing, to the NavigationBar, centered.

/*  custom navbar logo, centered with same height as navbar  */
UIImageView *logo = [[UIImageView alloc] initWithFrame:
        CGRectMake(self.navigationController.navigationBar.frame.size.width/2-75,0,150,
                   self.navigationController.navigationBar.frame.size.height-1)];
[logo setImage:[UIImage imageNamed:@"text_logo.png"]];
[self.navigationController.navigationBar addSubview:logo];
[self.navigationController.navigationBar sendSubviewToBack:logo];

Madhup Singh Yadav · Answer 6 · 2010-12-15T05:24:46.503

0

If you want to add the image so that it is always the same throughout the application than use this:

- (void)drawRect:(CGRect)rect {
    // Drawing code 
    UIImage *img = [UIImage imageNamed: @"background-image.png"];
    [img drawInRect:CGRectMake(0, 
                               0, 
                               self.frame.size.width, 
                               self.frame.size.height)];
}

otherwise if you want to set the image at a particular screen only than it is bit tricky like:

- (void) viewWillAppear{
  ...
  ...
  [self addNavigationBarImage:YES];
}

- (void) viewWillDisappear{
  ...
  ...
  [self addTheNavigationBarImage:NO];
}

- (void) addTheNavigationBarImage:(BOOL)add{
  UIImageView *imgView = (UIImageView *)[[self.navigationController navigationBar] viewWithTag:TAG];
  if(add){
    if(imgView == nil){
      imgView = [[[UIImageView alloc] initWithImage:IMAGE] autorelease];
      [self.navigationController.navigationBar insertSubview:imgView atIndex:0];
    }
    //EDIT:
    else{
      [self.navigationController.navigationBar sendSubviewToBack:imgView];
    }

  }
  else{
   if(imgView)
      [imgView removeFromSuperview];
  }
}

Hope this helps.

edited Dec 15 '10 at 05:24

answered Dec 13 '10 at 10:22

Madhup Singh Yadav

8,110
7
51
84

Thank you for answering my question. But i have some problem in this code. UIImageView *imgView = [self.navigationController.navigationBar viewWithTag:TAG]; At the TAG place whose tag to set navigation bar or any image view. I set tag for navigation bar and then used it here but it gives warning. – Viral Narshana Dec 14 '10 at 09:30
@Viral\ Narshana : You should use a unique integer in place of TAG. aand sorry you should also typecast the view like: UIImageView *imgView = (UIImageView *)[[self.navigationController navigationBar] viewWithTag:1001] – Madhup Singh Yadav Dec 14 '10 at 10:17
I got the answer but one problem is image hides title and buttons of navigation bar.I tried this code but it doesn't work. [self.navigationController.navigationBar sendSubviewToBack:imageView]; Any idea about this ? – Viral Narshana Dec 15 '10 at 05:12
@Viral\ Narshana : The code I wrote above was not tested on my side. Please see my edit. Hope that helps. – Madhup Singh Yadav Dec 15 '10 at 05:25

how to put background image for navigation bar?

6 Answers6