iOS filling my TabBar icon image?

Question

I've set the selected image for my Tab Bar programatically in xcode as fowllows:

[tabItem setSelectedImage:[UIImage imageNamed:@"tabBar_Curriculum_active"]];

This is how 'tabBar_Curriculum_active' image looks like:

But this is how it's rendered in the TabBar:

It's like iOS decided to ignore the white lines the designer added to the icon! Any ideas of what might be going on and how to fix it?

Answer 1

It looks like the problem is that the white parts of your icon are opaque, rather than transparent. The image that you get in the tab bar is defined not by color, but by alpha. You will have to go back to your designer to fix the alpha, or use a tool like Sketch to fix your icons.

Answer 2

Just should add imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal to the selectedImage

Something like this:

 [tabItem selectedImage: [[UIImage imageNamed:[imageName stringByAppendingString:@"tabBar_Curriculum_active"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]]

Answer 3

You have to add two Image Sets. You've only added one thus far. One set is the icon that should appear when the tab is selected and the other when it is not.

In the image below, My View Controller is embedded in a Navigation Controller, so I add my Tab Bar Item to the Navigation Controller.

In attributes inspector, you'll under Tab Bar Item section -> There is a selected image dropdown. Under Bar Item Image section -> There is a drop down called image. This is where you selected an image in an unselected state.