Customizing tint color of UIBarButtonSystemItem with UIAppearance API

Question

I know I can customize the UIBarButtonItem text via

setTitleTextAttributes:forState:

There is also a way to customize UITabBar icons via

setSelectedImageTintColor:

Is there a way to customize the tint color of a UIBarButtonSystemItem, (e.g. the trash icon color), just to have a consistent UX? I could not find anything.

If this is not possible, how would I proceed? Should I save a color modified version of the icon? Where can I find it? What would be the easiest way to modify it?

EDIT

To clarify, it's not the background color of the UIBarButtonItem I am asking for, but the color of the contour of the icon.

EDIT

Setting the tint color of the UIBarButtonItem yields the background color of the button set.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];


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

    UIBarButtonItem* trashButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemTrash target:nil action:nil];

    trashButton.tintColor = [UIColor blackColor];
    UIViewController* viewController = [[UIViewController alloc] init];
    UINavigationController* navController = [[UINavigationController alloc] initWithRootViewController:viewController];
    [viewController.navigationItem setRightBarButtonItem:trashButton];

    self.window.rootViewController = navController;
    return YES;
}

yields this.

EDIT 2

It turns out that the contour color of the system icons in fact can be set via tintColor property of UIBarButtonItem, however only if its style property has the value UIBarButtonItemStylePlain. (Even then, some colors are special and leave the contour white. One such color is [UIColor blackColor]) However, using the UIBarButtonItem in a UINavigationBar the style is forced to be UIBarButtonItemStyleBordered. In this case, tintColor sets the background color of the button and leaves the contour white.

As I am using the UIBarButtonItems in a navigation bar, my problem still remains unsolved.

rmaddy · Answer 1 · 2013-02-21T17:58:20.947

10

Note: The following only works for buttons added to a toolbar, not a navbar.

Use the tintColor property of UIBarButtonItem. Either call it on a specific instance or call it on the appearance for all button items.

Be careful setting the tint for all button items via appearance. Not all button items look right when you set the tint.

Update:

UIBarButtonItem *btnAdd = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(addAction)];
btnAdd.tintColor = [UIColor blackColor];

This will make the button's icon black (the background will be whatever the toolbar's tint is).

edited Feb 21 '13 at 17:58

answered Feb 21 '13 at 17:05

rmaddy

314,917
42
532
579

Thanks for the prompt answer. As I suspected, this changes the background color of the barButton. Say, my navbar is green and the button backgrounds are green, too, and I want to display black text and the `UIBarButtonSystemItem`s also black on a green background, how would I achieve that? My only problem is the black color of the `UIBarButtonSystemItem`, which by default is white and I can't modify it. – ilmiacs Feb 21 '13 at 17:12
I do this in my app. For one of the system type bar button items, I set the button's tintColor. This changes the color of the icon only. I do this for bar button items I add to a toolbar. – rmaddy Feb 21 '13 at 17:17
Just tried it and retried it and retried it. Using iOS 6.1 SDK. Setting the tint color to black I am getting a white trash can on black background. I need a black can on a green background. – ilmiacs Feb 21 '13 at 17:43
I just verified that the code I posted is correct for changing the icon's color, not the button's background. Make sure you comment out all other `UIBarButtonItem appearance` code and try just the `tintColor` on a single button. – rmaddy Feb 21 '13 at 17:52
I've updated my question with the sample app to verify. Is this code supposed to do what you say? – ilmiacs Feb 21 '13 at 17:54
1

OK, I see the issue. I've stated that my solution is for toolbars. Your updated code shows you are putting the bar button item in a navbar. I need to see if that makes a difference. – rmaddy Feb 21 '13 at 17:54
Oh... Toolbar != Navbar. I didn't specify. This is my fault. Weird if this makes a difference. – ilmiacs Feb 21 '13 at 17:59
Just tested for Toolbars. Same issue. Difference is: On toolbar I can choose `UIBarButtonItemStylePlain` which is the default. On navbar `UIBarButtonItemStyleBordered` is forced. But even for plain style, the trash can contours stay white with tint color set to black. – ilmiacs Feb 21 '13 at 18:13
Huh? You don't set a style for the system icons. See the code I posted. Now add that button item as follows: `self.toolbarItems = @[ btnAdd ];`. – rmaddy Feb 21 '13 at 18:19
What's the difference to the line `trashButton.tintColor = [UIColor blackColor];`? Isn't that the equivalent of your code? – ilmiacs Feb 21 '13 at 18:21
+1 for staying with me. See my new edit, if you are still a bit interested. Thanks. – ilmiacs Feb 21 '13 at 18:47
This worked for me on the Navbar for UIBarButtonSystemItemAdd. Thanks. – Harshad Kale Jan 18 '15 at 18:44

score 6 · Accepted Answer · answered Feb 21 '13 at 19:52

6

I have solved my problem by changing the color of the bar button system item png file in an external editor, including that image to the project and loading it via

[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"UIButtonBarTrashBlack"] style:UIBarButtonItemStyleBordered target:self action:@selector(myAction)];

I have found the internal system image using the helpful UIKit-Artwork-Extractor.

I have edited the color of the artwork using the free software GIMP.

answered Feb 21 '13 at 19:52

ilmiacs

2,566
15
20

Thank you very much for this helpful answer! This indeed seems the simplest way to do it. – Thermometer Apr 23 '13 at 07:17
Too bad that you can't set the width of the UIBarButtonItem in a UINavigationBar :( Now the button doesn't look anything like the System item. – Thermometer Apr 23 '13 at 08:20

score -1 · Answer 3 · answered Nov 15 '13 at 01:39

-1

Instead of using black color, use this:

[UIColor colorWithRed:0 green:0 blue:0 alpha:1]; // [UIColor blackColor] makes it white

answered Nov 15 '13 at 01:39

Yariv Nissim

13,273
1
38
44

Got a down with no comment? Very useful – Yariv Nissim Apr 07 '15 at 18:36

Customizing tint color of UIBarButtonSystemItem with UIAppearance API

3 Answers3

Linked