How can I remove the blue square that overlays UITabBarItem when selected?

Question

I have an iPad app (Xcode 5, iOS 7, ARC and Storyboards). I have a UITabBarController, and each scene has a UITabBarItem.

When I tap a tab bar item, it goes to the correct scene, but the "current" tab bar item image is overlaid by a "blue box".

How can I replace that "blue box" with a different image? (I don't want to change the color; I want to replace it with a different image).

Answer 1

The images you use for a tab bar item have to have their renderingMode be, UIImageRenderingModeAlwaysOriginal or they will appear as blue squares (templates). The document called "Tab Bars", says this,

Tab Bar Item Icons

Each item in a tab bar can have a custom selected image and unselected image. You can specify these images when you initialize a tab bar item using the initWithTitle:image:selectedImage: method. Note that a tab bar item image will be automatically rendered as a template image within a tab bar, unless you explicitly set its rendering mode to UIImageRenderingModeAlwaysOriginal. For more information, see Template Images.

I don't think you can set them up in the storyboard, so you should do it in the controller's init method,

-(id)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        UIImage *img = [UIImage imageNamed:@"pic.jpg"];
        img  = [img imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        [self.tabBarItem setSelectedImage:img];
    }
    return self;
}

Answer 2

This is a Xcode error that will be fixed in 8.2 release. This is the Apple official note about this problem.Look in the link for Interface Builder > Resolved Issues > UITabBarController https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html

Answer 3

Swift 3+ version of rdelmar's code:

class CustomTabBarController: UITabBarController {
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        let img = UIImage(imageLiteralResourceName: "pic").withRenderingMode(.alwaysOriginal)
        tabBarItem.selectedImage = img
    }
}