iOS: Why is custom tab bar item showing only as grey silhouette?

Question

I am trying to set the tab bar icons of my UITabBarController with custom *.png files (one for the selected and one for unselected).

The images are all in non-interlaced png format and are named correctly (@2x, @3x, etc) residing in an *.imageset.

But the tab bar items are only shown as silhouettes like this:

I tried to set these images within Interface Builder, without success. Then I also tried to set them programmatically in the "loadView" function of MyTabBarController (which is extending UITabBarController) like this:

UIImage *selectedImage;
UIImage *unselectedImage;

// tab1
selectedImage = [UIImage imageNamed:@"cmdGamesActive"];
unselectedImage = [UIImage imageNamed:@"cmdGamesInactive"];
UITabBarItem *item1 = [self.tabBar.items objectAtIndex:0];
item1 = [item1 initWithTitle:@"Games" image:unselectedImage selectedImage:selectedImage];

// tab2
selectedImage = [UIImage imageNamed:@"cmdFriendsActive"];
unselectedImage = [UIImage imageNamed:@"cmdFriendsInactive"];
UITabBarItem *item2 = [self.tabBar.items objectAtIndex:1];
item2 = [item2 initWithTitle:@"Friends" image:unselectedImage selectedImage:selectedImage];

// tab3
selectedImage = [UIImage imageNamed:@"cmdTrophiesActive"];
unselectedImage = [UIImage imageNamed:@"cmdTrophiesInactive"];
UITabBarItem *item3 = [self.tabBar.items objectAtIndex:2];
item3 = [item3 initWithTitle:@"Trophies" image:unselectedImage selectedImage:selectedImage];

// tab4
selectedImage = [UIImage imageNamed:@"cmdSettingsActive"];
unselectedImage = [UIImage imageNamed:@"cmdSettingsInactive"];
UITabBarItem *item4 = [self.tabBar.items objectAtIndex:3];
item4 = [item4 initWithTitle:@"Settings" image:unselectedImage selectedImage:selectedImage];

... with the same result.

Any ideas how to solve this issue ?

@Samraan Khaan: Thanks, but this didn't help. Funnily enough, it works with another image that only features transparency and some white in it. But my icons are pretty colorful... Any further ideas? — salocinx, Aug 04 '15 at 09:58
@cookiemonsta: It looks like it's not possible with the new iOS SDK's ... Only b/w images supported that are tinted when selected. — salocinx, Aug 24 '15 at 16:43
@cookiemonsta: Have a look on this thread. It describes a very similar problem with tab bar items. http://stackoverflow.com/questions/19372269/uibarbuttonitem-with-uiimage-always-tinted-ios-7 — salocinx, Aug 25 '15 at 14:11
@salocinx : Sir, great help! Thanks. I did however update it. Hopefully it helped you too, if not, how about this: http://stackoverflow.com/a/32369370/3359372 — Mohsin Khubaib Ahmed, Sep 03 '15 at 07:31

score 2 · Accepted Answer · edited May 23 '17 at 12:01

According to this answer, I did something extra and kind of have answer for you here. I have my custom UITabBarController, which is linked with my UITabBarController in the StoryBoard file. So in order to remove the automatic tint provided by iOS when the TabBar is unselected, I ended up removing it in this manner. The images can be a vast variety of images but just in the way recommended here. Here it goes:

NSArray *navConArr = self.viewControllers;//self is custom UITabBarController
UINavigationController *naviOne = [navConArr objectAtIndex:0];//I have 3 different tabs, objectAtIndex:0 means the first tab navigation controller
UITabBarItem *naviBtn  = naviOne.tabBarItem;
UIImage *image = [[UIImage imageNamed:@"iconNaviOne"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[naviBtn setSelectedImage:image];
[naviBtn setImage:image];

Thankfully, this works like a charm (:

Ne_She · Answer 2 · 2016-06-02T13:04:01.710

1

I was facing a similar issue. I had chosen few icons for my tabs such as 'mic', 'smiley' and 'settings'.

But the only things visible when I executed the program were grey and blue squares.

I modified my '.png' images to be transparent and now they are visible as they were intended to.

i.e, make sure the images used for tab icons do not have a background.

edited Jun 02 '16 at 13:04

answered Apr 14 '16 at 11:56

Ne_She

31
5

score 0 · Answer 3 · answered Feb 29 '16 at 11:58

This should do the trick:

UITabBarItem *item0 = [_tabBar.items objectAtIndex:0];
item0.image  = [[UIImage imageNamed:@"edit_profile_tab"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item0.selectedImage  = [[UIImage imageNamed:@"edit_profile_tab_active"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

iOS: Why is custom tab bar item showing only as grey silhouette?

3 Answers3