Changing tab bar item image and text color iOS

Question

Here is my tab bar:

The following image shows the program being run an

Answer 1

I know here are lots of answers but I can't find an easy and valid copy/paste answer for Swift 4.2/ Swift 5.1

tabBarController?.tabBar.tintColor = UIColor.red
tabBarController?.tabBar.unselectedItemTintColor = UIColor.green

Or use UITabBarItem.appearance() instead of tabBarController?.tabBar

Images have to be UIImageRenderingModeAlwaysTemplate

Answer 2

Year: 2020 iOS 13.3

Copy below codes to AppDelegate.swift -> func didFinishLaunchingWithOptions

//Set Tab bar text/item fonts and size
let fontAttributes = [NSAttributedString.Key.font: UIFont(name: "YourFontName", size: 12.0)!]
UITabBarItem.appearance().setTitleTextAttributes(fontAttributes, for: .normal)
//Set Tab bar text/item color
UITabBar.appearance().tintColor = UIColor.init(named: "YourColorName")

Answer 3

Subclass your TabbarViewController and in ViewDidLoad put this code:

 [UITabBarItem.appearance setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor darkGreyColorBT]} forState:UIControlStateNormal];
    [UITabBarItem.appearance setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor nightyDarkColorBT]} forState:UIControlStateSelected];

    self.tabBar.items[0].image  = [[UIImage imageNamed:@"ic-pack off@3x.png"]  imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[0].selectedImage  = [[UIImage imageNamed:@"ic-pack@3x.png"]  imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[1].image = [[UIImage imageNamed:@"ic-sleeptracker off@3x.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[1].selectedImage  = [[UIImage imageNamed:@"ic-sleeptracker@3x.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[2].image = [[UIImage imageNamed:@"ic-profile off@3x.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[2].selectedImage  = [[UIImage imageNamed:@"ic-profile@3x.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

This is the simplest working solution I have

Answer 4

Swift 4.2 and Xcode 10

The solution that worked for me:

1. Image setup - from the storyboard set Bar Item Image and Selected Image. To remove the tint overlay on the images go to Assets catalog, select the image and change its rendering mode like this:

This will prevent the Tab bar component from setting its default image tint.

2. Text - here I created a simple UITabBarController subclass and in its viewDidLoad method I customized the default and selected text color like this:

   class HomeTabBarController: UITabBarController {
       override func viewDidLoad() {
           super.viewDidLoad()
   
           let appearance = UITabBarItem.appearance(whenContainedInInstancesOf: [HomeTabBarController.self])
           appearance.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: .black], for: .normal)
           appearance.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: .red], for: .selected)
       }
   }
   

Just set this class as your Tab bar controller custom class in identity inspector in IB.

Voila! That's it.

iOS 13 Update:

Add this to your setup for iOS 13:

if #available(iOS 13, *) {
    let appearance = UITabBarAppearance()
    appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: .red]
    tabBar.standardAppearance = appearance
}

Answer 5

For Swift 4.0, it's now changed as:

tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor.gray], for: .normal)
tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor.blue], for: .selected)

You don't have to subclass the UITabBarItem if your requirement is only to change the text color. Just put the above code inside your view controller's viewDidLoad function.

For global settings change tabBarItem to UITabBarItem.appearance().

Answer 6

Swift 3

First of all, make sure you have added the BOOLEAN key "View controller-based status bar appearance" to Info.plist, and set the value to "NO".

Appdelegate.swift

Insert code somewhere after "launchOptions:[UIApplicationLaunchOptionsKey: Any]?) -> Bool {"

1. Change the color of the tab bar itself with RGB color value:

UITabBar.appearance().barTintColor = UIColor(red: 0.145, green: 0.592, blue: 0.804, alpha: 1.00)

OR one of the default UI colors:

UITabBar.appearance().barTintColor = UIColor.white)

---

2. Change the text color of the tab items:

The selected item

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.white], for: .selected)

The inactive items

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.black], for: .normal)

3. To change the color of the image, I believe the easiest approach is to make to separate images, one for each state.

If you don´t make the icons from scratch, alternating black and white versions are relatively easy to make in Photoshop.

---

Adobe Photoshop (almost any version will do)

Make sure your icon image has transparent background, and the icon itself is solid black (or close).

Open the image file, save it under a different file name (e.g. exampleFilename-Inverted.png)

In the "Adjustments" submenu on the "Image" menu:

Click "Invert"

You now have a negative of your original icon.

In XCode, set one of the images as "Selected Image" under the Tab Bar Properties in your storyboard, and specify the "inactive" version under "Bar Item" image.

Ta-Da