Custom tab bar icon colors

Question

Im currently using Xcode 5 to develop a list oriented app. I have a custom tint for the tab bar, custom images for the tab icons, custom tint for the tab bar's icon images when its selected, but i cannot find how to customize the icon images' tint for when its not selected. Right now its just the default gray which you can barely see in contrast to my green tab bar. I want to make the tab bar icons' images and names white.

Does anybody know how to set the tab bar icons' image tint in Xcode 5?

Answer 1

Setting Custom Tabbar with selected and non-seleted Image. Also having tabbarItem Image Insets position in center

UITabBar *tabBar = self.tabBarController.tabBar;

UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
UITabBarItem *item3 = [tabBar.items objectAtIndex:3];

[item0 setFinishedSelectedImage:[UIImage imageNamed:@"iconBlue.png"]  withFinishedUnselectedImage:[UIImage imageNamed:@"iconGray.png"] ];
[item1 setFinishedSelectedImage:[UIImage imageNamed:@"iconBlue2.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"icon-2.png"]];
[item2 setFinishedSelectedImage:[UIImage imageNamed:@"iconBlue3.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"icon-3.png"]];
[item3 setFinishedSelectedImage:[UIImage imageNamed:@"iconBlue4.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"icon-4.png"]];

item0.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item1.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item2.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item3.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);

**In viewWillAppear method of first viewcontroller. **

Answer 2

You can do this purely from the storyboard without writing any code by adding a "User Defined Runtime Attribute":

1. Select your UITabViewController in the storyboard
2. Open the "Document Outline" and make sure that you select the "Tab Bar" view in the scene.
3. Show the "Identity Inspector". You should see a section for "User Defined Runtime Attributes"
4. Add the following:
   • Key Path: tintColor
   • Type: Color
   • Value: Select the color you want.

Answer 3

You need to set the rendering mode for each tab's (unselected) image to UIImageRenderingModeAlwaysOriginal. So, in your app delegate, get a reference to the tab bar and then iterate over each tab bar item, adjusting the image modes.

There's probably a better way to get a reference to the tab bar, but I did the following:

UIStoryboard *sb = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
UITabBarController *tbc = [sb instantiateInitialViewController];
self.window.rootViewController = tbc;
UITabBar *tb = tbc.tabBar;

Then the image adjustment can be done as follows:

NSArray *items = tb.items;

for (UITabBarItem *tbi in items) {
    UIImage *image = tbi.image;
    tbi.selectedImage = image;
    tbi.image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}

Answer 4

If you have your tab bar in visual editor, you can do it here. Select tab bar and in "User Defined Runtime Attributes" add attribute: Key Path: selectedImageTintColor Type: Color Value:

Answer 5

You can try this to tint selected icon :

// Custom the tab bar
[[UITabBar appearance] setSelectedImageTintColor:[UIColor whiteColor]];

and this to tint the non active icon :

[self.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"item_seleted.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"item_unselected.png"]];

Answer 6

Try this way..it worked for me

In app delegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{


 UITabBarController *tabBarController=(UITabBarController*)(self.window.rootViewController);
    UITabBar *tabBar=tabBarController.tabBar;
  UITabBarItem *tabBarItem1=[[tabBar items] objectAtIndex:0];//first tab bar
 [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"yourImageSelected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"yourImageUnselected.png"]];//image should be 30 by 30
}

run and go