Custom UITabBar icons iOS - ios

Question

I am developing a tabbed application and i want to integrate custom UITabbar background and icons. I already inserted a custom background but i have a problem with the icons.
This is how the icons are supposed to look:
But after adding the icons for each view in the storyboard i get grey icons like this:
Does anyone have an idea why the icons are displayed this way?
Thank you very much!

Answer 1

Using Xcode 6, in order to be able to change images directly from Storyboard, you can do this:
#IBDesignable class CustomizedTabBarItem: UITabBarItem {
#IBInspectable var finalImage:UIImage = UIImage() {
didSet {
self.image = finalImage.imageWithRenderingMode(.AlwaysOriginal)
}
}
#IBInspectable var finalSelectedImage:UIImage = UIImage() {
didSet {
self.selectedImage = finalSelectedImage.imageWithRenderingMode(.AlwaysOriginal)
}
}
}
After, you just have to set the images in your storyboard

Answer 2

I can´t comment yet, so I´ll add as answer.
Since iOS 7 setFinishedSelectedImage:withFinishedUnselectedImage: is deprecated.
To solve this you can do it this way:
UIImage *selectedImage = [UIImage imageNamed:#"tabbar-highlight"];
selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *unselectedImage = [UIImage imageNamed:#"tabbar"];
unselectedImage = [unselectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tabBarItem = [[UITabBarItem alloc] initWithTitle:#"TabBarItem1" image:unselectedImage selectedImage:selectedImage];
//
//OR
//
UIImage *selectedImage = [UIImage imageNamed:#"tabbar-highlight"];
selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *unselectedImage = [UIImage imageNamed:#"tabbar"];
unselectedImage = [unselectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[yourTabBarItem setImage:unselectedImage];
[yourTabBarItem setSelectedImage:selectedImage];
Hope this help to clarify for iOS7+.

Answer 3

This is how I do it in one of my apps. In your AppDelegates didFinishLaunchingWithOptions: method, add this and fill in your image names:
UITabBarController *tabController = (UITabBarController *)self.window.rootViewController;
//tab1
UIImage *selectedImage = [UIImage imageNamed:#"home-tab-selected"];
UIImage *unselectedImage = [UIImage imageNamed:#"home2-tab"];
MyTabBar *tabBar = (MyTabBar *)tabController.tabBar;
UITabBarItem *item1 = [tabBar.items objectAtIndex:0];
[item1 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
//tab2
selectedImage = [UIImage imageNamed:#"customers-tab-selected"];
unselectedImage = [UIImage imageNamed:#"customers-tab"];
UITabBarItem *item2 = [tabBar.items objectAtIndex:1];
[item2 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
//tab3
selectedImage = [UIImage imageNamed:#"maps-tab-selected"];
unselectedImage = [UIImage imageNamed:#"maps-tab"];
UITabBarItem *item3 = [tabBar.items objectAtIndex:2];
[item3 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
//tab4
selectedImage = [UIImage imageNamed:#"reports-tab-selected"];
unselectedImage = [UIImage imageNamed:#"reports-tab"];
UITabBarItem *item4 = [tabBar.items objectAtIndex:3];
[item4 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
//tab5
selectedImage = [UIImage imageNamed:#"orders-tab-selected"];
unselectedImage = [UIImage imageNamed:#"orders-tab"];
UITabBarItem *item5 = [tabBar.items objectAtIndex:4];
[item5 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
if ([tabBar respondsToSelector:#selector(setBackgroundImage:)])
{
// ios 5 code here
[tabBar setBackgroundImage:[UIImage imageNamed:#"tab-bg"]];
}
Works perfect for me.

Answer 4

An updated Version to Julien's answer about IBInspectable is below
import UIKit
#IBDesignable
class CustomTabBarItem: UITabBarItem {
#IBInspectable var finalImage: UIImage = UIImage() {
didSet {
self.image = finalImage.withRenderingMode(.alwaysOriginal)
}
}
#IBInspectable var finalSelectedImage: UIImage = UIImage() {
didSet {
self.selectedImage = finalSelectedImage.withRenderingMode(.alwaysOriginal)
}
}
}

Answer 5

You can set the finished image of the tab bar icons with setFinishedSelectedImage:withFinishedUnselectedImage: on UITabBarItem
Check the docs here (look under Appearance)
The default behavior of the UITabBarItem is to create a mask based on your icon then it applies that special blue treatment as your seeing.

Answer 6

You can also keep it simple ;)
[tabBarItemName setSelectedImage:[UIImage imageNamed:#"image name"]];
You'll have to declare the tabBarItemName in your ViewController.h