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.

Aman Aggarwal · Accepted Answer · 2011-05-09 07:27:31Z

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 9, 2011 at 7:27

Aman Aggarwal

3,7541 gold badge21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

M Faheem Rajput Over a year ago

IT works great but when i click on the Button app is crash and simulator quit suddenly.

Renato Lochetti Over a year ago

How can I do it and dont lose the Segue action defined to the Button in the storyboard?

lari Over a year ago

Renato: Give the segue a name and call [self performSegueWithIdentifier:@"yourSegueName" sender:self]; in the button's target action.

Gurpreet Singh · Accepted Answer · 2012-06-19 10:16:48Z

54

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

self.navigationItem.rightBarButtonItem=_btn;

edited Jun 19, 2012 at 10:16

answered Jun 16, 2012 at 11:11

Gurpreet Singh

1,17912 silver badges5 bronze badges

3 Comments

oscar castellon Over a year ago

Just need measures Button

lerp90 Over a year ago

Totally agree with @onmyway133. Really simple and helpful answer.

Natasha Over a year ago

true, this makes thing a lot easier.

Mitesh Khatri · Accepted Answer · 2011-05-09 07:39:24Z

6

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;

answered May 9, 2011 at 7:39

Mitesh Khatri

3,9555 gold badges46 silver badges67 bronze badges

Comments

visakh7 · Accepted Answer · 2011-05-09 07:38:15Z

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 9, 2011 at 7:38

visakh7

26.4k8 gold badges57 silver badges69 bronze badges

1 Comment

visakh7 Over a year ago

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

Aks · Accepted Answer · 2014-11-20 12:15:08Z

5

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.

answered Nov 20, 2014 at 12:15

Aks

8,3215 gold badges40 silver badges39 bronze badges

Comments

WINSergey · Accepted Answer · 2018-12-13 09:10:53Z

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, 2018 at 9:10

WINSergey

2,02529 silver badges41 bronze badges

answered Jul 5, 2015 at 21:01

King-Wizard

15.7k6 gold badges87 silver badges76 bronze badges

Comments

waffles · Accepted Answer · 2015-08-09 17:52:45Z

3

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;

answered Aug 9, 2015 at 17:52

waffles

1,40613 silver badges19 bronze badges

Comments

Praveen S · Accepted Answer · 2011-05-09 07:29:16Z

0

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

answered May 9, 2011 at 7:29

Praveen S

10.4k2 gold badges45 silver badges69 bronze badges

Comments

lapin · Accepted Answer · 2014-11-04 05:30:01Z

0

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.

answered Nov 4, 2014 at 5:30

lapin

2,1583 gold badges22 silver badges32 bronze badges

Comments

Michael · Accepted Answer · 2015-04-08 14:50:51Z

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 8, 2015 at 14:50

Michael

9,9443 gold badges67 silver badges69 bronze badges

3 Comments

ammianus Over a year ago

I did this and my image is showing a flat blue rectangle not the image I selected from my project. Any ideas?

ammianus Over a year ago

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.

danchik Over a year ago

how do you provide two separate images this way for selected/unselected states

Community · Accepted Answer · 2017-05-23 12:34:39Z

0

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;

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jun 26, 2015 at 14:40

limfinity

7466 silver badges17 bronze badges

Comments

Alvin George · Accepted Answer · 2016-01-06 11:25:27Z

0

   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

answered Jan 6, 2016 at 11:25

Alvin George

14.3k95 silver badges64 bronze badges

Collectives™ on Stack Overflow

How to add custom image in navigation bar button item?

12 Answers 12

3 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

3 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related