UITabBarItem image color is grey while original image is white

Question

I use the following code to create image for my UITabBarItem

self.tabBarItem.image = [UIImage imageNamed:@"tab_img.png"];

This tab_img.png consists of black, white and clear color. But in app all part of image that is black and white turns to grey. How I can change this grey to white ?

Answer 1

In iOS7, if you use IB you can subclass UITabBarController then add this:

+ (void)initialize
{
    //the color for the text for unselected tabs
    [UITabBarItem.appearance setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor redColor]} forState:UIControlStateNormal];

    //the color for selected icon
    [[UITabBar appearance] setSelectedImageTintColor:[UIColor whiteColor]];    
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        for (UITabBarItem *tbi in self.tabBar.items) {
            tbi.image = [tbi.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        }
    }
}

if you create the items manualy you must set the UIImageRenderingModeAlwaysOriginal on each icon and add the code from initialize.

Answer 2

If you are using image assets, just set the field "Render As" of your images (selected and unselected images) to "Original Image" (example)

Then in your xib set "Image" and "Selected Image" fields on your Tab Bar Item (example)

Answer 3

Set selected and unselected image.

[self.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"mehr_icon"] withFinishedUnselectedImage:[UIImage imageNamed:@"mehr_icon"]];

Answer 4

images for UITabBarItems should be alpha channel only ! the opaque part will appear grey (blue if selected) only, though!

take a look at: http://devinsheaven.com/creating-uitabbar-uitoolbar-icons-in-adobe-illustrator/

Answer 5

I had the same problem once, I use images with white and alpha only like this image

I set it with self.tabBarItem.image = [UIImage imageNamed:@"Liste"];

Answer 6

Only Way is to go to IB(interface builder) and select the UITabBarItem in your View Controller and go to "file inspector" scroll down and you will see Global Tint her you can set it to no color or any color that you want it will take effect for the selected image.

as per the following code is concern

setFinishedSelectedImage: withFinishedUnselectedImage:;

this is no longer available in iOS 7 rather we can use

[yourCustomTabBarItem setSelectedImage:---];

but this will also take effect of this Global tint color.

Answer 7

For me the best way is changing the image color.

 func imageWithColor(_ color: UIColor) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        let context = UIGraphicsGetCurrentContext()!
        context.translateBy(x: 0, y: size.height)
        context.scaleBy(x: 1.0, y: -1.0)
        context.setBlendMode(.normal)

        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        context.clip(to: rect, mask: cgImage!)

        color.setFill()
        context.fill(rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        newImage.accessibilityIdentifier = accessibilityIdentifier
        return newImage
    }

then, you can update the tabBarItem's properties such as image and selectedImage:

 func setupColorAttributes(to item: UITabBarItem) {
        item.image = item.image?.imageWithColor(.white)?.withRenderingMode(.alwaysOriginal)
        item.selectedImage = item.image?.imageWithColor(.highLight)?.withRenderingMode(.alwaysOriginal)
    }