How can I change the text and icon colors for tabBarItems in iOS 7?

Question

How can I change the text and icon colors for UITabBar and UITabBarItems in iOS 7? The default gray text seems dim and hard to read for unselected tabbar items.

Answer 1

There are two things you need to do for this:

1) If you want to customize the TabBar itself, you need to set the barTintColor for the tabBarController:

    // this will generate a black tab bar
    tabBarController.tabBar.barTintColor = [UIColor blackColor];

    // this will give selected icons and text your apps tint color
    tabBarController.tabBar.tintColor = appTintColor;  // appTintColor is a UIColor *

2) Set the tabBarItem text appearance for each state that you want to override:

[[UITabBarItem appearance] setTitleTextAttributes:@{NSFontAttributeName : [UIFont fontWithName:@"HelveticaNeue-Bold" size:10.0f],
                                                    NSForegroundColorAttributeName : appTintColor
                                                    } forState:UIControlStateSelected];


// doing this results in an easier to read unselected state then the default iOS 7 one
[[UITabBarItem appearance] setTitleTextAttributes:@{NSFontAttributeName : [UIFont fontWithName:@"HelveticaNeue-Bold" size:10.0f],
                                                    NSForegroundColorAttributeName : [UIColor colorWithRed:.5 green:.5 blue:.5 alpha:1]
                                                    } forState:UIControlStateNormal];

Answer 2

This worked for me, to tint not active items in the tabbar

UITabBarItem *item = [self.tabBar.items objectAtIndex:1];

// here you need to use the icon with the color you want, as it will be rendered as it is

item.image = [[UIImage imageNamed:@"unselected.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.png"];

Answer 3

Ed's answer is perfect, but let me add one thing. TabBar is in default translucent thus affected by the color of view under the TabBar (i.e. each member viewController's view's color affects TabBar appearance.).

So I set below code not to be affected.

self.tabBarController.tabBar.translucent = false;

Together with Ed's answer here is a complete code I use now.

self.tabBarController.tabBar.barTintColor = [UIColor blackColor];
self.tabBarController.tabBar.translucent = false;
self.tabBarController.tabBar.tintColor = [UIColor blueColor];

Answer 4

Code free way to change text color in tab bar:

If you are just using iOS 10 then you may change the Image Tint in your Tab Bar

If you are also supporting iOS 9 and lower, then you must also add tintColor to your user definer runtime attributes in each tab bar item

if you also wish to change your icon color make sure the correct color image is in your assest folder and change Render as to Original Image

Answer 5

Tested in iOS 8 for permanent text color (selected/unselected) and image colors (selected/unselected) without create two images with different colors foreach tab:

Text color:

[[UITabBar appearance] setTintColor: selectedTabColor ];
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                       **yourFont**, NSFontAttributeName,
                                                       ** selectedTabColor**, NSForegroundColorAttributeName,
                                                       nil] forState:UIControlStateNormal];

    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                       **yourFont**, NSFontAttributeName,
                                                       **selectedTabColor**, NSForegroundColorAttributeName,
                                                       nil] forState:UIControlStateSelected];

Images color: (assuming that the original images have the color you want display as unselected)

In a UITabBarController subclass -awakeFromNib :

    for (int i =0; i<self.viewControllers.count; i++)
    {
        UITabBarItem *tab = [self.tabBar.items objectAtIndex:i];
        tab.image = [tab.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
    }

Credits: the whole internet and stack overflow XD

Answer 6

This Should Work Perfectly for iOS 8 also

For unselected tabbar item:

[[UIView appearanceWhenContainedIn:[UITabBar class], nil] setTintColor: [UIColor whiteColor]];

For selected tabbar item:

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

Answer 7

[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                           [UIColor whiteColor], UITextAttributeTextColor,
                                                           nil] 

Answer 8

use self.tabBarController.tabBar.barStyle = UIBarStyleBlack; to make the tab bar black

Answer 9

You try it

for (UITabBarItem *item in self.tabBarController.tabBar.items) {
        item.image = [[UIImage imageNamed:@"youimage.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

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

        item.selectedImage = [UIImage imageNamed:@"youimage.png"];
    }

Answer 10

@Usharao answer above worked for me;

My problem was on startup all my TabBarItems seemed to be in a selected state, all having the same "Blue" tinted colour. By selecting all the tabs one by one the coloured state would become corrected.

I used this code below in my AppDelegate class: (compatible for >= IOS9)

[[UIView appearanceWhenContainedInInstancesOfClasses:@[[UITabBar class]]] 
                                        setTintColor:[UIColor lightGrayColor]];

Answer 11

Now from iOS10 one can use

@property (nonatomic, readwrite, copy, nullable) UIColor *unselectedItemTintColor

to change default color for TabBarItem image and text at unselected state.

Thus, the pair of properties tintColor and unselectedItemTintColor gives us full control on items colors.