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?

Solution 1

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

Solution 2

iOS 5 has added some new appearance methods for customising the look of most UI elements.

You can target every instance of a UITabBar in your app by using the appearance proxy.

For iOS 5 + 6:

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

For iOS 7 and above, please use the following:

[[UITabBar appearance] setBarTintColor:[UIColor redColor]];

Using the appearance proxy will change any tab bar instance throughout the app. For a specific instance, use one of the new properties on that class:

UIColor *tintColor; // iOS 5+6
UIColor *barTintColor; // iOS 7+
UIColor *selectedImageTintColor;
UIImage *backgroundImage;
UIImage *selectionIndicatorImage;

Solution 3

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];

}

Solution 4

When you just use addSubview your buttons will lose clickability, so instead of

[[self tabBar] addSubview:v];

use:

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

Solution 5

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.

View more solutions

Comments

[Jonah]

This is sort of an odd solution in that it just places semi transparent brown rectangle on top of the tabbar. The problem is that all the buttons are turned brown, not just the background. However this seems to be the best option anyone's presented so far.

[Sagar Kothari]

Sir, did you filled up a bug with apple?

[oberbaum]

if you want to make it pretty with a background picture, see this: duivesteyn.net/2010/01/16/iphone-custom-tabbar-background-im‌​age

[Vibhor Goyal]

I think it needs to be: [[self tabBar] insertSubview:v atIndex:0];

[Frank]

is this a private API? if i used this in my app would i get refused?

[Anthony Main]

there doesnt appear to be any private calls in there no

[coneybeare]

the tabbar property used to not be accessible.

[smdvlpr]

this modifies the tabbar background, not the "selected item" highlight, which i would be more interested in

[coneybeare]

Right… the original poster asked for background color changes… This is also a very old question and answer and there are better ways to do it now

[Frank]

you can change the highlights by subclassing UITabBarItem: stackoverflow.com/questions/3461867/…

[Edward Ashak]

your actually just placing a kMainColor colored view on top of the tabBar. but if you add [self.tabBar sendSubviewToBack:v]; just before the [v release]; you will be able to press the buttons actually

[RaphaelDDL]

I know the answer is old but that worked for me. Since i needed a custom image instead of a color, i mixed your answer with this one tint on bars - UITabBar part

[imnk]

Nope. As I pointed out, they are for iOS 5. You can always target specific versions with conditional compilation statements: cocoawithlove.com/2010/07/…

[The iCoder]

what is tabBarcontroller is it controller which conforms UITabarDelegate Can u explain plz?

[Veeru]

Thanks, that was helpful :) Never knew there was such thing.

[Zeezer]

For iOS 7, use [UITabBar appearance] setBarTintColor, if you want to change background color

[YSR fan]

Working fine! +1 for u.