Is there a way to use a custom selected image for UITabBarItem?

Question

I like to have a custom selected image when a user selects an item on the tab bar, by default it selects as blue like but would like to have a green color instead. something like below any thoughts?

Answer 1

Just found my solution. Basically, I subclassed UITabItem and set this in the navigation controller:

-(void) viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];

    CustomTabBarItem *tabItem = [[CustomTabBarItem alloc] initWithTitle:@"Events" image:[UIImage imageNamed:@"tabIcon.png"] tag:0];
    tabItem.customHighlightedImage=[UIImage imageNamed:@"tabIconSelected.png"];
    self.tabBarItem = tabItem;
    [tabItem release];
    tabItem=nil;            
}

Here's what the CustomTabBarItem class looks like:

@interface CustomTabBarItem : UITabBarItem
{
    UIImage  *customHighlightedImage;
}

@property (nonatomic, retain) UIImage *customHighlightedImage;

@end

implementation:

#import "CustomTabBarItem.h

@implementation CustomTabBarItem

@synthesize customHighlightedImage;

- (void)dealloc {
    [customHighlightedImage release];
    customHighlightedImage=nil;
    [super dealloc];
}

-(UIImage *)selectedImage {
    return self.customHighlightedImage;
}

@end

Answer 2

In iOS 6 I have change the selected tabbatitem image like -

in tabbar controller delegate method

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController

{
    if([tabBarController selectedIndex] == 0)
    {
        [viewController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"selected.png"]withFinishedUnselectedImage:[UIImage imageNamed:@"unselect.png"]];
    }    
}

through this you can change your image.

Or you can use directly in your view controllers init(or ViewWillAppear) method, like

        [viewController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"selected.png"]withFinishedUnselectedImage:[UIImage imageNamed:@"unselect.png"]];

i hope this'll help you.

Answer 3

This is not officially supported in the SDK. You may be able to probe and adjust the tab's views at runtime, but you risk a rejection from Apple.

Edit: For completeness, I should mention that your other option is to roll your own UITabBar.

Answer 4

Just add some custom views (using insertSubview:atIndex:) when the UITabBarController-delegate-methods are called.

Example:

– (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
    [tabBarController.tabBar insertSubview:someView atIndex:someIndex];
}

You can try changing someIndex yourself till you have the result you want.

Answer 5

For iOS5 and upwards, you can just do this:

rootTabBarController.tabBar.selectedImageTintColor = [UIColor greenColor];

Answer 6

I believe you can now do this with :

[[[[self tabBar] items] objectAtIndex:0] setFinishedSelectedImage:nil withFinishedUnselectedImage:nil];

Answer 7

When using storyboards you can simply select your TabBarController's TabBar and then change the Image Tint in the Identity Inspector. This should also work with XIBs.

Look here for an image describing the todos

Answer 8

In AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions (NSDictionary *)launchOptions {

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

return YES;

}

This will give you a red color, change the color with the one you wish whiteColor, blueColor etc..

Answer 9

In my UITabBarController's viewDidLoad:, based on Rizzu's answer:

for (int i = 0; i < [self.viewControllers count]; i++)
{
    UIViewController* viewController = [self.viewControllers objectAtIndex:i];

    if(i == 0)
    {
        [viewController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"btn_list_all_hover.png"]withFinishedUnselectedImage:[UIImage imageNamed:@"btn_list_all.png"]];
    }
    else if(i == 1)
    {
        [viewController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"btn_settings_hover.png"]withFinishedUnselectedImage:[UIImage imageNamed:@"btn_settings.png"]];
    }
}