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

Put this in the Appdelegate.m in application didFinishLaunchingWithOptions

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

Answer 2

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

Answer 3

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 4

In Swift

UITabBar.appearance().selectionIndicatorImage = UIImage(named: "tabSelected")

with an image tabSelected@2x.png of size 98x98 pixels

Answer 5

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 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.

Answer 7

Please refer below URL's.

Changing Tint / Background color of UITabBar

How To Change Tab bar color in Xcode

hope this will help you..

try this to change tabbar item color but it only work in ios5.

if ([UITabBar instancesRespondToSelector:@selector(setSelectedImageTintColor:)])
{
    [tabBarController.tabBar setSelectedImageTintColor:[UIColor redColor]];
}

Answer 8

You can use tintcolor.

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

In AppDelegate.m, put the following code after // Override point for customization after application launch.

Answer 9

Put this in your AppDelegate.m file:

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
            // Override point for customization after application launch.

            [UITabBar appearance].selectionIndicatorImage = [UIImage imageNamed:@"activeTabBackgroundImage"];


            return YES;
        }

Answer 10

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 11

Answer in swift 4:

setSelectedImageTintColor is deprecated on iOS 8.

Instead use this :

self.tabBar.tintColor = UIColor.white