iOS Bar Item Image Displaying Wrong Color

iOS Bar Item image displaying wrong color

The docs are a little ambiguous about this

The images displayed on the bar are derived from this image. If this
image is too large to fit on the bar, it is scaled to fit. Typically,
the size of a toolbar and navigation bar image is 20 x 20 points. The
alpha values in the source image are used to create the images—opaque
values are ignored.

Essentially what this is saying is the image you supply will not be what is actually displayed. Instead the system uses the alpha mask of the image and the tintColor of the item to generate the final display.

Changing tab bar item image and text color iOS

From UITabBarItem class docs:

By default, the actual unselected and selected images are
automatically created from the alpha values in the source images. To
prevent system coloring, provide images with
UIImageRenderingModeAlwaysOriginal.

The clue is not whether you use UIImageRenderingModeAlwaysOriginal, the important thing is when to use it.

To prevent the grey color for unselected items, you will just need to prevent the system colouring for the unselected image. Here is how to do this:

var firstViewController:UIViewController = UIViewController()
// The following statement is what you need
var customTabBarItem:UITabBarItem = UITabBarItem(title: nil, image: UIImage(named: "YOUR_IMAGE_NAME")?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), selectedImage: UIImage(named: "YOUR_IMAGE_NAME"))
firstViewController.tabBarItem = customTabBarItem

As you can see, I asked iOS to apply the original color (white, yellow, red, whatever) of the image ONLY for the UNSELECTED state, and leave the image as it is for the SELECTED state.

Also, you may need to add a tint color for the tab bar in order to apply a different color for the SELECTED state (instead of the default iOS blue color). As per your screenshot above, you are applying white color for the selected state:

self.tabBar.tintColor = UIColor.whiteColor()

EDIT:

Image is not showing up for tab bar item

Go to Assets folder.
Select your tab image.
On the right side under Attributes you will find "Render As".
Select "Original Image".

UITabBarItem image colour changes to blue after first time it is selected

You need to tell the system to keep the original rendering mode, so it does not use default colours so when you are setting the image on the tab bar. some thing like this

    barImage.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)

---

Related Topics