How to add custom image in navigation bar button item?

Question

 UIBarButtonItem *doneitem=[[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(donePressed:)]autorelease];
    self.navigationItem.rightBarButtonItem=doneitem;

This is the code of my app, I need to add a image on this button ?

Please help me.

score 80 · Accepted Answer · answered May 09 '11 at 07:27

80

Try this code:

UIImage* image3 = [UIImage imageNamed:@"mail-48_24.png"];
CGRect frameimg = CGRectMake(0, 0, image3.size.width, image3.size.height);
UIButton *someButton = [[UIButton alloc] initWithFrame:frameimg];
[someButton setBackgroundImage:image3 forState:UIControlStateNormal];
[someButton addTarget:self action:@selector(sendmail)
     forControlEvents:UIControlEventTouchUpInside];
[someButton setShowsTouchWhenHighlighted:YES];

UIBarButtonItem *mailbutton =[[UIBarButtonItem alloc] initWithCustomView:someButton];
self.navigationItem.rightBarButtonItem=mailbutton;
[someButton release];

answered May 09 '11 at 07:27

Aman Aggarwal

3,754
1
19
26

1

IT works great but when i click on the Button app is crash and simulator quit suddenly. – M Faheem Rajput May 09 '11 at 08:17
How can I do it and dont lose the Segue action defined to the Button in the storyboard? – Renato Lochetti Aug 02 '13 at 13:31
Renato: Give the segue a name and call `[self performSegueWithIdentifier:@"yourSegueName" sender:self];` in the button's target action. – lari Aug 06 '13 at 12:20

Gurpreet Singh · Answer 2 · 2012-06-19T10:16:48.887

54

 UIBarButtonItem *_btn=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"XXXXXXX.png"] 
                                                  style:UIBarButtonItemStylePlain 
                                                  target:self 
                                                  action:@selector(yourMethod)];

self.navigationItem.rightBarButtonItem=_btn;

edited Jun 19 '12 at 10:16

answered Jun 16 '12 at 11:11

Gurpreet Singh

1,179
12
5

1

Just need measures Button – oscar castellon Feb 28 '14 at 22:19
Totally agree with @onmyway133. Really simple and helpful answer. – lerp90 Oct 21 '15 at 13:35
true, this makes thing a lot easier. – Natasha Aug 04 '17 at 08:52

score 6 · Answer 3 · answered May 09 '11 at 07:39

Please try this code :

UIButton *btnNext1 =[[UIButton alloc] init];
[btnNext1 setBackgroundImage:[UIImage imageNamed:@"btnNext.png"] forState:UIControlStateNormal];

btnNext1.frame = CGRectMake(100, 100, 50, 30);
UIBarButtonItem *btnNext =[[UIBarButtonItem alloc] initWithCustomView:btnNext1];
[btnNext1 addTarget:self action:@selector(nextButtonClicked) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.rightBarButtonItem = btnNext;

score 5 · Answer 4 · answered Nov 20 '14 at 12:15

In case anyone needs Swift code for accepted answer:

let infoImage = UIImage(named: "my-icon-32.png")
let imgWidth = infoImage?.size.width
let imgHeight = infoImage?.size.height
let button:UIButton = UIButton(frame: CGRect(x: 0,y: 0,width: imgWidth!, height: imgHeight!))
button.setBackgroundImage(infoImage, forState: .Normal)
button.addTarget(self, action: Selector("openInfo"), forControlEvents: UIControlEvents.TouchUpInside)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)

P.S. Gurpreet Singh answer is working only for transparent PNG also I have to set button tintcolor other than clearColor.

score 5 · Answer 5 · answered May 09 '11 at 07:38

5

UIButton *urButton = [UIButton buttonWithType:UIButtonTypeCustom];
urButton.frame = urRequiredFrame;
[urButton setImage:urImage forState:UIControlStateNormal];
[urButton addTarget:self action:@selector(donePressed:)
     forControlEvents:UIControlEventTouchUpInside];

UIBarButtonItem *doneButton =[[UIBarButtonItem alloc] initWithCustomView:urButton];
self.navigationItem.rightBarButtonItem=doneButton;

answered May 09 '11 at 07:38

visakh7

26,380
8
55
69

urRequiredFrame is the frame you want the button to be in and urImage is the the image u want as the image for the button – visakh7 May 09 '11 at 08:28

score 4 · Answer 6 · edited Dec 13 '18 at 09:10

4

In Swift

Other solution using withRenderingMode(UIImage.RenderingMode.alwaysOriginal) method below:

let img = UIImage(named: "picture")!.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
let leftBarButtonItem = UIBarButtonItem(image: img, style: UIBarButtonItem.Style.plain, target: self, action: nil)
self.navigationItem.leftBarButtonItem = leftBarButtonItem

edited Dec 13 '18 at 09:10

WINSergey

1,977
27
39

answered Jul 05 '15 at 21:01

King-Wizard

15,628
6
82
76

score 3 · Answer 7 · answered Aug 09 '15 at 17:52

Here's what works for me. I found 30x30 to be a good size for the button in the nav bar. The UIImage scales to the button size automatically.

UIImage *image = [UIImage imageNamed:@"XXXXXXXXXX"];
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
[button setBackgroundImage:image forState:UIControlStateNormal];
[button addTarget:self action:@selector(someAction) forControlEvents:UIControlEventTouchUpInside];
button.adjustsImageWhenHighlighted = NO;
UIBarButtonItem *rightButton =[[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.rightBarButtonItem = rightButton;

score 0 · Answer 8 · answered Nov 04 '14 at 05:30

One simple way :

UIImage* customImg = [UIImage imageNamed:@"custom-img.png"];

UIBarButtonItem *_customButton = [[UIBarButtonItem alloc] initWithImage:customImg style:UIBarButtonItemStyleDone target:nil action:nil];

self.navigationItem.rightBarButtonItems = [[NSArray alloc] initWithObjects:_customButton, nil];

Then if you need more than one button you can just and an other UIBarButtonItem to initWithObjects.

score 0 · Answer 9 · answered Apr 08 '15 at 14:50

0

Do this. It's way more simple.

Put the image file in your project directory
Add the file into Xcode (Right click on the Xcode project, add files to "Project Name")
Select your UIBarButtonItem in Storyboard
Click on "Image" and find your image (See Screenshot)
Celebrate, because it will work perfectly and it requires no unnecessary code.

enter image description here

answered Apr 08 '15 at 14:50

Michael

9,639
3
64
69

2

I did this and my image is showing a flat blue rectangle not the image I selected from my project. Any ideas? – ammianus Jul 23 '17 at 17:00
2

To answer my own comment, I did not have alpha correctly set up in the .png image file, I had to modify it with GIMP to set white color to alpha. – ammianus Jul 23 '17 at 17:24
how do you provide two separate images this way for selected/unselected states – danchik Sep 01 '17 at 21:31

score 0 · Answer 10 · edited May 23 '17 at 12:34

To pick up on the answer by Gurpreet Singh. To keep the current status of an already existing button re-use the target and action.

SEL selector = self.navigationItem.rightBarButtonItem.action;
id target = self.navigationItem.rightBarButtonItem.target;
UIBarButtonItem *_btn=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"icon_close.png"]
                                                      style:UIBarButtonItemStylePlain
                                                     target:target
                                                     action:selector];

self.navigationItem.rightBarButtonItem = _btn;

score 0 · Answer 11 · answered Jan 06 '16 at 11:25

   let sliderImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 30))
    sliderImageView.contentMode = .ScaleAspectFit
    sliderImageView.image = UIImage(named: "sliderMenu")

    OR

    var sliderImage = UIImage(named: "sliderMenu")
    navigationItem.leftBarButtonItem?.image = sliderImage

score 0 · Answer 12 · answered May 09 '11 at 07:29

0

[doneItem setImage:[UIImage imageNamed:@"yourImage.png"] forState:UIControlStateNormal];

answered May 09 '11 at 07:29

Praveen S

10,355
2
43
69

How to add custom image in navigation bar button item?

12 Answers12

Linked