How do I change background color of UITabItem when item is selected

Question

I would like a different background color when the user selects a tab bar item than when it is unselected.

Answer 1

UPDATE: As of iOS 7.1 this technique no longer works (if the user taps the same tab twice in succession, the background colour is cleared).

---

UITabBarItem is a subclass of UIBarItem, everything is more painful because UIBarItem doesn't subclass UIView; however, UITabBarItem contains one. What follows manipulates that view, and therefore might be rejected if submitted to the AppStore.

1) Subclass UITabBarItem

Create a subclass of UITabBarItem and add a new selected property to its header, like so:

@interface ALDTabBarItem : UITabBarItem
@property (nonatomic, assign, getter = isSelected) BOOL selected;
@end

UITabBarItems have a view property, but it isn't exposed. We can extend the class to access it, and then create a custom setter on the selected property to change the background colour, like so:

#import "ALDTabBarItem.h"

@interface ALDTabBarItem (ALD)
@property (nonatomic, strong) UIView *view;
@end

@implementation ALDTabBarItem

- (void)setSelected:(BOOL)selected
{
    if(selected)
        self.view.backgroundColor = [UIColor redColor];
    else
        self.view.backgroundColor = [UIColor clearColor];
} 

@end

2) Update your UITabBarController delegate

Add the following code to the delegate of your UITabBarController, which sets the selected states of the UITabBar:

- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item
{
    for(ALDTabBarItem *myItem in tabBar.items)
        myItem.selected = (myItem == item);
}

Answer 2

Currently in Xcode 8.3.2 you can do it inside the storyboard using an image that will represent the actual background.

Select the tab bar inside your tab bar controller:

Inside the Utilities choose the Attributes Inspector and change the selection background image:

Answer 3

Follow this Steps:

1. Create SubClass of UITabBarController

2. Go to viewDidAppear of UITabBarController subclass

3. Now Find the size of TabBarItem,

   UITabBar *tabBar = self.tabBar;
   CGSize imgSize = CGSizeMake(tabBar.frame.size.width/tabBar.items.count,tabBar.frame.size.height);
   

4. Now Create the image with that size,

   //Create Image
   UIGraphicsBeginImageContextWithOptions(imgSize, NO, 0);
   UIBezierPath* p =
   [UIBezierPath bezierPathWithRect:CGRectMake(0,0,imgSize.width,imgSize.height)];
   [[UIColor blueColor] setFill];
   [p fill];
   UIImage* finalImg = UIGraphicsGetImageFromCurrentImageContext();
   UIGraphicsEndImageContext();
   

5. Now, Assign this image to TabBar's SelectionIndicatorImage

   [tabBar setSelectionIndicatorImage:finalImg];
   

Swift 4 Version:

let imgSize = CGSize(width: tabBar.frame.size.width / CGFloat(tabBar.items!.count),
                     height: tabBar.frame.size.height)
UIGraphicsBeginImageContextWithOptions(imgSize, false, 0)
let p = UIBezierPath(rect: CGRect(x: 0, y: 0, width: imgSize.width,
                                  height: imgSize.height))
UIColor.blue.setFill()
p.fill()
let finalImg = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
UITabBar.appearance().selectionIndicatorImage = finalImg

Answer 4

if you use a storyboard or xibs, click "Tab Bar" and add "selectedImageTintColor" path into the Key Path Attributes tag. Like this :

Answer 5

Put this in the Appdelegate.m in application didFinishLaunchingWithOptions

UIImage *whiteBackground = [UIImage imageNamed:@"whiteBackground"];
[[UITabBar appearance] setSelectionIndicatorImage:whiteBackground];

Answer 6

My answer is similar to @Mehul Thakkar but it is in Swift 4 and to improve on his answer I would say that if you place the code in viewDidAppear as he suggests users will see the change happening which is not good user experience.

So create the custom class for your tabbar controller and in viewDidLoad place the following code:

let singleTabWidth: CGFloat = self.tabBar.frame.size.width / CGFloat((self.tabBar.items?.count)!)
let singleTabSize = CGSize(width:singleTabWidth , height: self.tabBar.frame.size.height)

let selectedTabBackgroundImage: UIImage = self.imageWithColor(color: .white, size: singleTabSize)
self.tabBar.selectionIndicatorImage = selectedTabBackgroundImage

The imageWithColor function is below for you:

//image with color and size
    func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()

        context!.setFillColor(color.cgColor)
        context!.fill(rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image!
    }

Hope this helps someone.