UIBarButtonItem Image is not shown and instead a white rectangle in the size of image is shown, Why?

Question

With whatever image I try to intialize the UIBarButtonItem, its just showing a white background in the size of the image. Even when I tired in interface builder, the result is the same. All these images when used with other objects works perfectly.

How can I solve this??

Answer 1

Only alpha values in the image are used to create the bar button image. Whatever image you provide is converted into a image with shades of white, based on the alpha values.

So given that your image is completely white it is clear you don't have any transparency.

The guidelines have this to say:

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

You can however use a custom view to get a full-colour image as this question shows:

Can I have a UIBarButtonItem with a colored image?

This is a bit over the top though and it would be best to stick to the guidelines and use a normal button with an appropriately formatted image.

Answer 2

In ios 7 onwards this will help

UIImage *image = [[UIImage imageNamed:@"myImage.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:@selector(YOUR_METHOD:)];

Answer 3

In Swift 3 I found that the following works - here shown as an array of more than one barButtonItem

  let barButtonItem1    = UIBarButtonItem( image: UIImage(named: "myImage")?.withRenderingMode(.alwaysOriginal) , style: .plain ,target: self, action: #selector(yourAction))
  let barButtonItem2    = UIBarButtonItem(image: UIImage(named: "myImage")?.withRenderingMode(.alwaysOriginal)  , style: .plain, target: self, action: #selector(yourAction))

navigationItem.rightBarButtonItems = [barButtonItem1, barButtonItem2]

This shows x2 barButtons on the rightHandSide. To shown the left simply change to

navigationItem.leftBarButtonItem = [barButtonItem1, barButtonItem2]