How to change the unselected tabbaritem color in iOS7?

Question

Before iOS 7 I used

[[UITabBar appearance] setTintColor:[UIColor redColor]];

But now it only paint the selected item, I have read some suggestions but I can not fin how to do it, I used this too:

[self.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"openbookwp4.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"openbookwp4.png"]];

this put the icon I want, with the color I want, but only after I selected that tab for example, when I open the app the tab looks normal, but after I press the second tab and return to the first, the second tab now has the color I want. It is hard to explain without images, but I can not post images...

see if your problem is similar to my problem http://stackoverflow.com/questions/18688189/how-to-change-tab-bar-item-text-color — Priyatham51, Oct 29 '13 at 15:16

Nikos M. · Accepted Answer · 2013-10-29T15:39:37.197

19

This code works on iOS 7.

[[UITabBarItem appearance] setTitleTextAttributes:@{NSFontAttributeName : [UIFont fontWithName:@"HelveticaNeue-Bold" size:10.0f],
                                                    NSForegroundColorAttributeName : [UIColor colorWithRed:.5 green:.5 blue:.5 alpha:1]
                                                    } forState:UIControlStateNormal];

Set foreground color as you like.

To affect also the non selected tabbar icons:

[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor greenColor], UITextAttributeTextColor, nil]
                                         forState:UIControlStateNormal];

If it does not work the only way is with images for selected and unselected states:

// set selected and unselected icons
UITabBarItem *item = [self.tabBar.items objectAtIndex:0];

// this way, the icon gets rendered as it is (thus, it needs to be green in this example)
item.image = [[UIImage imageNamed:@"unselected-icon.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

// this icon is used for selected tab and it will get tinted as defined in self.tabBar.tintColor
item.selectedImage = [UIImage imageNamed:@"selected-icon.png"];

edited Oct 29 '13 at 15:39

answered Oct 29 '13 at 15:15

Nikos M.

13,685
4
47
61

4

Hi, this only change the text color, how can I change the icon color? thanks – atrik Oct 29 '13 at 15:32
Edited my answer. Hope it helps. – Nikos M. Oct 29 '13 at 15:39
2

The second snippet is deprecated on iOS7 (UITextAttributeTextColor), you can use instead [[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor greenColor]} forState:UIControlStateNormal]; – jomafer Sep 02 '14 at 15:07
Thanks! The UIImageRenderingMode.AlwaysOriginal works great on iOS 9 as well. I tried many other things with UIAppearance but nothing persisted beyond the first draw. This one does. – jyoung Feb 29 '16 at 02:27
For my use, I had to add the rendering mode to the selected image as well. – jyoung Feb 29 '16 at 03:58

score 0 · Answer 2 · answered Nov 28 '13 at 10:24

In my case the problem was that I defined the tab bar items in viewDidLoad only. If you do this, it is clear that the images are only set once the view of the corresponding tab has been loaded, but not at first (when only the first tab is selected).

My solution was to define the custom tab items in the view controller's init method, then the unselected images are visible even when the controller's view has not been loaded yet.

score 0 · Answer 3 · answered May 17 '16 at 11:27

Following on from Nikos Answer

For swift 2.* it would look like this

 UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.whiteColor()], forState:.Normal)

    UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.whiteColor()], forState:.Selected)

    let Item1 = self.items![0]
    Item.image = UIImage(named: "Icon1")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)

    let Item2 = self.items![1]
    Item2.image = UIImage(named: "Icon2")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)

    let Item3 = self.items![2]
    Item3.image = UIImage(named: "Icon3")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)

How to change the unselected tabbaritem color in iOS7?

3 Answers3

Linked