iOS 7 UIBarButton back button arrow color

Question

I'm trying to change the back button arrow

enter image description here

I'm currently using the following to control the text size as well as the text color on the back button:

[[UIBarButtonItem appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys: [UIColor whiteColor], UITextAttributeTextColor, [UIFont boldSystemFontOfSize:16.0f], UITextAttributeFont, [UIColor darkGrayColor], UITextAttributeTextShadowColor, [NSValue valueWithCGSize:CGSizeMake(0.0, -1.0)], UITextAttributeTextShadowOffset, nil] forState:UIControlStateNormal];

but if I want to change only the arrow's color for the back button, what should i do?

Have you found any solution to change arrow's color for the back button? — OnkarK
– OnkarK, Commented Aug 26, 2013 at 10:51
@OMK I ended up changing my infolistproperty NavBarColor to get it to work and then set the actual navbarcolor to a different color. I'm not sure what was going on, but that solution worked for me — kevinl
– kevinl, Commented Aug 26, 2013 at 14:58
Behavior from some of the properties of UINavigationBar has changed from iOS 7. Take a look at the Answer to see the effect of some other Properties also. — Bhavin
– Bhavin, Commented Oct 3, 2013 at 14:12
please help with this problem: stackoverflow.com/questions/29923813/… — kresa
– kresa, Commented May 8, 2015 at 14:06

DiscDev · Accepted Answer · 2014-12-30 19:50:17Z

436

To change the back button chevron color for a specific navigation controller*:

self.navigationController.navigationBar.tintColor = [UIColor whiteColor];

*If you are using an app with more than 1 navigation controller, and you want this chevron color to apply to each, you may want to use the appearance proxy to set the back button chevron for every navigation controller, as follows:

[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

And for good measure, in swift (thanks to Jay Mayu in the comments):

UINavigationBar.appearance().tintColor = UIColor.whiteColor()

edited Dec 30, 2014 at 19:50

answered Sep 15, 2013 at 6:08

DiscDev

39.1k20 gold badges124 silver badges134 bronze badges

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

13 Comments

Kyle Clegg Over a year ago

This will only apply throughout the entire app if you are using the same navigation controller for your entire app. I actually recommend Bart's suggestion.

DiscDev Over a year ago

I updated my answer with a note about multiple navigation controllers. I still do not agree that Bart's suggestion is the "correct" answer, because there are lots of other side-effects when you set the tint color of the entire app. Plus, the original question did not ask how to theme the entire app, it was only asking how to theme the back button.

jcampbell1 Over a year ago

This doesn't seem to set the color of the back chevron.

DiscDev Over a year ago

@jcampbell1 - I'm using this in several of my apps successfully...perhaps you didn't read the caveat about multiple UINavigationControllers.

Jaya Mayu Over a year ago

for swift UINavigationBar.appearance().tintColor = UIColor.whiteColor()

|

Bart van Kuik · Accepted Answer · 2016-09-29 07:40:05Z

57

You have to set the tintColor of the entire app.

self.window.tintColor = [UIColor redColor];

Or in Swift 3:

self.window?.tintColor = UIColor.blue

Source: iOS 7 UI Transition Guide

edited Sep 29, 2016 at 7:40

answered Aug 28, 2013 at 12:12

Bart van Kuik

4,8521 gold badge41 silver badges61 bronze badges

5 Comments

DiscDev Over a year ago

If you only want to set the color of the back button chevron (and not the entire app), as stated in the original question, this is the wrong answer. See my answer here for the correct answer: stackoverflow.com/a/18809412/1103584

Marc Watson Over a year ago

I used this in my app delegate to change my back buttons to black. Place in the applicationDidFinishLaunchingWithOptions method... window.tintColor = [UIColor blackColor];

Gavjr Over a year ago

This can't work on iOS 6. Somebody knows what to do ?

Mike Lambert Over a year ago

This caused it to affect the tintColor of the entire app, which includes any UIActivityViewController (for sharing) and the MFMailComposeViewController (for sending email). Those dialogs assume the tintColor hasn't been modified with....and can result in some ugly color interactions.

Hunter Monk Over a year ago

This changes the tint color of many other objects, such as the blinking cursor in UITextField. Definitely not recommended.

David Castro · Accepted Answer · 2013-09-18 22:53:30Z

You can set the color on the entire app navigation's bar using the method

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions: (NSDictionary *)launchOptions{ [[UINavigationBar appearance] setTintColor:[UIColor whiteColor]]; }

selma.suvalija · Accepted Answer · 2013-09-19 11:08:32Z

22

It is possible to change only arrow's color (not back button title's color) on this way:

[[self.navigationController.navigationBar.subviews lastObject] setTintColor:[UIColor blackColor]];

Navigation bar contains subview of _UINavigationBarBackIndicatorView type (last item in subviews array) which represents arrow.

Result is navigation bar with different colors of back button arrow and back button title

answered Sep 19, 2013 at 11:08

selma.suvalija

6659 silver badges14 bronze badges

4 Comments

Glenn Maynard Over a year ago

Depending on the order of subviews of system views is a bad idea.

Rich Fox Over a year ago

this worked, when setting self.navigationController.navigationBar.tintColor did not work.

Evan R Over a year ago

@GlennMaynard You're right—the best way to implement this would be to iterate through the array of subviews returned by self.navigationController.navigationBar.subviews until the back button is found.

jungledev Over a year ago

@EvanR while selmad's solution did work for me, iterating through the array of subviews did not (which I tried first because I agree with you that it would be wise to do so). If it works for you- please add an example. Thanks.

ThE uSeFuL · Accepted Answer · 2015-07-27 05:28:44Z

22

If you are using storyboards you could set the navigation bar tint colour.

answered Jul 27, 2015 at 5:28

ThE uSeFuL

1,5481 gold badge16 silver badges32 bronze badges

Comments

John Riselvato · Accepted Answer · 2013-10-03 13:49:26Z

Inside the rootViewController that initializes the navigationController, I put this code inside my viewDidAppear method:

//set back button color [[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor,nil] forState:UIControlStateNormal]; //set back button arrow color [self.navigationController.navigationBar setTintColor:[UIColor whiteColor]];

UITextAttributeTextColor is deprecated in iOS 7 - use NSForegroundColorAttributeName

Chamath Jeevan · Accepted Answer · 2013-09-10 09:31:45Z

In iOS 6, tintColor tinted the background of navigation bars, tab bars, toolbars, search bars, and scope bars. To tint a bar background in iOS 7, use the barTintColor property instead.

iOS 7 Design Resources iOS 7 UI Transition Guide

This is the one! ... put it in the app delegate. Works like a charm! window.tintColor = [UIColor blackColor]; // I wanted black

Mike Weller · Accepted Answer · 2013-08-22 15:22:34Z

6

You can set the tintColor property on the button (or bar button item) or the view controller's view. By default, the property will inherit the tint from the parent view, all the way up to the top level UIWindow of your app.

answered Aug 22, 2013 at 15:22

Mike Weller

45.6k15 gold badges135 silver badges154 bronze badges

2 Comments

kevinl Over a year ago

thanks for the response. However, it works a little differently on iOS 7. My old code was using tintColor, but iOS 7 doesn't seem to like it all that much. I ended up using the official Apple Dev iOS 7 transition guide to fix some of the UI issues

DiscDev Over a year ago

See my answer for a discrete example of how to do this: stackoverflow.com/a/18809412/1103584

Robert · Accepted Answer · 2013-11-14 12:01:10Z

I had to use both:

[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor,nil] forState:UIControlStateNormal]; [[self.navigationController.navigationBar.subviews lastObject] setTintColor:[UIColor whiteColor]];

And works for me, thank you for everyone!

MD SHAHIDUL ISLAM · Accepted Answer · 2014-08-27 03:54:01Z

UINavigationBar *nbar = self.navigationController.navigationBar; if (floor(NSFoundationVersionNumber) > NSFoundationVersionNumber_iOS_6_1) { //iOS 7 nbar.barTintColor = [UIColor blueColor]; // bar color //or custom color //[UIColor colorWithRed:19.0/255.0 green:86.0/255.0 blue:138.0/255.0 alpha:1]; nbar.navigationBar.translucent = NO; nbar.tintColor = [UIColor blueColor]; //bar button item color } else { //ios 4,5,6 nbar.tintColor = [UIColor whiteColor]; //or custom color //[UIColor colorWithRed:19.0/255.0 green:86.0/255.0 blue:138.0/255.0 alpha:1]; }

Ricardo Mutti · Accepted Answer · 2017-11-24 18:21:41Z

Update Swift 3

navigationController?.navigationItem.rightBarButtonItem?.tintColor = UIColor.yellow navigationController?.navigationBar.tintColor = UIColor.red navigationController?.navigationBar.barTintColor = UIColor.gray navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.blue]

Result:

chx · Accepted Answer · 2014-02-20 08:22:40Z

3

Just to change the NavigationBar color you can set the tint color like below.

[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

edited Feb 20, 2014 at 8:22

chx

11.9k8 gold badges65 silver badges145 bronze badges

answered Oct 24, 2013 at 3:45

Khash Nejad

613 bronze badges

1 Comment

bachonk Over a year ago

This won't affect the tint color in iOS 7. According to the docs: "Setting the tintColor property by using the appearance proxy APIs is not supported in iOS 7." link

Eugene Braginets · Accepted Answer · 2014-08-18 10:22:48Z

In case you're making custom back button basing on UIButton with image of arrow, here is the subclass snippet. Using it you can either create button in code or just assign class in Interface Builder to any UIButton. Back Arrow Image will be added automatically and colored with text color.

@interface UIImage (TintColor) - (UIImage *)imageWithOverlayColor:(UIColor *)color; @end @implementation UIImage (TintColor) - (UIImage *)imageWithOverlayColor:(UIColor *)color { CGRect rect = CGRectMake(0.0f, 0.0f, self.size.width, self.size.height); if (UIGraphicsBeginImageContextWithOptions) { CGFloat imageScale = 1.0f; if ([self respondsToSelector:@selector(scale)]) imageScale = self.scale; UIGraphicsBeginImageContextWithOptions(self.size, NO, imageScale); } else { UIGraphicsBeginImageContext(self.size); } [self drawInRect:rect]; CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetBlendMode(context, kCGBlendModeSourceIn); CGContextSetFillColorWithColor(context, color.CGColor); CGContextFillRect(context, rect); UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return image; } @end #import "iOS7backButton.h" @implementation iOS7BackButton -(void)awakeFromNib { [super awakeFromNib]; BOOL is6=([[[UIDevice currentDevice] systemVersion] floatValue] <7); UIImage *backBtnImage = [[UIImage imageNamed:@"backArrow"] imageWithOverlayColor:self.titleLabel.textColor]; [self setImage:backBtnImage forState:UIControlStateNormal]; [self setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)]; [self setImageEdgeInsets:UIEdgeInsetsMake(0, is6?0:-10, 0, 0)]; } + (UIButton*) buttonWithTitle:(NSString*)btnTitle andTintColor:(UIColor*)color { BOOL is6=([[[UIDevice currentDevice] systemVersion] floatValue] <7); UIButton *backBtn=[[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 30)]; UIImage *backBtnImage = [[UIImage imageNamed:@"backArrow"] imageWithOverlayColor:color]; [backBtn setImage:backBtnImage forState:UIControlStateNormal]; [backBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, is6?5:-5, 0, 0)]; [backBtn setImageEdgeInsets:UIEdgeInsetsMake(0, is6?0:-10, 0, 0)]; [backBtn setTitle:btnTitle forState:UIControlStateNormal]; [backBtn setTitleColor:color /*#007aff*/ forState:UIControlStateNormal]; return backBtn; } @end

back button image@2x

orkenstein · Accepted Answer · 2014-09-24 12:11:42Z

3

If you want to change only the Back Arrow BUT on the entire app, do this:

[[NSClassFromString(@"_UINavigationBarBackIndicatorView") appearance] setTintColor:[UIColor colorWithHexString: @"#f00000"]];

answered Sep 24, 2014 at 12:11

orkenstein

2,8784 gold badges26 silver badges45 bronze badges

7 Comments

Luke Over a year ago

Theres a chance this would get you rejected from the app store

orkenstein Over a year ago

@Luke, I've successfully used it several times. No rejections. But, yep, chance still exist.

Lope Over a year ago

It is still likely it will get broken in future iOS version

orkenstein Over a year ago

@Lope, yes, why not. I'm not looking for silver bullet.

arlomedia Over a year ago

Iterating through the subviews on iOS 10.1 shows that that is still the class name, but setting its appearance as shown here is having no effect for me.

|

eritbh · Accepted Answer · 2014-02-18 14:11:32Z

In iOS 7, you can put the following line of code inside application:didFinishLaunchingWithOptions: in your AppDelegate.m file:

[[UINavigationBar appearance] setTintColor:myColor];

Set myColor to the color you want the back button to be throughout the entire app. No need to put it in every file.

AbhinayMe · Accepted Answer · 2016-03-22 18:02:51Z

Swift 2.0: Coloring Navigation Bar & buttons

navigationController?.navigationBar.barTintColor = UIColor.blueColor() navigationController?.navigationBar.tintColor = UIColor.whiteColor() navigationController!.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.whiteColor()]

Dilip Jangid · Accepted Answer · 2017-05-31 06:07:14Z

In swift 3 , to change UIBarButton back button arrow color

self.navigationController?.navigationBar.tintColor = UIColor.black

Collectives™ on Stack Overflow

iOS 7 UIBarButton back button arrow color

17 Answers 17

13 Comments

5 Comments

Comments

4 Comments

Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

Comments

7 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

13 Comments

5 Comments

Comments

4 Comments

Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

Comments

7 Comments

Comments

Comments

Comments

Linked

Related