Change tab bar item selected color in a storyboard

Question

I want to change my tab bar items to be pink when selected instead of the default blue.

How can i accomplish this using the storyboard editor in Xcode 6?

Here are my current setting which are not working, the blue background works but the pink doesnt work:

Solution 1

Add Runtime Color attribute named "tintColor" from StoryBoard. This is working(for Xcode 8 and above).

if you want unselected color.. you can add unselectedItemTintColor too.

Solution 2

This elegant solution works great on SWIFT 3.0, SWIFT 4.2 and SWIFT 5.1:

On the Storyboard:

1. Select your Tab Bar
2. Set a Runtime Attibute called tintColor for the desired color of the Selected Icon on the tab bar
3. Set a Runtime Attibute called unselectedItemTintColor for the desired color of the Unselected Icon on the tab bar

Edit: Working with Xcode 8/10, for iOS 10/12 and above.

Solution 3

In Swift, using xcode 7 (and later), you can add the following to your AppDelegate.swift file:

UITabBar.appearance().tintColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0)

This is the what the complete method looks like:

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

    // I added this line
    UITabBar.appearance().tintColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0)

    return true
}

In the example above my item will be white. The "/255.0" is needed because it expects a value from 0 to 1. For white, I could have just used 1. But for other color you'll probably be using RGB values.

Solution 4

On Xcode8 I have changed the ImageTint from the storyboard and it works well.

The result:

Solution 5

Swift 3 | Xcode 10

If you want to make all tab bar items the same color (selected & unselected)...

---

Step 1

Make sure your image assets are setup to Render As = Template Image. This allows them to inherit color.

---

Step 2

Use the storyboard editor to change your tab bar settings as follows:

• Set Tab Bar: Image Tint to the color you want the selected icon to inherit.
• Set Tab Bar: Bar Tint to the color you want the tab bar to be.
• Set View: Tint to the color you want to see in the storyboard editor, this doesn't affect the icon color when your app is run.

---

Step 3

Steps 1 & 2 will change the color for the selected icon. If you still want to change the color of the unselected items, you need to do it in code. I haven't found a way to do it via the storyboard editor.

Create a custom tab bar controller class...

//  TabBarController.swift

class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // make unselected icons white
        self.tabBar.unselectedItemTintColor = UIColor.white
    }
}

... and assign the custom class to your tab bar scene controller.

---

If you figure out how to change the unselected icon color via the storyboard editor please let me know. Thanks!

View more solutions

Comments

[User31]

Possible duplicate of tab-bar-item-tint-color!

[Talha Ahmed]

Check this answer it will help you for the solution: stackoverflow.com/a/58727092/7804300

[Deekor]

Is there no way to change for all of the tabs?

[Deekor]

getting: 'UITabBar' does not have a member named 'setSelectedImageTintColor'

[Deekor]

Also i am using swift so I put: self.tabBar.setSelectedImageTintColor = UIColor.greenColor not sure if that is correct or not

[chancyWu]

@Deekor it's tintColor not selectedImageTintColor, btw selectedImageTintColor is deprecated in iOS 8.

[Nick]

Just put the code with the same color in the view did load of all of your tabs

[Sourabh86]

it worked for me when I added this property to UITabBarItem and not UITabBar.

[klefevre]

Any reason why it doesn't work with the option attribute ?

[Mehul Thakkar]

Xcode bug, nothing else. I have also found too many bugs of using UITextView inside UITableViewCell using from storyboard in Xcode 6.4.

[Allen]

How did you find this awesome solution!

[Mehul Thakkar]

Actually, value of any property can be set from User Defined Attributes, so, instead of programmatically setting tintColor property, i used to set directly from xib

[Asadullah Ali]

@MehulThakkar how can I do this with the font size of Title of the item ?

[Mehul Thakkar]

@AsadullahAli: Not getting, what you are asking for

[Asadullah Ali]

I want to change the font size of the Title of TabBarItem. Can I do it from storyboard they way you changed the TintColor.

[Mehul Thakkar]

No, you cant, you can only set properties of given UI-Object, now, UITabbarItem doesn't have any property for font size

[Mehul Thakkar]

you can change font size by programmatically writing following code [tab.tabBarItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIFont fontWithName:@"Helvetica" size:20.0], UITextAttributeFont, nil] forState:UIControlStateNormal];

[Jerrin]

you can use this code right after you make your UITabController , it will set the colour you mentioned for all tab items on selection.

[Peter]

But how do you set the tab bar item UNselected color in storyboard?

[rosshump]

Works perfect for my case - I need my five tabBar items to be unique colours when selected. I was able to set this Runtime Attribute on the UITabBarItem, on the UINavigationController connected to my tabBar and it works flawlessly. All without writing any code too which is great, as I am reusing a VC class three times. Thanks!

[Felipe Ignacio Noriega Alcaraz]

Had the same problem in xcode 7.3.1 so if its a bug its still unresolved...

[luky]

conversely - this is the only approach that works on iOS 10 (tint from attributes panel seems to not work, and runtime attribute "tintColor" of uitabbaritem doesn't work too.

[Hedylove]

Complicated. Jarrod's answer works well with all icons.

[teddy]

It seems none of the other method works (any more.) This works!

[Rushi trivedi]

Thanks a lot. unselectedItemTintColor finds very rare

[fozoglu]

'unselectedItemTintColor' perfect solution for me thanks.

[ondermerol]

setUnselectedItemTintColor is for only iOS 10

[Sharukh Mastan]

StackOverflow 1 : Apple 0

[Mohammad Zaid Pathan]

Worked well on iOS 10.

[Mamta]

Will this work if deployment target is 8.0 or 9.0? I have used swift 3.0 and Xcode 8.0 for development

[Juanjo]

When using custom images THIS IS the one that worked for me

[Lance Samaria]

@Jarrod I was fooling around with this for almost 1 hr, this answer should have more votes. Thanks!

[Saeed Rahmatolahi]

in iOS 9 it doesn't change the unselected color

[Cons Bulaquena]

Important to select the Tab bar, indeed worked in Swift 4 for me.

[Mihail Minkov]

Excellent! Still working on xCode 10 :) does not refresh the visual editor but works once compiled :)

[Madhu Avinash]

How would that help in changing color of UITabBar icon ?

[Madhu Avinash]

There's no such method setSelectedImageTintColor

[ChuckZHB]

worked on Xcode 10, iOS 12. Does the name must be tintColor and unselectedItemTintColor then Xcode could use it?

[Louis Lemasson]

This should be the accepted answer. It doesn't require a runtime attribute which means this works in Launch screens!

[Wahab Khan Jadon]

self.tabBar.unselectedItemTintColor = UIColor.white self.tabBar.tintColor = #colorLiteral(red: 0.2, green: 0.7333333333, blue: 0.3450980392, alpha: 1) Work for me

[Wahab Khan Jadon]

UITabBar.appearance().tintColor = #colorLiteral(red: 0.9490196078, green: 0.3647058824, blue: 0.1450980392, alpha: 1) work for me ...

[Marcelo Gracietti]

Yes @ChuckZHB. Names must be tintColor and unselectedItemTintColor.