35

How come the icon info.png stays blue and don't comes with the original color of that image? I am using the following code below:

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"info.png"]
                                                                             style:UIBarButtonItemStylePlain
                                                                            target:self
                                                                            action:@selector(info:)];
4
  • You likely have the Tint color on your view controller set to the default blue. Commented Nov 10, 2014 at 23:05
  • Thats the thing, I don't set a tintcolor at all, also not on the Appdelegate.m
    – Jan
    Commented Nov 10, 2014 at 23:07
  • 1
    It's set out of the box - you have to unset it. Commented Nov 10, 2014 at 23:08
  • 1
    stackoverflow.com/a/38972264/1908892 Commented Nov 23, 2016 at 9:58

9 Answers 9

76

By default, image in UINavigationBar's bar button items is rendered using template mode. You can set it to original.

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[[UIImage imageNamed:@"info.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
                                                                         style:UIBarButtonItemStylePlain
                                                                        target:self
                                                                        action:@selector(info:)];
0
27

Swift 3:

let image : UIImage? = UIImage.init(named: "heart.png")!.withRenderingMode(.alwaysOriginal)
18

I know this is too late to answer this question but I see there is a very simple way to solve this issue instead of doing some changes in the code

using Xcode Go to the Assets --Select Image --- check Render as and select Original image instead of default property .

enter image description here

1
  • 2
    Perfect! This was the easiest solution
    – DonnaLea
    Commented Feb 5, 2020 at 17:57
9

You can it from assets as well. Go to Assets.xcassets >> Select the image that is being used as barbutton item image. Tap on attribute inspector in right side panel. Choose render as to orignial image. It will be default earlier. You will now see colored image.

1
  • This is NOT working with iOS 11 and Xcode 9.4.1. I have images that are configured in the asset catalog to render as original images, but they are still colored silhouettes on the UIToolbarView. Commented Sep 13, 2018 at 16:44
8

Swift 4:

let image = UIImage(named: "imageName")?.withRenderingMode(.alwaysOriginal)
navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(leftBarButtonPressed))
7

For Swift 2.1+ it would look like this:

let image : UIImage? = UIImage(named:"myImage.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)

or simply

let image : UIImage? = UIImage(named:"myImage.png")!.imageWithRenderingMode(.AlwaysOriginal)
2
  • Is there is any other way ? Like special type of image which do not require setting UIImageRenderingModeAlwaysOriginal ?
    – Bista
    Commented Jan 23, 2016 at 9:23
  • 1
    not afaik - its a limitation of the bar button class Commented Jan 23, 2016 at 20:22
2

Because the color of barButtonItems in your app is related to the tintColor property on the application's window.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window.tintColor = [UIColor redColor];
    return YES;
}
2
  • This will make the color red, if I set it to nil it will give back the blue color again.
    – Jan
    Commented Nov 10, 2014 at 23:12
  • 5
    Try instantiating the image like this: UIImage *image = [[UIImage imageNamed:@"myImage.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    – carlodurso
    Commented Nov 10, 2014 at 23:15
2

Ok, got it... I set the image to it's original state first.

UIImage *image = [[UIImage imageNamed:@"info.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:image
                                                                             style:UIBarButtonItemStylePlain
                                                                            target:self
                                                                            action:@selector(info:)];
1
  • This is clearly explained in Apple's document, "Toolbars": Bar Button Item Icons Any bar button in a toolbar can have a custom image instead of text. You can provide this image to your bar button item during initialization. Note that a bar button image will be automatically rendered as a template image within a toolbar, unless you explicitly set its rendering mode to UIImageRenderingModeAlwaysOriginal. For more information, see Template Images.
    – rdelmar
    Commented Nov 11, 2014 at 1:45
0

Change the bar button item tint color from the storyboard. Or color from the image in storyboard.

The color should be your expected color as hex or rgb.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.