Preserving the original image color of the selected and unselected UITabBar icons

Question

The structure is the following:

In my storyboard, I have a Tab Bar Controller which contains a Tab Bar object. This object has a custom class in which I have only this method:

- (void)awakeFromNib
{
  NSArray *imageNames = @[@"test1", @"test2", @"test3", @"test4", @"test5"];
    for (int i=0; i<5; i++) {
      UITabBarItem *item = [self.items objectAtIndex:i];
      NSString *imageName = [imageNames objectAtIndex:i];
      item.image = [[UIImage imageNamed:imageName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
      item.selectedImage = [UIImage imageNamed:[imageName stringByAppendingString:@"-selected"]];
    }
}

I have created an Asset Catalog which contains my tab bar icons, both the selected and unselected versions (different colors).

The documentation for UIImageRenderingModeAlwaysOriginal mentions Always draw the original image, without treating it as a template. which should preserve the original image color. This doesn't seem to happen and this suggestion didn't work either.

What happens instead is that in the selected state, my tab bar icons get the default blue tint color.

One thing that I noticed is that if I do the following (taken from here) in the didFinishLaunchingWithOptions in the AppDelegate, then I can set the color of the selected tab bar icons as I want:

[[UITabBar appearance] setTintColor:[UIColor purpleColor]];

The documentation for the setTintColor mentions:

The tint color to apply to the tab bar’s tab bar items. Starting in iOS 7.0, the tint color that applies to a tab bar’s tab bar items is the first nondefault tint color in the view hierarchy, starting with the tab bar itself.

Does this mean that regardless of my tab bar icons's color (original in the images themselves), in the selected state they will always have the color of tintColor ?

Or am I doing something wrong/missing something?

I'm having this issue on iOS 7.0 and 7.1.

I hope my answer can help you. – Gabriel.Massana Apr 03 '14 at 20:42 — Gabriel.Massana, Apr 03 '14 at 20:42

score 34 · Answer 1 · answered May 25 '17 at 17:07

34

Just go to your image assets properties, and set Render as property to "original image"

And you're good to go!

answered May 25 '17 at 17:07

Abdoelrhman

875
8
17

The problem with this answer is that it doesn't turn grey when it is not selected, so I don't think this is the right answer for the question asked. Good to know though. – Alex Kornhauser May 24 '19 at 06:09
yeah that's the question, if you needed it to change colors make it as a template – Abdoelrhman May 24 '19 at 13:29
unbelievable... – Vaibhav Saran Jun 12 '19 at 06:47
It works for me too.. thanks :) – Priyanka Kanse Dec 07 '20 at 12:04

score 28 · Accepted Answer · edited May 23 '17 at 12:10

28

Perfect question, really well explained.

You are not setting imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal for the selected image.

Just should add imageWithRenderingMode:UIImageRenderingModeAlwaysOriginalto the selectedImage:

  item.selectedImage = [[UIImage imageNamed:[imageName stringByAppendingString:@"-selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

Check this other answer.

edited May 23 '17 at 12:10

Community

1
1

answered Apr 03 '14 at 20:40

Gabriel.Massana

7,917
6
56
79

1

That was it! I really didn't see that. I was so convinced that it's because the 'tintColor' overrides the color of the image. Yep, beginner mistakes. Thank you, Gabriel! Solved! – Alex Apr 03 '14 at 21:40
Nice but it works on second time not on the first time – JAck Oct 08 '16 at 06:41

score 7 · Answer 3 · answered Sep 22 '17 at 07:16

7

Swift 3:

    for item in self.tabBar.items!{
        item.selectedImage = item.selectedImage?.withRenderingMode(.alwaysOriginal)
        item.image = item.image?.withRenderingMode(.alwaysOriginal)
    }

answered Sep 22 '17 at 07:16

Muhammad Ahmed Baig

689
14
20

score 5 · Answer 4 · answered Jun 18 '19 at 20:03

Setting non-selected image to always original render and selected one to always template render did the trick for me.

Solution for iOS 13 and swift 5.1

let item = UITabBarItem(title: "item_title",
                        image: UIImage(named: "img")?.withRenderingMode(.alwaysOriginal),
                        selectedImage: UIImage(named:"img_selected")?.withRenderingMode(.alwaysTemplate))

Preserving the original image color of the selected and unselected UITabBar icons

4 Answers4

Linked