Custom image for UINavigation Back Button in iOS 7

Question

I have a custom UIBarButtonItem with an image that works fine in iOS 6.1. But iOS 7 has a tintColor and it overlays this color over my image. If I set the tintColor to [UIColor clearColor] the button doesn't show up all together.

How can I have my back button show up in iOS 7 as it does in iOS 6? Please help?

Solution 1

Try to set UIBarButtonItem like this way in ios7:-

UIImage *temp = [[UIImage imageNamed:@"theImage"] imageWithRenderingMode: UIImageRenderingModeAlwaysOriginal];    
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithImage:temp style:UIBarButtonItemStyleBordered target:self action:@selector(action)];

Here is an original post in apple Dev center discussion Forums

For supporting both version iOS7 as well as lower then you check system-version and set code like:-

UIImage *temp=nil;

if([[[UIDevice currentDevice] systemVersion] floatValue] < 7.0)
{ 
    temp = [UIImage imageNamed:@"btn-back.png"]; 
}
else
{ 
    temp = [[UIImage imageNamed:@"btn-back.png"] imageWithRenderingMode: UIImageRenderingModeAlwaysOriginal];
 }

Solution 2

You should use appearance on UINavigationBar to globally set the custom back button.

[UINavigationBar appearance].backIndicatorImage = customBackButton;
[UINavigationBar appearance].backIndicatorTransitionMaskImage = customBackButton;

Solution 3

The following seems to make a bit more sense for people who don't want to mess with the existing target action, etc. Just copy and paste. Also this forces iOS to use your image with all of its flairs -- as opposed to simply using a template/impression of the image.

- (void)setCustomNavigationBackButton
{
    UIImage *backBtn = [UIImage imageNamed:@"arrow"];
    backBtn = [backBtn imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.navigationItem.backBarButtonItem.title=@"";
    self.navigationController.navigationBar.backIndicatorImage = backBtn;
    self.navigationController.navigationBar.backIndicatorTransitionMaskImage = backBtn;
}

arrow is the name of your image.

Solution 4

swift version:

var backBtn = UIImage(named: "return_menu")
backBtn = backBtn?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)

self.navigationController!.navigationBar.backIndicatorImage = backBtn;
self.navigationController!.navigationBar.backIndicatorTransitionMaskImage = backBtn;

Solution 5

Try it this way:

self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"" style:UIBarButtonItemStyleBordered target:nil action:nil];
self.navigationController.navigationBar.backIndicatorImage = [UIImage imageNamed:@"yourImageName.png"];
self.navigationController.navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:@"yourImageName.png"];

This will create an image mask in the global tint colour which will give you your own custom icon. Does not work for colour images.

View more solutions

Comments

[Majid]

Thank you, this works. However UIImageRenderingModeAlwaysOriginal doesn't work in iOS 6, I had to make a check for the iOS version. UIImage *backImage = nil; if([[[UIDevice currentDevice] systemVersion] floatValue] < 7.0){ backImage = [UIImage imageNamed:@"btn-back.png"]; }else{ backImage = [[UIImage imageNamed:@"btn-back.png"] imageWithRenderingMode: UIImageRenderingModeAlwaysOriginal]; }

[Nitin Gohel]

thank you i just edit my answer for supporting both Version to help's other they stuck with same issue.

[Michael]

also a minor thing, you should drop the .png in your images. that way ios can pick up retina and non retina images, or device specific images as well.

[christopherdrum]

I believe respondsToSelector: would be more appropriate in this case. UIImage *temp = [UIImage imageNamed:@"btn-back.png"]; if ([temp respondsToSelector:@selector(imageWithRenderingMode:)]) { temp = [temp imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; }

[John Stack]

UIBarButtonItemStyleBordered is deprecated in iOS8.x. Use UIBarButtonItemStylePlain.

[Scar]

I would like to add that customBackButton image should use imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal, like this [[UIImage imageNamed:@"imageName"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; so it can show the color of the image.

[Eugene Braginets]

Not valid for iOS 9: no backIndicatorImage

[Eugene Braginets]

@Sebastian You are right, fixed and forgot about that. Likely had typo there and autocompletion didn't work. Thanks for noting that!

[Henrique da Costa]

It was not working until I added "imageWithRenderingMode"...thanks!

[Nike Kov]

How to remove title in all back button when appearance?

[Thomas Corriol]

Xcode/Swift don't seem to know about these as they don't show in autocomplete, it compiles and runs though.