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?

score 26 · Answer 1 · answered Sep 24 '13 at 18:21

26

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

answered Sep 24 '13 at 18:21

Matthew Burke

2,295
17
14

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." – ian Sep 24 '13 at 18:40
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. – Matthew Burke Sep 25 '13 at 02:39
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. – Halsafar Oct 23 '13 at 20:25
1

@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. – Charlie Scott-Skinner Jul 28 '15 at 11:11

score 17 · Accepted Answer · answered Sep 24 '13 at 17:54

17

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

answered Sep 24 '13 at 17:54

Jordan Montel

8,227
2
35
40

2

Note that setFinisheSelectedImage:withFinishedUnselectedImage is deprecated in iOS 7. – Matthew Burke Sep 24 '13 at 18:11
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? – ian Sep 24 '13 at 18:17
@user2792129 - yes, just took me a few minutes to get my answer typed in – Matthew Burke Sep 24 '13 at 18:23
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. – Sourabh Bhardwaj Jan 10 '14 at 03:26
the updated way is just [[UITabBar appearance] setTintColor:[UIColor whiteColor]]; – thailey01 Apr 29 '17 at 19:59

score 6 · Answer 3 · answered Jan 28 '15 at 03:54

6

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

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

answered Jan 28 '15 at 03:54

tebs1200

61
1
1

2

Good to know. But User Defined Runtime Attributes are an absolute debugging nightmare. – Vijay Tholpadi Jan 28 '15 at 05:23
1

What else than tintColor can you type into Key Path? – Bidstrup Jun 22 '15 at 22:39
1

@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. – OhadM Mar 07 '16 at 08:19
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? – h3dkandi Jun 03 '16 at 08:06

score 5 · Answer 4 · answered Nov 07 '13 at 14:08

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

score 5 · Answer 5 · answered Dec 12 '14 at 13:40

5

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:

answered Dec 12 '14 at 13:40

Bartłomiej Jończy

647
6
3

1

Like a charm. Is there a beautiful magic for the not selected icons as well? – Aviel Gross Jan 12 '15 at 07:41

score 4 · Answer 6 · answered Jul 26 '14 at 07:49

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. **

score 3 · Answer 7 · edited May 23 '17 at 12:26

Because setFinishedSelectedImage:withFinishedUnselectedImage is deprecated, I used an altered version of Ram S's answer by replacing:

[item0 setFinishedSelectedImage:[UIImage imageNamed:@"iconBlue.png"]  withFinishedUnselectedImage:[UIImage imageNamed:@"iconGray.png"] ];

with:

[item0 setImage:[[UIImage imageNamed:@"iconGray.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item0 setSelectedImage:[[UIImage imageNamed:@"iconBlue.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

See UITabBarItem setFinishedSelectedImage: deprecated in iOS7 for more information.

Custom tab bar icon colors

7 Answers7

Linked