Customize TabBar in iPhone

When you add Tab Bar in your iPhone project, by default its background color is black and selection color is blue. But if you need to change it add these code in your project file RootViewController-

// RootViewController.h file

@interface UITabBar (ColorExtensions)

– (void)recolorItemsWithColor:(UIColor *)color shadowColor:(UIColor *)shadowColor shadowOffset:(CGSize)shadowOffset shadowBlur:(CGFloat)shadowBlur;


@interface UITabBarItem (Private)

@property(retain, nonatomic) UIImage *selectedImage;

– (void)_updateView;


//RootViewController.m file

@implementation UITabBar (ColorExtensions)

– (void)recolorItemsWithColor:(UIColor *)color shadowColor:(UIColor *)shadowColor shadowOffset:(CGSize)shadowOffset shadowBlur:(CGFloat)shadowBlur


CGColorRef cgColor = [color CGColor];

CGColorRef cgShadowColor = [shadowColor CGColor];

for (UITabBarItem *item in [self items])

if ([item respondsToSelector:@selector(selectedImage)] &&

[item respondsToSelector:@selector(setSelectedImage:)] &&

[item respondsToSelector:@selector(_updateView)])


CGRect contextRect;

contextRect.origin.x = 0.0f;

contextRect.origin.y = 0.0f;

contextRect.size = [[item selectedImage] size];

// Retrieve source image and begin image context

UIImage *itemImage = [item image];

CGSize itemImageSize = [itemImage size];

CGPoint itemImagePosition;

itemImagePosition.x = ceilf((contextRect.size.width – itemImageSize.width) / 2);

itemImagePosition.y = ceilf((contextRect.size.height – itemImageSize.height) / 2);


CGContextRef c = UIGraphicsGetCurrentContext();

// Setup shadow

CGContextSetShadowWithColor(c, shadowOffset, shadowBlur, cgShadowColor);

// Setup transparency layer and clip to mask

CGContextBeginTransparencyLayer(c, NULL);

CGContextScaleCTM(c, 1.0, -1.0);

CGContextClipToMask(c, CGRectMake(itemImagePosition.x, -itemImagePosition.y, itemImageSize.width, -itemImageSize.height), [itemImage CGImage]);

// Fill and end the transparency layer

CGContextSetFillColorWithColor(c, cgColor);

contextRect.size.height = -contextRect.size.height;

CGContextFillRect(c, contextRect);


// Set selected image and end context

[item setSelectedImage:UIGraphicsGetImageFromCurrentImageContext()];


// Update the view

[item _updateView];




// in ViewDidLoad{

// Give the selection color and its shadow

[[[self tabBarController] tabBar] recolorItemsWithColor:[UIColor whiteColor] shadowColor:[UIColor blackColor] shadowOffset:CGSizeMake(0.0f, -1.0f) shadowBlur:3.0f];


It’s works great friends 🙂

!! Enjoy !!

This entry was posted in iOS by Muzammil. Bookmark the permalink.

About Muzammil

Hey Guys, I am Muzammil Mohammad. Having 7 years of experience in iOS development. I am here to share my knowledge with all mobile application developers and those companies who are stuck on development (due to bad quality of code or don't know what to do) or want to know how to build a good mobile app. I believe I am more expert in UI and Architecture design of mobile app. So if you need my helps or assistant for your mobile app projects, Feel free to contact me. I will try my best to improve the quality of your app. Or you can hire me to develop your apps. I’d love to talk with you. Best!

7 thoughts on “Customize TabBar in iPhone

  1. // in ViewDidLoad also add this code to change the TabBar background color-

    CGRect frame = CGRectMake(0.0,0.0,self.view.bounds.size.width, 48);
    UIView *view = [[UIView alloc] initWithFrame:frame];
    UIImage *backgroundImage = [UIImage imageNamed:@”tabBar.png”];
    UIColor *tabBarColor = [[UIColor alloc] initWithPatternImage:backgroundImage];
    view.backgroundColor = tabBarColor;
    [tabBarColor release];

    [[[self tabBarController] tabBar] insertSubview:view atIndex:0];

    • 20. Izual_Yang 2008/06/23 11:41 TC臃肿?裸体版很小的。不理解为什么有的网友能折腾firefox和foobar不能折腾tc……TC不免费?多点一下鼠标就能使用所有功能,你还有啥不满?TC霸道?commander操作风格比eelropxr古老多了……而且你怎么不抱怨eelropxr霸道?可以替代eelropxr,多种布局方式,这让我想起Directory Opus,不过这个东西是要钱的……TC教徒路过……(0) 2008/06/23 12:34引用 withinsea 的评论:tc 风格太霸道了,嗯。作者的习惯是凡他不喜欢的操作习惯一概不予实现。这对于我等fx/foobar定制狂来说就是一只废品阿……withinsea reply on 六月 22, 2008,10:38 下午:(0)withinsea 2008/06/24 21:47因为 eelropxr 不是定制风格的产品,嗯。而 tc 本身很插件化定制化,但是——只限它提供的风格比如你可以随便修改光标框与选区的颜色但你想要光标反色?对不起,作者不喜欢。另一个不可忍受的例子是它的当前地址栏——你见过什么其它的软件需要单击后等待 1.5s 才允许输入么……软件这东西啊,要么就像 opera 一样把固定的功能做好做精彩要么就像 firefox 一样,留给用户几乎无限的个性化空间tc 这种带有强烈作者风格的半吊子最烦人了(0) 2008/06/24 22:47@withinsea顶!这样的软件我坚决抵制。(0)

      • Hi,I am using this Vertical TabPanel ; and I have one specific rqnmireueet, i.e. i have to add two check boxes in the the bottom edge of the bar. and I am not able to get access to that HTMLHTML first = new HTML( , true),rest = new HTML( , true); line no.123u know how can i manage to add checkboxes in the rest HTML which is added in to VerticalTabBar.Could u please help in to this.u can reply me on Thanks in advance !!Nitin

Leave a Reply

Your email address will not be published. Required fields are marked *