Changing color of the active whole section in tab bar - iOS 7

Question

(Hopefully) Quick question!

I would like to make a custom tab bar design. Right now it looks like this:

What I've done is:

• Changed the background color to dark grey
• Changed the tint color to blue.

But I would like to have the background of the active button be another color, like this:

So:

• Dark grey background
• White icons (Active as well as inactive)
• Background of selected button showing the state (blue in this case)

How can I accomplish this? Thank you.

Answer 1

One way to accomplish this would be following these steps:

1. Set the background color for the whole tab bar:

   tabBar.backgroundColor = [UIColor grayColor];
   

2. Have your tab icon images be the color you want them to be (white). Then set up each tab like this:

   UIImage *tabImage = [UIImage imageNamed:@"my_image"];
   // make sure the original color of the image is used, rather than templating it
   tabImage = [tabImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
   myViewController.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"title" image:tabImage  tag:0];
   

3. Set the tintColor of the tab bar to white also so that the selected tab won't change colors:

   tabBar.tintColor = [UIColor whiteColor];
   

4. Set the selectionIndicatorImage to get a blue background on the selected tab. You'll need to create an image either programmatically or by importing it.