Unselected UITabBar color?
Solution 1
SO says i cannot delete the accepted answer (i tried), but obviously, there are a lot of upvotes for comments that this doesn't work for iOS 7.
See the other answer below with many more upvotes, or the link in @Liam's comment to this answer.
for iOS 6 only
It should be as simple as this:
[[UITabBar appearance] setTintColor:[UIColor grayColor]]; // for unselected items that are gray
[[UITabBar appearance] setSelectedImageTintColor:[UIColor greenColor]]; // for selected items that are green
Solution 2
In iOS 10 and higher, there are 3 possible easy solutions:
A. Instance from code (Swift):
self.tabBar.unselectedItemTintColor = unselectedcolor
B. Instance from IB:
Add a Key Path: unselectedItemTintColor
of type: Color
C. Global appearance (Swift):
UITabBar.appearance().unselectedItemTintColor = unselectedcolor
Solution 3
This will not work under iOS 7 as far as I can say. In particular, tintColor of the tab bar will define the color of the selected tab, not of the unselected ones. If you want to change the default in iOS 7, it seems that you have to actually use different icons (in the color you like to have for unselected tabs) and set the color of the text.
This example should tint selected tabs to red and render others in green. Run this code in your TabBarController:
// set color of selected icons and text to red
self.tabBar.tintColor = [UIColor redColor];
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor redColor], NSForegroundColorAttributeName, nil] forState:UIControlStateSelected];
// set color of unselected text to green
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor greenColor], NSForegroundColorAttributeName, nil]
forState:UIControlStateNormal];
// set selected and unselected icons
UITabBarItem *item0 = [self.tabBar.items objectAtIndex:0];
// this way, the icon gets rendered as it is (thus, it needs to be green in this example)
item0.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
item0.selectedImage = [UIImage imageNamed:@"selected-icon.png"];
If you set the icon in the story board only, you can control the color of the selected tab only (tintColor). All other icons and corresponding text will be drawn in gray.
Maybe someone knows an easier way to adopt the colors under iOS 7?
Solution 4
Extending @Sven Tiffe’s answer for iOS 7, you can get your code to automatically tint the unselected UITabBar images added in the storyboard. The following approach will save you having to create two sets of icon images (i.e. selected vs unselected) and having to programatically load them in. Add the category method imageWithColor: (see - How can I change image tintColor in iOS and WatchKit) to your project then put the following in your custom UITabBarController viewDidLoad method:
// set the selected colors
[self.tabBar setTintColor:[UIColor whiteColor]];
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor whiteColor], NSForegroundColorAttributeName, nil] forState:UIControlStateSelected];
UIColor * unselectedColor = [UIColor colorWithRed:184/255.0f green:224/255.0f blue:242/255.0f alpha:1.0f];
// set color of unselected text
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:unselectedColor, NSForegroundColorAttributeName, nil]
forState:UIControlStateNormal];
// generate a tinted unselected image based on image passed via the storyboard
for(UITabBarItem *item in self.tabBar.items) {
// use the UIImage category code for the imageWithColor: method
item.image = [[item.selectedImage imageWithColor:unselectedColor] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
Create a Category called UIImage+Overlay and on UIImage+Overlay.m (extracted from this answer ) :
@implementation UIImage(Overlay)
- (UIImage *)imageWithColor:(UIColor *)color1
{
UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0, self.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSetBlendMode(context, kCGBlendModeNormal);
CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
CGContextClipToMask(context, rect, self.CGImage);
[color1 setFill];
CGContextFillRect(context, rect);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
@end
Solution 5
Swift version in iOS 10 and higher -
UITabBar.appearance().tintColor = UIColor.gray
UITabBar.appearance().unselectedItemTintColor = UIColor.gray
user1530090
Updated on June 17, 2020Comments
-
user1530090 about 4 years
I have an UITabBar with 5 items. I want to change the unselected color of all items. The items aren't declared in the UIViewController classes (i built them and linked the views in the Storyboard).
Is there an code like this :
[[UITabBar appearance] set***UN***SelectedImageTintColor:[UIColor whiteColor]];
? -
lol over 10 yearsNote - 'UITextAttributeTextColor' is deprecated: first deprecated in iOS 7.0 - Use NSForegroundColorAttributeName :)
-
Atma over 10 yearsthis is seriously the only solution for changing the icon colors
-
Liam about 10 yearsThis does not work in iOS 7. Here's another solution that worked for me.
-
hugocarlmartin about 10 yearsi get the same result. Only first time.
-
user717452 almost 10 yearsThis one is by far the easiest way to accomplish the task, not sure why it is not marked as the accepted answer.
-
user717452 almost 10 yearsSorry @Atma, there is another much easier solution that user3719695 posted in June.
-
Gabriel Cartier over 9 yearsUnselected colors works but it switches back to the normal color after selection, at least on 7.1.
-
Aadil Keshwani over 9 yearsplus 1 for [UITabBarItem appearance] saved my day thanks :) But is there any way through which we dont need to set individual images for tabbar button ?
-
Arda over 9 yearsIn my case, adding the above code to viewWillAppear did the trick. (The buttons aren't loaded yet at the time viewDidLoad is called in my app, so the above code only changes the text color if it's placed in viewDidLoad).
-
Sebastian almost 9 yearsI think it should be
item.image = [[item.image imageWithColor...]]
. Also including the code forimageWithColor
would improve your answer. -
rob123 almost 9 yearsThis worked beautifully. For those (like me) who had never heard of categories before, use this: stackoverflow.com/questions/24324021/… rypress.com/tutorials/objective-c/categories
-
Robin Macharg almost 9 yearsThere's a good discussion of tinting existing images, including those with gradients, in the context of theming your app (and this extends to unselected UITabBarItem icons) on the Thoughbot blog here: robots.thoughtbot.com/designing-for-ios-blending-modes. It's broadly the same approach as used in this answer. Can confirm it works on iOS8 and ports trivially to Swift.
-
Dan Winter-Wijntjes over 8 yearsSpent hours and hours trying to find a solution for this! Excellent and elegant solution.
-
Michael over 8 yearsWorks great in iOS 9.1
-
Perry over 8 yearsJust the fact that we have to do this in iOS is beyond me. I shouldn't have to tell iOS to not mess with my images.
-
Jeff over 7 yearsYour answer made me realize that we can also do this with "User Defined Runtime Attributes" by adding the "unselectedItemTintColor" Key Path in the attributes inspector if your using a storyboard. Thank you!
-
Jared Chu over 7 yearsperfect solution for my issue
-
Anish Parajuli 웃 over 7 yearsFor iOS 10 .use this
self.dashboardTabBar.unselectedItemTintColor = UIColor.black
-
Phil over 7 yearsDoesn't works if you also support lower version (< iOS 10)
-
Dheeraj D about 6 yearsare you from SVIM?
-
Abhishek Jain about 6 years@DheerajD No I am not
-
Genevios over 2 yearsiOS 15 - not work (