How To Change The iOS Tab Bar Colors

Sometimes the simple things can catch us out and cause more work than needed. I have received a few requests to explain how you can change the color of iOS’ UITabBar navigation.

I find that this is one of those things easier to do using code than hunting through Xcode’s interface. So here goes!

This is the standard starting appearance of a UITabBar when you create a new instance, in this example I created a standard tabbed application using the built in template.

Starting UITabBar appearance.
Starting UITabBar appearance.

The goal is to change the color of our tab bar across the application, so we will set the look in our AppDelegate.swift. Go ahead and open it up and find the func application which can usually be found around line 17 in a new application. It should look something like this

We want to set a new color for the background tint of the bar, to do this we need to access the .backgroundColor property and provide a UIColor. I am going to use a pretty horrible Red tint so you can easily see it in action. So inside the application function I added.

Since we are settings these properties in code, we will not see them in the Xcode storyboard view. When I run the application in a simulator, this is the result.

iOS 11 Tabbar with Blue Active Icon
iOS 11 Tabbar with Blue Active Icon

Perfect!

Now it is icon time, first I am going to change the active tab icon color to a slightly more obvious blue. To do that I need to access the tintColor.

iOS 11 Tabbar with Blue active Icon

Great!

Finally, I want to change the inactive tab icon color to a dark Gray, this time I will use one of the predefined colors.

iOS 11 Tabbar with Gray Inactive Icon
iOS 11 Tabbar with Gray Inactive Icon

The Wrap

Changing the color of a control is often easier that it first appears once you turn to code. Using this method I do not have to go back to Xcode’s properties panel to keep changing things every a designer or client changes their mind. I can set them one in code and easily find them in the future.

Share Button