Changing Tint / Background color of UITabBar

Question

The UINavigationBar and UISearchBar both have a tintColor property that allows you to change the tint color (surprising, I know) of both of those items. I want to do the same thing to the UITabBar in my application, but have found now way to change it from the default black color. Any ideas?

Answer 1

There is no simple way to do this, you basically need to subclass UITabBar and implement custom drawing to do what you want. It is quite a bit of work for the effect, but it may be worth it. I recommend filing a bug with Apple to get it added to a future iPhone SDK.

Answer 2

Thanks. Bug filed in radar!

Answer 3

I have been able to make it work by subclassing a UITabBarController and using private classes:

@interface UITabBarController (private)
- (UITabBar *)tabBar;
@end

@implementation CustomUITabBarController


- (void)viewDidLoad {
    [super viewDidLoad];

    CGRect frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width, 48);
    UIView *v = [[UIView alloc] initWithFrame:frame];
    [v setBackgroundColor:kMainColor];
    [v setAlpha:0.5];
    [[self tabBar] addSubview:v];
    [v release];

}
@end

Answer 4

This is the great work, i was finding the solution and this topic is really helpful to me, but i still have issue that i want to change tabbaritem image to rgb and not gray scale color, is there any way to do so?

Answer 5

[v setBackgroundColor ColorwithRed: Green: Blue: ];

Answer 6

when you just use addSubview your buttons will loose clickability, so instead of

[[self tabBar] addSubview:v];

use:

[[self tabBar] insertSubview:v atIndex:0];

Answer 7

I have an addendum to the final answer. While the essential scheme is correct, the trick of using a partially transparent color can be improved upon. I assume that it's only for letting the default gradient to show through. Oh, also, the height of the TabBar is 49 pixels rather than 48, at least in OS 3.

So, if you have a appropriate 1 x 49 image with a gradient, this is the version of viewDidLoad you should use:

- (void)viewDidLoad {

    [super viewDidLoad]; 

    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *v = [[UIView alloc] initWithFrame:frame];
    UIImage *i = [UIImage imageNamed:@"GO-21-TabBarColorx49.png"];
    UIColor *c = [[UIColor alloc] initWithPatternImage:i];
    v.backgroundColor = c;
    [c release];
    [[self tabBar] addSubview:v];
    [v release];

}

Here's what the UITabBar looks like: http://www.lehigh.edu/sol0/TabBarGradient.jpg

Answer 8

other solution

Answer 9

[[self tabBar] insertSubview:v atIndex:0]; works perfectly for me.

Answer 10

These are great answers. If you're allowing autorotation, it's helpful to set the autoresizingMask of the subview to have flexible margins and size, or the new background won't resize with the tab bar.