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.

score 71 · Accepted Answer · edited Jul 31 '15 at 01:07

71

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];

edited Jul 31 '15 at 01:07

nhgrif

61,578
25
134
173

answered Sep 11 '13 at 07:09

Ed Fernandez

1,823
2
14
18

Ed covers just about everything you need here, unfortunately there doesn't seem to be a way to adjust the other tabs colors. So far the only option is using images. – Anthony Sep 24 '13 at 05:43
6

How do you set the unselected icon color? – Pwner Nov 15 '13 at 02:40
1

This doesn't change the color of the unselected items. Only way seems to be to use images as below. – Tom Kincaid Feb 14 '14 at 15:17
size 10 font? A little small? – clocksmith Aug 11 '14 at 01:21
@Pwner I also want to unselected icon color, I found that using the correct image, and rendering it as an original mode is one way. Please tell me if you found any other way. – Arpit B Parekh Nov 09 '16 at 12:40

score 44 · Answer 2 · edited Oct 29 '13 at 18:07

44

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"];

edited Oct 29 '13 at 18:07

dreamcrash

47,137
25
94
117

answered Oct 29 '13 at 17:48

atrik

659
7
14

1

This seems to be the only way to change the color of the unselected tabs. – Tom Kincaid Feb 14 '14 at 15:16
2

Using `imageWithRenderingMode` is the key to change tab image colors – huong Oct 14 '14 at 08:07
awesome solution and the only solution that worked... btw any ways to change the tab item's title color as well ? – BrianChristo Oct 08 '15 at 15:22

score 12 · Answer 3 · answered Oct 23 '13 at 05:20

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];

score 8 · Answer 4 · answered Oct 28 '16 at 16:54

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

score 7 · Answer 5 · answered Sep 04 '15 at 16:43

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

Thank you! Do you maybe know how to add separators like on this image? https://www.dropbox.com/s/0u6jk2yv4kugfpg/Screenshot%202015-10-11%2014.26.42.png?dl=0 — Boris Nikolic, Oct 11 '15 at 12:26
for that one probably you need to subclass the tab bar or the tab bar item — Kappe, Oct 12 '15 at 09:06

score 3 · Answer 6 · edited Jun 15 '15 at 10:33

3

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]];

edited Jun 15 '15 at 10:33

Vaibhav Saran

12,848
3
65
75

answered Feb 17 '15 at 14:12

Usharao

67
5

1

color gets changed on tab switching – EmilDo Feb 25 '15 at 11:51
Then Don't use [[UITabBar appearance] setTintColor:[UIColor orangeColor]]; – Usharao Mar 12 '15 at 05:44
[tabBarItem1 setFinishedSelectedImage:[[UIImage imageNamed:@"mytrip_tab_selected"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] withFinishedUnselectedImage:[[UIImage imageNamed:@"mytrip_tab"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]]; – Usharao Mar 12 '15 at 06:04
The above comment will work when having two same images with different colors.we can present by selecting and un-selecting the UITabbar Items. – Usharao Mar 12 '15 at 06:06
@Usharao nice code for unselected icons, but I have a specific requirement, that only one tab item should have different color. – Arpit B Parekh Nov 09 '16 at 12:51

score 2 · Answer 7 · edited Feb 15 '14 at 09:32

2

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

edited Feb 15 '14 at 09:32

Qantas 94 Heavy

15,750
31
68
83

answered Feb 15 '14 at 09:03

user2239796

21
1

score 0 · Answer 8 · answered Sep 25 '13 at 08:22

0

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

answered Sep 25 '13 at 08:22

UUDDLRLRSL_

1
1

score 0 · Answer 9 · answered Dec 08 '13 at 15:45

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"];
    }

UITextAttributeTextColor is deprecated in iOS7 – wkhatch Jan 30 '14 at 22:09 — wkhatch, Jan 30 '14 at 22:09

score 0 · Answer 10 · answered May 05 '18 at 13:11

@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]];

score 0 · Answer 11 · answered Apr 14 '19 at 16:57

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.

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

11 Answers11

Linked

Related