Change tintColor of unselected UITabBarController item title and background image

Question

How can I change the tintColor of an unselected UITabBarItem title and background image iOS 8?

The default color for an unselected state is a light gray color, but it does not show on my darkish shade UITabBar background

I'd like my unselected state to have a color of [UIColor blackColor]

Inside my app delegate didfinishlaunchingwithoptions: I have

UIImage *deselectedE = [[UIImage imageNamed:@"mincraft_axe_green_32.png"] imageWithRenderingMode:UIImageRenderingModeAutomatic];
UIImage *selectedE = [[UIImage imageNamed:@"mincraft_axe_green_32.png"] imageWithRenderingMode:UIImageRenderingModeAutomatic];
e.tabBarItem =  [[UITabBarItem alloc] initWithTitle:@"Profile" image:deselectedE selectedImage:selectedE];
[[UITabBar appearance] setTintColor:[UIColor blackColor]];

in iOS 10+ and swift 3 you can do `tabBarCtrl.tabBar.unselectedItemTintColor = UIColor.gray` — Anchor, Oct 29 '16 at 05:40

SleepsOnNewspapers · Accepted Answer · 2015-07-29T15:51:29.200

47

Figured it out!

Use this to change the color of the text:

[[UITabBarItem appearance] setTitleTextAttributes:@{ NSForegroundColorAttributeName : [UIColor greenColor] }
                                         forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{ NSForegroundColorAttributeName : [UIColor blackColor] }
                                         forState:UIControlStateSelected];

And make sure that image rendering mode is set to ORIGINAL for the images

UIImage *deselectedImage = [[UIImage imageNamed:@"deselectedImage"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *selectedImage = [[UIImage imageNamed:@"selectedImage"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

edited Jul 29 '15 at 15:51

answered Oct 24 '14 at 17:24

SleepsOnNewspapers

3,353
3
23
29

6

Original images is a nice thing. Thanks for sharing. – VaporwareWolf Nov 21 '14 at 00:24
4

What if my original icon is black but I want it to be white? – Mark Buikema Jun 02 '15 at 14:02
1

I had a similar situation where, but I wanted my unselected image to be white (original image is white) and my selected image to be yellow (currently grey). I'm sure his solution above works if I was willing to alter the color of my selected image, but I wanted to use the built-in "tint color" property for the selected image. When I tried putting my selected image in the attributes inspector under Tab bar Item, it left the image blank at runtime (bug). I used this solution in my app delegate: [link] (http://stackoverflow.com/questions/26515703/set-tab-bar-item-selected-image-in-xcode-6) – Renee Olson Jul 31 '15 at 20:11
@ReneeOlson it does feel a bit hacky but it does work. Glad it helped you a bit :) – SleepsOnNewspapers Aug 01 '15 at 04:08
cannot believe you have to pre-render the tint in iOS 8. Such a step backwards! But thanks! Any way of implementing this in a Storyboard? – jowie Apr 22 '16 at 09:55
Unfortunately this is not working on iOS 13/XCode 11.x – Nithin Jan 30 '20 at 08:41

score 26 · Answer 2 · edited Dec 27 '16 at 12:48

26

In your AppDelegate.m inside of application didFinishLaunchingWithOptions: use the following code:

//unselected icon tint color 
[[UIView appearanceWhenContainedIn:[UITabBar class], nil] setTintColor:[UIColor redColor]];

//selected tint color 
[[UITabBar appearance] setTintColor:[UIColor greenColor]];

//text tint color 
[[UITabBarItem appearance] setTitleTextAttributes:@{ NSForegroundColorAttributeName : [UIColor whiteColor] }
                                     forState:UIControlStateNormal];

//background tint color 
[[UITabBar appearance] setBarTintColor:[UIColor blueColor]];

edited Dec 27 '16 at 12:48

slxl

635
1
10
23

answered Oct 24 '14 at 16:02

TheSD

873
5
17

11

Changing the unselected tint color changes back after that item has been selected then unselected. It seems that the only way to get the unselected state to be the color you want is by using your own image. You can see how to do that here: http://stackoverflow.com/a/19662170/4114683 – TheSD Oct 24 '14 at 17:31
I tried and found out that you can also use `[[UIButton appearance] setTintColor:[UIColor greenColor]];` to keep consistency between selected tab bar items and button labels in iOS 7/8 (e.g. like the Music app) – Nicolas Miari Jan 06 '15 at 02:56
Work like a charm. Thanks! – Vladislav Kovalyov Dec 11 '15 at 10:10
Unfortunately, this has been deprecated in later versions. – Totoro Feb 21 '17 at 21:30
[[UIView appearanceWhenContainedIn:[UITabBar class], nil] setTintColor:[UIColor redColor]]; is not only deprecated but it doesn't work. – coolcool1994 Oct 25 '17 at 07:01

Bhavuk Jain · Answer 3 · 2016-09-29T15:09:51.093

14

You can also render the image as original from the attributes inspector for the asset file without writing any code

edited Sep 29 '16 at 15:09

answered Jun 05 '16 at 19:54

Bhavuk Jain

2,167
1
15
23

1

It's not from the storyboard, but from the Attributes Inspector for the asset file. Other than that, this is the best answer here. – Marmoy Aug 19 '16 at 10:18

score 0 · Answer 4 · edited May 23 '17 at 12:02

You can also set it up directly in Storyboard... Check my answer here: How to set UITabBarItem's unselected tint, ***including system items*** (iOS7)

If you're using Storyboard you can also set both Image for Bar Item and Selected Image for Selected Bar Item to get unaltered image in tabBar.

Alternatively in Assets catalog, you can select Render As: Original Image in the attributes of your image (View > Utilities > Show Attributes Inspector or shortcut ⌥⌘4 (Option + Command + 4))

Change tintColor of unselected UITabBarController item title and background image

4 Answers4

Linked