UITabBarItem Image is in Blue and not changed

Question

Um using my own TabBarController which is ElWafyatTabBarController basically it inherits from UITabBarController.

In ElWafyatTabBarController.m -> viewDidLoad

I've created some ViewControllers, Then I created UINavigationController's with rootViewController to the viewControllers I've made in the step before.

then I've created UITabBarItem and set it with image and title for each navigation controller which has rootViewController to the viewControllers that I've created in the first step, and set the tabBarItem for these navigationController to these tabBarItem.

The problem I found is even the title for the UITabBarItem is shown correctly, but the image is displayed at blue Color.

FYI: I've created two images named test.png and test@2x.png with dimensions 32x32 and 64x64 and I still have these issue, So any one can help ?

this is my Code:

ElWafyatTabBarController -> viewDidLoad

- (void)viewDidLoad
{
    [super viewDidLoad];
    HomeViewController *homeViewController = [[HomeViewController alloc]
        initWithNibName:@"HomeViewController" bundle:nil];
    NaaiViewController *naaiViewController = [[NaaiViewController alloc]
        initWithNibName:@"NaaiViewController" bundle:nil];
    MushatraViewController *mushatraViewController = [[MushatraViewController alloc]
        initWithNibName:@"MushatraViewController" bundle:nil];
    TakremViewController *takremViewController = [[TakremViewController alloc]
        initWithNibName:@"TakremViewController" bundle:nil]
    UINavigationController *homeNavC = [[UINavigationController alloc]initWithRootViewController:homeViewController];
    UINavigationController *naaiNavC = [[UINavigationController alloc]initWithRootViewController:naaiViewController];
    UINavigationController *mushatraNavC = [[UINavigationController alloc]initWithRootViewController:mushatraViewController];
    UINavigationController *takremNavC = [[UINavigationController alloc]initWithRootViewController:takremViewController];

    // Setup Controllers for Tab Bar. (first level).
//    [homeNavC.tabBarItem setTitle:@"الرئيسية"];
//    [naaiNavC.tabBarItem setTitle:@"نعي"];
//    [mushatraNavC.tabBarItem setTitle:@"مشاطرة"];
//    [takremNavC.tabBarItem setTitle:@"تكريم"];

    homeNavC.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:UITextAttributeTextColor];
    naaiNavC.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:UITextAttributeTextColor];
    mushatraNavC.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:UITextAttributeTextColor];
    takremNavC.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:UITextAttributeTextColor];

    homeNavC.navigationBar.barStyle = UIBarStyleBlack;
    naaiNavC.navigationBar.barStyle = UIBarStyleBlack;
    mushatraNavC.navigationBar.barStyle = UIBarStyleBlack;
    takremNavC.navigationBar.barStyle = UIBarStyleBlack;

    UITabBarItem* tabBarItem =  [[UITabBarItem alloc] initWithTitle:@"Colors" image:[UIImage imageNamed:@"test.png"] tag:9];

    homeNavC.tabBarItem = tabBarItem;

    myViewControllers = [ NSArray arrayWithObjects:takremNavC, mushatraNavC, naaiNavC, homeNavC,nil];
    [self setViewControllers:myViewControllers animated:YES];
    [self.tabBarController setSelectedIndex:3];
    [self setSelectedIndex:3];
}

and these the output:

enter image description here

score 13 · Accepted Answer · answered Dec 03 '13 at 05:06

13

If you want to see your image, you need to set the image's rendering mode to UIImageRenderingModeAlwaysOriginal, otherwise the image is displayed as a template image. You should read the documentation on tab bars, it has this statement:

Tab Bar Item Icons

Each item in a tab bar can have a custom selected image and unselected image. You can specify these images when you initialize a tab bar item using the initWithTitle:image:selectedImage: method. Note that a tab bar item image will be automatically rendered as a template image within a tab bar, unless you explicitly set its rendering mode to UIImageRenderingModeAlwaysOriginal. For more information, see Template Images.

answered Dec 03 '13 at 05:06

rdelmar

103,982
12
207
218

1

don't forget that UIImageRenderingModeAlwaysOriginal only Available in iOS 7.0 and later – Kaibin Sep 15 '14 at 04:54
How/where do you set UIImageRenderingModeAlwaysOriginal? – A. Vin May 06 '16 at 23:09
image.withRenderingMode(.alwaysOriginal) – nuynait May 05 '17 at 03:18

score 10 · Answer 2 · answered Jun 10 '17 at 09:41

10

Go to Assets.xcassets > Click on you image > Attribute Inspector > Render As > Original Image

answered Jun 10 '17 at 09:41

Mohammad Zaid Pathan

16,304
7
99
130

score 1 · Answer 3 · answered Dec 03 '13 at 05:03

1

Blue is the default tint color for UITabbar in iOS 7. You can change it to whatever color you like by setting:

myTabbar.tintColor = [UIColor greenColor]; //Put the color of your choice

answered Dec 03 '13 at 05:03

Nikos M.

13,685
4
47
61

Dhaval Bhadania · Answer 4 · 2013-12-03T05:15:24.640

0

if you have UITabBar:

 UITabBar *tabBar = _tabBarController.tabBar;

 UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];

set the image of tabBarItem1 like this :

 [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"Selected_your_image"] withFinishedUnselectedImage:[UIImage imageNamed:@"UNSelected_your_image"]];

set selected and unselectedimage every UITabBarItem(s) of UITabBar.

edited Dec 03 '13 at 05:15

answered Dec 03 '13 at 05:10

Dhaval Bhadania

3,090
1
20
35

UITabBarItem Image is in Blue and not changed

4 Answers4