UITabBar not showing selected item images in ios 7

Question

The icons show fine in ios 6 but not in ios 7. I'm setting the selected state in the viewController viewDidLoad method. When the user selects a tab bar item the image disappears. Here is my code:

UITabBar *tabBar = self.tabBarController.tabBar;
if ([UITabBar instancesRespondToSelector:@selector(setSelectedImageTintColor:)]) {
    [self.tabBarController.tabBar setSelectedImageTintColor:[UIColor whiteColor]];
}
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
UITabBarItem *item3 = [tabBar.items objectAtIndex:3];
[item0 setTitle:@"Home"];
[item1 setTitle:@"Calendar"];
[item2 setTitle:@"News"];
[item3 setTitle:@"My Events"];
[item0 setFinishedSelectedImage:[UIImage imageNamed:@"homeIconSelected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"home2.png"]];
[item1 setFinishedSelectedImage:[UIImage imageNamed:@"Calendar"] withFinishedUnselectedImage:[UIImage imageNamed:@"CalendarIconSelected"]];
[item2 setFinishedSelectedImage:[UIImage imageNamed:@"NewsIconSelected"] withFinishedUnselectedImage:[UIImage imageNamed:@"News"]];
[item3 setFinishedSelectedImage:[UIImage imageNamed:@"EventsIconSelected"] withFinishedUnselectedImage:[UIImage imageNamed:@"Events"]];
[item1 imageInsets];
[item2 imageInsets];
[item3 imageInsets];

score 97 · Accepted Answer · edited Dec 24 '22 at 05:45

97

You need to use tabBarItem initWithTitle:image:selectedImage

[[UITabBarItem alloc] initWithTitle:@"title" image:image selectedImage:imageSel];

in conjunction with changing the UIImage rendering mode:

imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal

or (to apply parent views template tint mask, this option is default for Tab bar Items unless you opt out with the above rendering mode)

imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate

here is a code sample for one tab bar item :-

UIImage *musicImage = [UIImage imageNamed:@"music.png"];
UIImage *musicImageSel = [UIImage imageNamed:@"musicSel.png"];

musicImage = [musicImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
musicImageSel = [musicImageSel imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

self.musicViewController.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"Music" image:musicImage selectedImage:musicImageSel];

edited Dec 24 '22 at 05:45

starball

20,030
7
43
238

answered Sep 19 '13 at 17:26

gav

1,293
13
14

@Rushabh I need a little more info, where are you calling it from it it from Appdelegate, viewController or UITabbar/Controller Subclass or category – gav Sep 21 '13 at 12:36
This only works for one of the images. Using this exact code unselected tab items look like the icon I set. The selected though is just a blue circle. – Halsafar Oct 23 '13 at 20:31
I'm currently experiencing this same problem, but only when running a non-retina device with iOS 7 installed. – MusiGenesis Feb 24 '14 at 21:23
In iOS 7.1, this workaround isn't needed. I wonder if this is a bug or not? – Kyokook Hwang Jul 25 '14 at 06:09
Please note that `In conjunction with changing the UIImage rendering mode: imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal` is a **very important** detail. If your image is configured as a template, the default system color will appear. So instead of `item.selectedImage = someImage;`, try `item.selectedImage = [someImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];` and see if it works. – Alejandro Iván Aug 29 '16 at 16:16

score 56 · Answer 2 · answered Oct 21 '15 at 08:45

56

Set bar item image's render mode to original can solve this problem. This can be done by using images in the .xcassets, so you don't have to write lots of codes.

First step, drap&drop your bar item images to Assets.xcassets.

Second step, choose the bar item image, and change [Render As] to [Original Image]

ps: I usually set the TabBarController's tab bar items all by story board to avoid writing lots of code.

answered Oct 21 '15 at 08:45

Jia Xiao

667
6
5

1

Cleaner way to fix tab bar image issue. Thankyou – Ratan Jan 05 '16 at 13:26
Thank you Jia Xiao! – Marin Oct 28 '16 at 18:45
Whoa!! Thanks alot – Anurag Sharma May 26 '17 at 07:19
That answer must be accept because there is no need to do code to show original image from StoryBoard. great man keep it up – Nitin Gohel Jun 27 '17 at 14:10

score 45 · Answer 3 · edited Dec 27 '22 at 03:34

Add these lines of code in

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];

tabBarItem1.selectedImage = [[UIImage imageNamed:@"selectimg"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
tabBarItem1.image = [[UIImage imageNamed:@"deselectimg"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
tabBarItem1.title = @"xxxx";

tabBarItem2.selectedImage = [[UIImage imageNamed:@"selectimg"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
tabBarItem2.image = [[UIImage imageNamed:@"deselectimg"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
tabBarItem2.title = @"xxxx";

tabBarItem3.selectedImage = [[UIImage imageNamed:@"selectimg"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
tabBarItem3.image = [[UIImage imageNamed:@"deselectimg"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
tabBarItem3.title = @"xxxx";

tabBarItem4.selectedImage = [[UIImage imageNamed:@"selectimg"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
tabBarItem4.image = [[UIImage imageNamed:@"deselectimg"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
tabBarItem4.title = @"xxxx";

return YES;
}

this works for me.

This works well for iOS7, just an FYI that the method [UIImage imageWithRenderingMode] is not available on earlier SDKs. — JBlake, Dec 10 '13 at 08:47
Not working for me on iOS7. Neither background image nor tabbar item's images are showing. — Ans, Apr 20 '14 at 09:43
Thanks! this thing gave me a headache for 2 hours..the documentation said to use the method initWithTitle:image:selectedImage:...but that was not working for me at all! Your way works great — Josh Engelsma, Jul 15 '14 at 00:15

score 16 · Answer 4 · edited Jun 22 '15 at 18:51

16

No answers helped fixing this issue. The main reason is that my TabBarController wasn't my RootViewController.

The solution I used for Storyboards, and I just clicked my UITabButton and I added a runtime attribute for selectedImage:

For each of the different views associated with the UITabController.

edited Jun 22 '15 at 18:51

Cesare

9,139
16
78
130

answered May 13 '15 at 13:02

Joakim

3,224
3
29
53

Thank you so much for this answer! – Cesare Jun 22 '15 at 18:02

score 9 · Answer 5 · answered Nov 21 '13 at 00:26

After spending a couple of hours trying to make my custom tabbar to work for both iOS 6 & 7, that's what worked for me...

UITabBarController *tabBarController = (UITabBarController *)[[self window] rootViewController];

UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];

tabBarItem1.title = @"Home";
tabBarItem2.title = @"Map";
tabBarItem3.title = @"Weather";
tabBarItem4.title = @"Info";

if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7) {
    [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"cyexplore_home_white.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"cyexplore_home_black.png"]];
    [tabBarItem2 setFinishedSelectedImage:[UIImage imageNamed:@"cyexplore_cloud_white.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"cyexplore_cloud_black.png"]];
    [tabBarItem3 setFinishedSelectedImage:[UIImage imageNamed:@"cyexplore_map_white.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"cyexplore_map_black.png"]];
    [tabBarItem4 setFinishedSelectedImage:[UIImage imageNamed:@"cyexplore_info_white.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"cyexplore_info_black.png"]];
} else {
    tabBarItem1.selectedImage = [[UIImage imageNamed:@"cyexplore_home_white"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
    tabBarItem1.image = [[UIImage imageNamed:@"cyexplore_home_black"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];

    tabBarItem2.selectedImage = [[UIImage imageNamed:@"cyexplore_cloud_white"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
    tabBarItem2.image = [[UIImage imageNamed:@"cyexplore_cloud_black"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];

    tabBarItem3.selectedImage = [[UIImage imageNamed:@"cyexplore_map_white"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
    tabBarItem3.image = [[UIImage imageNamed:@"cyexplore_map_black"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];

    tabBarItem4.selectedImage = [[UIImage imageNamed:@"cyexplore_info_white"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
    tabBarItem4.image = [[UIImage imageNamed:@"cyexplore_info_black"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
}

UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
[[UITabBar appearance] setBackgroundImage:tabBarBackground];
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tabbar_selected.png"]];
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor blackColor], UITextAttributeTextColor, nil] forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor, nil] forState:UIControlStateSelected];

score 8 · Answer 6 · answered Oct 23 '13 at 23:38

if you are working with storyboards you have to put the identifier : "custom" in Navigation Controller.

then :

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Assign tab bar item with titles
    UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
    UITabBar *tabBar = tabBarController.tabBar;
    UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
    UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
    UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];

    (void)[tabBarItem1 initWithTitle:nil image:[UIImage imageNamed:@"home.png"] selectedImage:[UIImage imageNamed:@"home_selected.png"]];
    (void)[tabBarItem2 initWithTitle:nil image:[UIImage imageNamed:@"home.png"] selectedImage:[UIImage imageNamed:@"home_selected.png"]];
    (void)[tabBarItem3 initWithTitle:nil image:[UIImage imageNamed:@"home.png"] selectedImage:[UIImage imageNamed:@"home_selected.png"]];

    // Change the tab bar background
    UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
    [[UITabBar appearance] setBackgroundImage:tabBarBackground];



    return YES;
}

This works for me.

Thanks a lot. I didn't had "custom" in NavigationController. — Ricardo, Mar 31 '15 at 16:53

score 3 · Answer 7 · answered Oct 15 '13 at 16:19

3

None of the answers worked for me - I am using MonoTouch but if you set the TintColor property of the UITabBar itself that will highlight the selected image with that color. In obj c it may be setTintColor function.

answered Oct 15 '13 at 16:19

jharr100

1,449
24
51

1

Thank you, jharr100, this resolved the issue for me. :) I wish I could upvote this twice! – BruceHill Jan 14 '14 at 14:23

score 3 · Answer 8 · edited Jan 08 '14 at 14:30

3

You should write to the function:

UIImage* tab_image = [UIImage imageNamed:@"tab_image.png"];
UIImage* tab_image_selected = [UIImage imageNamed:@"tab_image_selected.png"];

tab_image = [tab_image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tab_image_selected = [tab_image_selected imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

self.tabBarItem.image = tab_image;
self.tabBarItem.selectedImage = tab_image_selected;

I hope this helps

edited Jan 08 '14 at 14:30

Steven

974
6
18

answered Dec 12 '13 at 16:23

Thành Vũ

41
1

Just in case you didn't know, you can use [markdown](http://StackOverflow.com/editing-help) to format code snippets in the body of your post. This helps make your question/answer more concise and readable. Additionally, make sure you're actually answering the original poster's question. – brandonscript Dec 12 '13 at 16:44

score 3 · Answer 9 · answered Oct 07 '14 at 12:45

I had the same problem with Xcode 6.0.1 (6A317), seems to be a bug with Interface builder. However, i've managed to solve it by leaving selected image empty in interface builder then at each viewDidLoad in my view controllers i did insert:

[self.navigationController.tabBarItem setSelectedImage:[UIImage imageNamed:@"imagename-selected"]];

it works well now, showing my selectedImage and with global tint mask.

score 2 · Answer 10 · answered Nov 19 '13 at 09:09

Based on the answer from 132206, I made this method for AppDelegate, called from application:didFinishLaunchingWithOptions: with:

[self configureSelectedImages];

It obviously requires a strict naming convention for your tab images, but can also be re-used without editing. To state the obvious - name your selected tab bar images TabbarXXXSelected, where XXX equals the title of the tab bar item.

- (void)configureSelectedImages
{
    UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
    UITabBar *tabBar = tabBarController.tabBar;

    for (UITabBarItem *tabBarItem in [tabBar items]) {
        NSString *selectedImage = [NSString stringWithFormat:@"Tabbar%@Selected", [tabBarItem title]];
        (void)[tabBarItem initWithTitle:[tabBarItem title] image:[tabBarItem image] selectedImage:[UIImage imageNamed:selectedImage]];
    }
}

score 2 · Answer 11 · answered Jun 23 '14 at 07:05

In your first view controller's .h file, I added the following: @property (weak, nonatomic) IBOutlet UITabBarItem *mapViewTabBarItem; @property (weak, nonatomic) IBOutlet UITabBarItem *profileViewTabBarItem; @property (weak, nonatomic) IBOutlet UITabBarItem *notificationViewTabBarItem;

(note that the mapViewTabBarItem was linked by ctrl dragging the actual tab bar item into the list of property declarations at the top of the .h file)

Next, in the same view controller's .m file in the viewDidLoad, add the following:

self.tabBarItem = [self.tabBarController.tabBar.items objectAtIndex:0];
_mapViewTabBarItem.selectedImage = [[UIImage imageNamed:@"@2x-map-icon-selected.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
self.tabBarItem.image = [[UIImage imageNamed:@"@2x-map-icon.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];

_profileViewTabBarItem = [self.tabBarController.tabBar.items objectAtIndex:1];
_profileViewTabBarItem.selectedImage = [[UIImage imageNamed:@"@2x-profile-icon-selected.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
_profileViewTabBarItem.image = [[UIImage imageNamed:@"@2x-profile-icon.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];

_notificationViewTabBarItem = [self.tabBarController.tabBar.items objectAtIndex:2];
_notificationViewTabBarItem.selectedImage = [[UIImage imageNamed:@"@2x-notifications-icon-selected.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
_notificationViewTabBarItem.image = [[UIImage imageNamed:@"@2x-notifications-icon.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];

score 2 · Answer 12 · answered Oct 01 '14 at 20:07

I had a similar problem. I created the tab bar in storyboard and added all the images through the interface builder menus, none in code.

My fix was actually simple: under the attributes inspector window in IB, the Tab Bar Item field for "Selected Image" should be blank, and the Bar Item field for "Image" should be filled with the image you want.

I am running Xcode 6.0.1 and testing with iOS 8.0.2 devices.

score 1 · Answer 13 · edited Jun 22 '15 at 18:34

1

Use the code below to fix the image issue in iOS7:

[[UITabBarItem alloc] initWithTitle:@"title" image:[[UIImage imageNamed:@"YOUR_IMAGE.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] selectedImage:[[UIImage imageNamed:@"YOUR_SEL_IMAGE.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

edited Jun 22 '15 at 18:34

TigerhawkT3

48,464
6
60
97

answered Dec 17 '13 at 13:00

Sandip Patel - SM

3,346
29
27

score 1 · Answer 14 · edited May 07 '15 at 09:50

Try this:

UITabBarItem *item1 = [[UITabBarItem alloc] initWithTitle:@"" image:[UIImage imageNamed:@"Icon-Small-50.png"] tag:100];
UITabBarItem *item2 = [[UITabBarItem alloc] initWithTitle:@"" image:[UIImage imageNamed:@"image-50.png"] tag:200];
UITabBarItem *item3 = [[UITabBarItem alloc] initWithTitle:@"" image:[UIImage imageNamed:@"Icon-clip-50.png"] tag:300];
UITabBarItem *item4 = [[UITabBarItem alloc] initWithTitle:@"" image:[UIImage imageNamed:@"Icon-color-50.png"] tag:400];
UITabBarItem *item5 = [[UITabBarItem alloc] initWithTitle:@"" image:[UIImage imageNamed:@"Icon-lock-50.png"] tag:500];

[item1 setSelectedImage:[[UIImage imageNamed:@"Icon-Small-50.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item1 setImageInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

[item2 setSelectedImage:[[UIImage imageNamed:@"image-50.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item2 setImageInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

[item3 setSelectedImage:[[UIImage imageNamed:@"Icon-clip-50.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item3 setImageInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

[item4 setSelectedImage:[[UIImage imageNamed:@"Icon-color-50.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item4 setImageInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

[item5 setSelectedImage:[[UIImage imageNamed:@"Icon-lock-50.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item5 setImageInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

item1.image = [[UIImage imageNamed:@"Icon-Small-50.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

item2.image = [[UIImage imageNamed:@"image-50.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

item3.image = [[UIImage imageNamed:@"Icon-clip-50.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item4.image = [[UIImage imageNamed:@"Icon-color-50.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item5.image = [[UIImage imageNamed:@"Icon-lock-50.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

Could you please elaborate more your answer adding a little more description about the solution you provide? — abarisone, May 07 '15 at 09:45

score 0 · Answer 15 · answered Nov 20 '13 at 10:19

I had the same issue. But working with StoryBoards prevented me from changing anything in the code. Leaving the image empty in the storyboard removed this obstacle for me. However putting the initWithTitle in the viewWillAppear method of the tab's viewcontroller gave me odd behaviour. First getting the selected image required an additional click and images did not show up for the non-initial tabs.

For me fixing this was adding the following code to the AppDelegate in the DidFinishLoadingWithOptions (similar to 132206 and Amitabha):

NSArray * vcs = [(UITabBarController*)self.window.rootViewController viewControllers];
UIViewController *tab0 = [[(UINavigationController*)[vcs objectAtIndex:0] viewControllers] objectAtIndex:0];
tab0.title = NSLocalizedString(@"Time", nil);
tab0.tabBarItem =  [[UITabBarItem alloc] initWithTitle:tab0.title image:[UIImage imageNamed:@"Recents.png"] selectedImage:[UIImage imageNamed:@"RecentsSolid.png"]];
UIViewController *tab1 = [[(UINavigationController*)[vcs objectAtIndex:1] viewControllers] objectAtIndex:0];
tab1.title = NSLocalizedString(@"Expense", nil);
tab1.tabBarItem = [[UITabBarItem alloc] initWithTitle:tab1.title image:[UIImage imageNamed:@"Euro.png"] selectedImage:[UIImage imageNamed:@"EuroSolid.png"]];

score 0 · Answer 16 · answered Jul 10 '15 at 04:02

It is easy and clean solution of category for UITabBar Items.

Just create category and use the Runtime Attribute and refer it from category like below. Add Runtime Attribute for selected TabBarItem Refer it from category and make changes

#import "UITabBarItem+CustomTabBar.h"

@implementation UITabBarItem (CustomTabBar)

-(void)setValue:(id)value forKey:(NSString *)key {
    if([key isEqualToString:@"tabtitle"]){
        if([value isEqualToString:@"contacts"]) {
            [self setSelectedImage:[[UIImage imageNamed:@"contacts-selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
        } else if([value isEqualToString:@"chat"]) {
            [self setSelectedImage:[[UIImage imageNamed:@"chat-selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
        } else if([value isEqualToString:@"groupchat"]) {
            [self setSelectedImage:[[UIImage imageNamed:@"groupchat-selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
        } else if([value isEqualToString:@"settings"]) {
            [self setSelectedImage:[[UIImage imageNamed:@"settings-selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
        }
    }
    [self setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"Roboto-Regular" size:12.0f], NSFontAttributeName, [UIColor grayColor], NSForegroundColorAttributeName, nil] forState:UIControlStateNormal];
}

@end

score 0 · Answer 17 · answered Dec 30 '15 at 01:39

Old questions, but going to add my solution here as well for Xamarin.iOS/C# and those who want to set the images via Interface builder. I set the Selected Image and Image attributes via Interface Builder. Then in code I defined an InitTabs() method like this:

public void InitTabs(){
        HomeTab.SelectedImage = HomeTab.SelectedImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
        HomeTab.Image = HomeTab.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
}

Call InitTabs() in ViewDidLoad and now the proper image will appear for both the selected and unselected state.

Dmitriy Kirakosyan · Answer 18 · 2016-04-16T06:38:36.317

Here is a Swift solution for Swift-Guys :)

class CustomTabBar: UITabBar {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        let btnNames = ["Title1", "Title2", "Title3", "Title4"]

        for (item, name) in zip(items!, btnNames) {
            item.image = UIImage(named: "bar\(name)Btn")?.imageWithRenderingMode(.AlwaysOriginal)
            item.selectedImage = UIImage(named: "bar\(name)SelectedBtn")?.imageWithRenderingMode(.AlwaysOriginal)
            item.title = name
            item.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.blackColor()], forState: .Normal)
            item.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.redColor()], forState: .Selected)
        }
    }

}

What is exactly going on here:

Make array of btn titles and consider image file names to match them
Make For loop over tab bar items and just created btn titles array
Set barButtonItem's image and its selectedImage from the array
Set title text from the array
Set title text color for states .Normal and .Selected

Setting text colors part is important if you don't want to keep the item's title color gray for .Normal and blue for .Selected, as it is by default. This is often actual when you consider custom images for tab bar items.

score 0 · Answer 19 · answered Aug 16 '16 at 11:28

Swift version of showing selected and unselected images and title with UIAppearance API In your Appdelegate.m copy following code if you have tab base app.following code assume you have 4 tab bar.

let tabBarController: UITabBarController = (self.window!.rootViewController as! UITabBarController)

    let tabBar:UITabBar = tabBarController.tabBar

    let tabBarItem1:UITabBarItem = tabBar.items![0]
    let tabBarItem2:UITabBarItem = tabBar.items![1]
    let tabBarItem3:UITabBarItem = tabBar.items![2]
    let tabBarItem4:UITabBarItem = tabBar.items![3]

    tabBarItem1.title = "Home";
    tabBarItem2.title = "Maps";
    tabBarItem3.title = "My Plan";
    tabBarItem4.title = "Settings";

    tabBarItem1.selectedImage = UIImage(named: "home_selected.png")!
    tabBarItem2.selectedImage = UIImage(named: "maps_selected.png")!
    tabBarItem3.selectedImage = UIImage(named: "myplan_selected.png")!
    tabBarItem4.selectedImage = UIImage(named: "settings_selected.png")!

     tabBarItem1.image =  UIImage(named: "home.png")!
     tabBarItem2.image =  UIImage(named: "maps.png")!
     tabBarItem3.image =  UIImage(named: "myplan.png")!
     tabBarItem4.image =  UIImage(named: "settings.png")!


    let tabBarBackground: UIImage = UIImage(named: "tabbar.png")!
    UITabBar.appearance().backgroundImage = tabBarBackground
    UITabBar.appearance().selectionIndicatorImage = UIImage(named: "tabbar_selected.png")!


    UITabBarItem.appearance().setTitleTextAttributes([
        NSForegroundColorAttributeName : UIColor.whiteColor()
        ]
        , forState: .Normal)
    let titleHighlightedColor: UIColor = UIColor(red: 153 / 255.0, green: 192 / 255.0, blue: 48 / 255.0, alpha: 1.0)
    UITabBarItem.appearance().setTitleTextAttributes([
        NSForegroundColorAttributeName : titleHighlightedColor
        ]
        , forState: .Highlighted)

score 0 · Answer 20 · answered Oct 12 '16 at 06:03

After trying all of the other answers and struggling as they failed, I found the answer. The other answers, , don't seem to work in current swift version. In Swift 2.3, this works for me. For those who are still having trouble, try this:

tabBarItem.image = UIImage(named: "image_name")
searchVC.tabBarItem.selectedImage = UIImage(named:
     "image_name_when_selected")?.imageWithRenderingMode(.AlwaysOriginal)

UITabBar not showing selected item images in ios 7

20 Answers20

Linked