Custom colored UITabBar icons

October 6, 2010 in iPhone & iPad by Tom Van Herreweghe

On the iPhone, there is no such thing as a menu. When you create an application, you will usually work with a drill-down structure called NavigationController, or with the TabBarController. The difference between them is that the NavigationController ties screens together with increasing granular information, and the TabBarController lets you switch between screens which aren’t really connected to each other. It’s about that TabBarController I want to write this blog post about. Or rather, about a “missing feature” in it.

The TabBarController can be customized with either custom titles, custom icons or both. If you want custom icons, you will see that even though you created them in different colors, the iPhone SDK will always render them in blue when active, and in grey when inactive. Wouldn’t it be nice if you could have them in any color you’d like? I know designers would like that. More often than not, they design these pieces of the UI without remembering that in the end these icons will be blue/grey. But unfortunately there is no obvious way of achieving this. But when means are limited, creativity can help you solve many issues.

Custom colored icons

There is a trick to make your designer happy, and give him his colored icons. However, it still is a work around, and the method isn’t very stylish. It comes down to this:

• Don’t give icons or titles to your different UITabBarItems
• On each view of the UITabBar, set a different images as tabbar
• Each different image has both the TabBar background in it, as well as all the icons. But the currently active page icon should be highlighted

Here are some examples:

• 
• 
• 
• 

I have four tabs, so this means I need four different backgrounds for my UITabBar. On each view, I first need to remove the current background, and then I just add the background for current screen. In each ViewController I add the following:

view plaincopy to clipboardprint?

1. - (void)viewWillAppear:(BOOL)animated {  
2.     [super viewWillAppear:animated];  
3.     for(UIView *view in self.tabBarController.tabBar.subviews) {  
4.         if([view isKindOfClass:[UIImageView class]]) {  
5.             [view removeFromSuperview];  
6.         }  
7.     }  
8.   
9.     [self.tabBarController.tabBar insertSubview:[[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background_location.png"]] autorelease] atIndex:0];  
10. }  

When you don’t remove the subviews, and just try to insert your background image at index 0, then your image won’t swap. Hence we need to remove the existing subview first, and then later insert our new one. If you now build and run your application, you should see the tabbar, and if you hit each tabbar icon, you will see that the correct one is activated. And all in color!