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:

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

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

Thank you very much!

Answer 1

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.