Is it possible to set individual tint colors for each button on UITabBar?

Question

Is it possible to have an individual tint color for a single UITabBarItem on the tab bar? I only know how to set it universally with [UITabBar appearance] setTintColor:. But, for example, I want one tab to be tinted with blue when selected, the other one with red etc.

I know it can be partially mitigated by setting image and selectedImage properties with UIImageRenderingModeAlwaysOriginal to preserve the original image colors, but the caption text still has the original tint of the entire tab bar.

Please, check my detailed answer on: https://stackoverflow.com/questions/43002013/different-colors-for-tabbar-items-in-tab-bar-controller/47644313#47644313 — erickva, Dec 05 '17 at 00:55

score 0 · Accepted Answer · answered Nov 05 '14 at 03:19

Changing the tintColor property individual is impossible, but you can still change the text color for the tab bar item.

For example:

    [theTabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor redColor]}
                                   forState:UIControlStateNormal];
    [theTabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor greenColor]}
                                   forState:UIControlStateHighlighted];

score 0 · Answer 2 · answered Aug 29 '15 at 13:29

Changing the individual tint color is not impossible, it just requires a fair bit of effort to achieve. The way to do it is to override the tab bar's didSelectItem method. When the user selects an item, you change the tabBar.tintColor to whatever tintColor you want for that item, and then have to call selectedIndex = //The tapped index. I'll post some code if you want, its certainly quite a hack

score 0 · Answer 3 · answered Nov 05 '20 at 21:26

Actually, with some tricks, you can set the tint of an individual button.

   let button1 = UITabBarItem(title: "Btn1", image: UIImage(systemName: "heart"), tag: 1)
   let button2 = UITabBarItem(title: "Btn2", image: UIImage(systemName: "heart"), tag: 2)
   let button3 = UITabBarItem(title: "Btn3", image: UIImage(systemName: "heart"), tag: 3)
   let button4 = UITabBarItem(title: "Btn4", image: UIImage(systemName: "heart"), tag: 4)
   let button5 = UITabBarItem(title: "Btn5", image: UIImage(systemName: "heart"), tag: 5)
   tabBar.items = [button1, button2, button3, button4, button5]

   // setting tint of the button4
   if let imageView = tabBar.subviews[4].subviews.first as? UIImageView {
      imageView.tintColor = UIColor.red 
      imageView.image = UIImage(systemName: "heart.fill")
   }

If you decide also to change the image of the button, use the same imageView and not button4.image, otherwise some other random button may change its tint. The tabBar.subviews[0] is the background image to the bar itself, the subsequent subviews are the buttons you added. Each element is of type UITabBarButton that has two subviews: first UITabBarSwappableImageView and the second UITabBarButtonLabel.

score -1 · Answer 4 · answered Nov 05 '14 at 05:23

-1

For Normal State (unselected):

[tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor grayColor]}
                               forState:UIControlStateNormal];

For Selected State:

[tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor blueColor]}
                               forState:UIControlStateHighlighted];

answered Nov 05 '14 at 05:23

Rajesh Loganathan

11,129
4
78
90

time waste - it changes the text color only – Vyachaslav Gerchicov Jun 19 '18 at 15:19

Is it possible to set individual tint colors for each button on UITabBar?

4 Answers4