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?

Solution 1

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

Solution 2

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

Solution 3

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.

Solution 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:

Solution 5

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

View more solutions

Comments

[Matthew Burke]

Note that setFinisheSelectedImage:withFinishedUnselectedImage is deprecated in iOS 7.

[ian]

Matthew if its deprecated in iOS 7 is there another way to go about this or is that just because apple wants to keep the grey default icons standard?

[Matthew Burke]

@user2792129 - yes, just took me a few minutes to get my answer typed in <g/>

[ian]

Thanks Matthew. I put that code into my .m app delegate and it returned an issue that said "unsupported configuration" "Plain Style unsupported in a Navigation Item, Main.storyboard."

[Matthew Burke]

My code assumes that a tab bar controller is the initial view controller in the storyboard. If your app is set up differently, that may be the source of the problem.

[Halsafar]

This works but only for one of the images. Basically I have an unselected and selected icon. This trick made unselected work but selected is still just a blue mess.

[Sourabh Bhardwaj]

hey, what can i do if I dont want to use title..its already in the image. I want to use title space to fit icon in the center of the tabbar.

[Aviel Gross]

Like a charm. Is there a beautiful magic for the not selected icons as well?

[Vijay Tholpadi]

Good to know. But User Defined Runtime Attributes are an absolute debugging nightmare.

[Bidstrup]

What else than tintColor can you type into Key Path?

[Charlie Scott-Skinner]

@Halsafar That's because you are only setting the render mode for the base image. Do the same for the selectedImage although you might want to set it to a different image else you can't tell the difference between selected and not.

[OhadM]

@RasmusBidstrup, all the relevant properties of the selected IB item. In our case the UITabBar. So go to apple doc and read the UITabBar documentation.

[h3dkandi]

and correct me if I am wrong but this will set the color for when you select the image. He wants to change the default grey color of the item and not the selected color?

[thailey01]

the updated way is just [[UITabBar appearance] setTintColor:[UIColor whiteColor]];