Custom UITabBar icons iOS

Question

I am developing a tabbed application and i want to integrate custom UITabbar background and icons. I already inserted a custom background but i have a problem with the icons.

This is how the icons are supposed to look:

enter image description here

But after adding the icons for each view in the storyboard i get grey icons like this:

enter image description here

Does anyone have an idea why the icons are displayed this way?

Thank you very much!

score 5 · Answer 1 · answered Dec 06 '14 at 19:37

Using Xcode 6, in order to be able to change images directly from Storyboard, you can do this:

@IBDesignable class CustomizedTabBarItem: UITabBarItem {
    @IBInspectable var finalImage:UIImage = UIImage() {
        didSet {
            self.image = finalImage.imageWithRenderingMode(.AlwaysOriginal)
        }
    }
    @IBInspectable var finalSelectedImage:UIImage = UIImage() {
        didSet {
            self.selectedImage = finalSelectedImage.imageWithRenderingMode(.AlwaysOriginal)
        }
    }
}

After, you just have to set the images in your storyboard enter image description here

score 2 · Answer 2 · answered Oct 28 '14 at 17:53

I can´t comment yet, so I´ll add as answer.

Since iOS 7 setFinishedSelectedImage:withFinishedUnselectedImage: is deprecated.

To solve this you can do it this way:

UIImage *selectedImage = [UIImage imageNamed:@"tabbar-highlight"];
selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *unselectedImage = [UIImage imageNamed:@"tabbar"];
unselectedImage = [unselectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tabBarItem = [[UITabBarItem alloc] initWithTitle:@"TabBarItem1" image:unselectedImage selectedImage:selectedImage];
//
//OR
//
UIImage *selectedImage = [UIImage imageNamed:@"tabbar-highlight"];
selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *unselectedImage = [UIImage imageNamed:@"tabbar"];
unselectedImage = [unselectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[yourTabBarItem setImage:unselectedImage];
[yourTabBarItem setSelectedImage:selectedImage];

Hope this help to clarify for iOS7+.

score 1 · Accepted Answer · answered Sep 11 '13 at 13:40

This is how I do it in one of my apps. In your AppDelegates didFinishLaunchingWithOptions: method, add this and fill in your image names:

    UITabBarController *tabController = (UITabBarController *)self.window.rootViewController;

    //tab1
    UIImage *selectedImage = [UIImage imageNamed:@"home-tab-selected"];
    UIImage *unselectedImage = [UIImage imageNamed:@"home2-tab"];
    MyTabBar *tabBar = (MyTabBar *)tabController.tabBar;
    UITabBarItem *item1 = [tabBar.items objectAtIndex:0];
    [item1 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];

    //tab2
    selectedImage = [UIImage imageNamed:@"customers-tab-selected"];
    unselectedImage = [UIImage imageNamed:@"customers-tab"];
    UITabBarItem *item2 = [tabBar.items objectAtIndex:1];
    [item2 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];

    //tab3
    selectedImage = [UIImage imageNamed:@"maps-tab-selected"];
    unselectedImage = [UIImage imageNamed:@"maps-tab"];
    UITabBarItem *item3 = [tabBar.items objectAtIndex:2];
    [item3 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];

    //tab4
    selectedImage = [UIImage imageNamed:@"reports-tab-selected"];
    unselectedImage = [UIImage imageNamed:@"reports-tab"];
    UITabBarItem *item4 = [tabBar.items objectAtIndex:3];
    [item4 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];

    //tab5
    selectedImage = [UIImage imageNamed:@"orders-tab-selected"];
    unselectedImage = [UIImage imageNamed:@"orders-tab"];
    UITabBarItem *item5 = [tabBar.items objectAtIndex:4];
    [item5 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];


    if ([tabBar respondsToSelector:@selector(setBackgroundImage:)])
    {
        // ios 5 code here
        [tabBar setBackgroundImage:[UIImage imageNamed:@"tab-bg"]];

    }

Works perfect for me.

No prob! I spent lots of time digging through all of the other similar questions on here and tutorials all around the web and found this solution works best. — RyanG, Sep 11 '13 at 14:00
I'm baffled why xcode wouldn't let us do this from the visual interface builder. Why would I want to programmatically set all of the tab bar icon images like this? — Zaqintosh, Oct 04 '13 at 01:18

score 1 · Answer 4 · answered Jan 04 '18 at 07:32

An updated Version to Julien's answer about IBInspectable is below

import UIKit

@IBDesignable
class CustomTabBarItem: UITabBarItem {
    @IBInspectable var finalImage: UIImage = UIImage() {
        didSet {
            self.image = finalImage.withRenderingMode(.alwaysOriginal)
            }
        }
    @IBInspectable var finalSelectedImage: UIImage = UIImage() {
       didSet {
            self.selectedImage = finalSelectedImage.withRenderingMode(.alwaysOriginal)
            }
        }
}

score 0 · Answer 5 · answered Sep 11 '13 at 13:39

You can set the finished image of the tab bar icons with setFinishedSelectedImage:withFinishedUnselectedImage: on UITabBarItem

Check the docs here (look under Appearance)

The default behavior of the UITabBarItem is to create a mask based on your icon then it applies that special blue treatment as your seeing.

score 0 · Answer 6 · answered Jul 28 '14 at 09:22

0

You can also keep it simple ;)

    [tabBarItemName setSelectedImage:[UIImage imageNamed:@"image name"]];

You'll have to declare the tabBarItemName in your ViewController.h

answered Jul 28 '14 at 09:22

user3760958

3
3

Custom UITabBar icons iOS

6 Answers6

Linked