Can I have a UIBarButtonItem with a colored image?

Question

I have an image that I want to display on a UIBarButtonItem, but for some reason it only shows the outline of it and the rest is all white. How can I have it actually display the image?

Thanks!

MANIAK_dobrii · Answer 1 · 2020-05-12T13:48:55.787

There's other iOS7+ solution:

NSString *iconFilename = // ...
UIImage *image = 
    [[UIImage imageNamed:iconFilename] 
        imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIBarButtonItem *barButtonItem = 
    [[UIBarButtonItem alloc] initWithImage:image
                                     style:UIBarButtonItemStylePlain 
                                    target:self 
                                    action:@selector(onBarButtonItemTapped:)];

Swift 5:

let iconFilename: String = // ...
let image = UIImage(named: iconFilename)?.withRenderingMode(.alwaysOriginal)
let barButtonItem = UIBarButtonItem(image: image, 
                                    style: .plain, 
                                    target: self, 
                                    action: #selector(onBarButtonItemTapped(_:)))

Extract from UIImage.h:

... navigation bars, tab bars, toolbars, and segmented controls automatically treat their foreground images as templates ... You can use UIImageRenderingModeAlwaysTemplate to force your image to always be rendered as a template or UIImageRenderingModeAlwaysOriginal to force your image to always be rendered as an original.

@Apfelsaft - it probably would be, if iOS 7 existed in 2009, when the question was asked :) I've edited the accepted answer to link to this one. — ToolmakerSteve, Mar 23 '17 at 03:28

score 65 · Accepted Answer · edited May 23 '17 at 11:33

65

UPDATE: See MANIAK_dobrii's answer for an easier solution, available in iOS 7+.

Here is how I use an image for a UIBarButtonItem:

UIImage *image = [UIImage imageNamed:@"buttonImage.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.bounds = CGRectMake( 0, 0, image.size.width, image.size.height );    
[button setImage:image forState:UIControlStateNormal];
[button addTarget:myTarget action:@selector(myAction) forControlEvents:UIControlEventTouchUpInside];    
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
…

edited May 23 '17 at 11:33

Community

1
1

answered Dec 02 '09 at 19:44

amrox

6,207
3
36
57

If you want a title on your button you might want to change the setImage line to setBackgroundImage. If not, then the above code works just fine. – rein Dec 02 '09 at 20:11
3

Don't forget `button.showsTouchWhenHighlighted = YES` so the button glows when tapped like a standard UIBarButtonItem. – dvs Dec 19 '11 at 03:35
1

any idea how to make the image white, just like the toolbar? – Rafael Sanches Mar 30 '12 at 18:18
Old question, I know, but I'm using this and I have the issue of the button not being easily pressed: The click area for a stock UIBarButtonItem extends pretty much to the top of the toolbar, but when using a custom View, it is only a small 20x20 area – StaRbUck42 Apr 22 '14 at 10:28
what is `myTarget` and `myAction`? – guest Aug 26 '14 at 23:24
3

Use the answer by @MANIAK_dobrii. No need for custom view, by far the better answer. – horsejockey Feb 10 '15 at 23:07
1

@StaRbUck42 Try increasing the UIButton's height to match height of toolbar instead of height of image. That worked for me. – jk7 Nov 17 '16 at 22:59

score 47 · Answer 3 · answered May 14 '16 at 10:08

There is another way that does not involve coding at all.

First, place the images you want to put on the bar on the Assets.xcassets document.

Select the image on the assets browser.

Open the Attributes inspector for that image on the right vertical toolbar.

On "Render As" select "Original Image".

Even though on the storyboard the buttons will continue to be painted with the tint color, when running on the simulator the original image will be shown.

The default rendering mode for an image varies from one UI control to the other. If you set this parameter on the attributes inspector, though, you can force that an image will be always represented with a specific rendering mode.

If you need the same image to be represented with different rendering modes on different controllers, then the response from MANIAK_dobrii is more appropriate.

Thank you, this is MUCH cleaner – ekscrypto Jan 17 '18 at 16:21 — ekscrypto, Jan 17 '18 at 16:21
Phenomenal. This is great! – Alex Nguyen Jul 31 '18 at 18:11 — Alex Nguyen, Jul 31 '18 at 18:11
This should be the answer. Thank you! – Sebin Roy Aug 29 '20 at 06:39 — Sebin Roy, Aug 29 '20 at 06:39

score 11 · Answer 4 · answered Dec 09 '16 at 09:31

11

In Swift 3:

let iconname = // ...
let image = UIImage(named: iconname)?.withRenderingMode(.alwaysOriginal)
let barButtonItem = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(self. onBarButtonItemTapped))
self.navigationItem.leftBarButtonItem = barButtonItem

answered Dec 09 '16 at 09:31

Kaptain

1,358
12
20

Also works with UIButton and multi color image ! Thank you ! – pw2 Oct 11 '18 at 09:23

score 7 · Answer 5 · edited Oct 16 '11 at 19:20

Nope. As you can read in the Human Interface Guidelines

After you’ve decided on the appearance of your icon, follow these guidelines as you create it:

Use the PNG format. Use pure white with appropriate alpha. Do not include a drop shadow. Use anti-aliasing. If you decide to add a bevel, be sure that it is 90° (to help you do this, imagine a light source positioned at the top of the icon). For toolbar and navigation bar icons, create an icon that measures about 20 x 20 pixels. For tab bar icons, create an icon that measures about 30 x 30 pixels.

Note: The icon you provide for toolbars, navigation bars, and tab bars is used as a mask to create the icon you see in your application. It is not necessary to create a full-color icon.

Can I have a UIBarButtonItem with a colored image?

5 Answers5

Linked