How to change tab bar item text color

Question

enter image description here

How can I change the color of "More.." text in tabbar to match with its icon color. (Right now Performance is selected in the tab bar)

I tried to set TitleTextAttributes.

[moreItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"HelveticaLTStd-Roman" size:10.0f], NSFontAttributeName,  [UIColor yellowColor],NSForegroundColorAttributeName , nil]

But it the text color is always set to yellow. even when the item is selected. Like this enter image description here

I am trying set to white when selected and when unselected it should match with icon color. Thanks.. Any suggestions will be really helpful.

instead of changing text, why cant you use images? have a look [here](http://idevrecipes.com/2010/12/16/raised-center-tab-bar-button/) and [here](http://stackoverflow.com/a/6546756/2239920) — user23790, Sep 09 '13 at 04:19
I found a better way to change it with using images for my text. Please look at my answer. Let me know if I am doing it wrong. — Priyatham51, Sep 09 '13 at 04:40

score 53 · Answer 1 · answered May 15 '14 at 07:16

The accepted answer's code not work for me.

Here is code, that works:

    [[UITabBarItem appearance] setTitleTextAttributes:@{ NSForegroundColorAttributeName : [UIColor yellowColor] }
                                             forState:UIControlStateNormal];
    [[UITabBarItem appearance] setTitleTextAttributes:@{ NSForegroundColorAttributeName : [UIColor whiteColor] }
                                             forState:UIControlStateSelected];

score 18 · Accepted Answer · answered Sep 09 '13 at 04:32

I found the answer for my own question.

We can set perforamceItem setTitleTextAttributes: for two different states.

forState:UIControlStateNormal
forState:UIControlStateHighlighted

I added the following code

 [performanceItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"HelveticaLTStd-Roman" size:10.0f], NSFontAttributeName,  [UIColor yellowColor], NSForegroundColorAttributeName,nil] forState:UIControlStateNormal];

[performanceItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"HelveticaLTStd-Roman" size:10.0f], NSFontAttributeName,  [UIColor whiteColor], NSForegroundColorAttributeName,nil] forState:UIControlStateHighlighted];

I need to replace the yellow color with the color of my ICONS. This is how they are looking now.

When More is selected

When Performance is Selected

Not works on iOS 7. Look at my answer below! http://stackoverflow.com/a/23671597/1698467 — skywinder, Sep 11 '14 at 09:53

Baran · Answer 3 · 2019-10-09T11:56:03.723

Swift 5.1 + iOS 12.4 & iOS 13:

/// Subclass of `UITabBarController` that is used to set certain text colors for tab bar items.
class TabBarController: UITabBarController {

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        if let items = tabBar.items {
            // Setting the title text color of all tab bar items:
            for item in items {
                item.setTitleTextAttributes([.foregroundColor: UIColor.black], for: .selected)
                item.setTitleTextAttributes([.foregroundColor: UIColor.lightGray], for: .normal)
            }
        }
    }
}

score 9 · Answer 4 · answered Oct 28 '16 at 16:52

9

Code free way to do this:

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

answered Oct 28 '16 at 16:52

HannahCarney

3,441
2
26
32

BEAUTIFUL answer. – Adeel Miraj May 16 '18 at 18:56
Thank you @Adeel :) – HannahCarney May 19 '18 at 12:01
I think beauty should be admired in it’s every form. – Adeel Miraj May 27 '18 at 15:02

Mudith Chathuranga Silva · Answer 5 · 2016-07-07T09:13:18.017

This is the swift version :-

        for item in self.mainTabBar.items! {

          let unselectedItem: NSDictionary = [NSForegroundColorAttributeName: UIColor.whiteColor()]
          let selectedItem: NSDictionary = [NSForegroundColorAttributeName: UIColor.whiteColor()]
          item.setTitleTextAttributes(unselectedItem as? [String : AnyObject], forState: .Normal)
          item.setTitleTextAttributes(selectedItem as? [String : AnyObject], forState: .Selected)

        }

Or you can simply change in Appdelegate :-

 func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.blueColor()], forState: .Selected)
    UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.blackColor()], forState: .Normal)
    // Override point for customization after application launch.
    return true
}

score 3 · Answer 6 · answered Mar 26 '18 at 11:21

3

Swift 4:

UITabBarItem.appearance().setTitleTextAttributes([NSAttributedStringKey.foregroundColor : UIColor.white], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedStringKey.foregroundColor : UIColor.red], for: .selected)

answered Mar 26 '18 at 11:21

Bruno Paulino

5,611
1
41
40

score 2 · Answer 7 · answered Nov 12 '15 at 18:48

For a swift solution, let type inference be your friend:

override func viewWillAppear(animated: Bool) {
  for item in self.tabBar.items! {
    let unselectedItem = [NSForegroundColorAttributeName: UIColor.blackColor()]
    let selectedItem = [NSForegroundColorAttributeName: UIColor.whiteColor()]

    item.setTitleTextAttributes(unselectedItem, forState: .Normal)
    item.setTitleTextAttributes(selectedItem, forState: .Selected)
  }
}

score 2 · Answer 8 · answered Aug 30 '16 at 23:06

Swift version of @skywinder answer :

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

score 2 · Answer 9 · answered Apr 23 '20 at 17:44

Nowadays if your app supports version of iOS less than 13, you should set this colours different ways:

if #available(iOS 13, *) {
    let appearance = UITabBarAppearance()
    appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: .red]
    tabBar.standardAppearance = appearance
} else {
    UITabBarItem.appearance().setTitleTextAttributes(UIColor.red, for: UIControl.State.selected)
}

In code example I set red text color for selected states of UITabBarItem, you may also need to change text color for normal state.

score 1 · Answer 10 · answered Mar 22 '16 at 08:33

This is easy , simply subclass UITabBarItem and assign it to be the class of your tab bar item in either storyboard or code. The below works perfectly for me.

import UIKit

class PPTabBarItem: UITabBarItem {
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
    override init() {
        super.init()
        commonInit()
    }

    func commonInit() {
        self.setTitleTextAttributes([NSFontAttributeName: UIFont.systemFontOfSize(13), NSForegroundColorAttributeName:UIColor.blackColor()], forState: UIControlState.Normal)

        self.setTitleTextAttributes([NSFontAttributeName: UIFont.systemFontOfSize(13), NSForegroundColorAttributeName:UIColor.yellowColor()], forState: UIControlState.Selected)
    }
}

skywinder's solution is good but it triggers global scope.

score 0 · Answer 11 · answered Jun 08 '17 at 11:00

This works correctly..

 [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                        [UIColor redColor], NSForegroundColorAttributeName,
                                                       nil] forState:UIControlStateSelected];

    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                       [UIColor blackColor], NSForegroundColorAttributeName,
                                                       nil] forState:UIControlStateNormal];

score 0 · Answer 12 · answered Aug 08 '22 at 16:28

0

You could set the tintcolor and unselectedItemTintColor of UITabBar to change it's appearance.

self.tabBar.tintColor = // Your colour
self.tabBar.unselectedItemTintColor = // Your unselected item colour

answered Aug 08 '22 at 16:28

Tibin Thomas

1,365
2
16
25

score -1 · Answer 13 · answered May 28 '19 at 03:05

-1

This worked for me on Swift 5.

In AppDelegate :

 UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor : UIColor.red], for: .selected)

answered May 28 '19 at 03:05

Maruta

1,063
11
24

How to change tab bar item text color

13 Answers13

When More is selected

When Performance is Selected

Linked