Setting Selected Image in Tab Bar Controller with Storyboard

Question

I am using Storyboarding and I have a tab bar controller with five tabs. In the storyboard, I am able to set the image for the tab bar item. Apple docs suggest to have two icons for each tab bar item - one for selected and one for the unselected state.

I am not able to figure out how I can do this using storyboard.

Solution 1

You can use storyboard to set selected image of tabbar. I tried and it worked for me. Select the UITabbarItem and add a run-time attribute 'selectedImage', select Type as 'Image' and give the name of your image as its value.

I am using XCode 6.0 and my minimum deployment target is iOS 8.0.

Solution 2

Here is complete solution for selected/unselected image in Tabbar For XCode >= 8:

• Go to Image assets -> select image
• Select Render AS: "Original Image"

• After that go to storyboard -> Select Tabbar Item
• Under Attribute Inspectors, set "Selected Image" & "Image" as shown in following screenshot, that`s it:

Solution 3

In XCode 8 and above you can simply do it in Image assets,Just select the image and select Render as "Original Image". (Please check attached image)..Have FUN :)

Solution 4

Yes, this cannot be done using storyboards - needs code to be written.

In the UINavigationViewController's viewDidLoad method, we can write the following code -

UITabBar *tabBar = self.tabBar;

UITabBarItem *targetTabBarItem = [[tabbar items] objectAtIndex:0]; // whichever tab-item
UIImage *selectedIcon = [UIImage imageNamed:@"name-of-selected-image.png"];
[targetTabBarItem setSelectedImage:selectedIcon];

Solution 5

You can now do this easily in storyboard. On each tabviewcontroller that you have, it should contain a Tab Bar Item in the hierarchy (looks like a little blue star), Click on this and the settings on the right should look like the image below. The tab bar title & image can be changed here.

View more solutions

Comments

[Steve]

There is no class called UINavigationViewController and if you meant UINavigationController, it has no property called tabBar.

[Steve]

This should be the accepted answer, noting that the "corresponding view controller" is the UINavigationController's root view controller.

[CTiPKA]

The actual first line of code should be like: UITabBar *tabBar = self.navigationController.tabBarController.tabBar;

[Code Commander]

The new version of XCode has a "Selected Image" field in the Attributes Inspector but it doesn't seem to work. Thankfully this answer worked for me.

[Jake Lisby]

This is great, I've been searching for how to fix this for hours. Thanks for providing the answer!

[Mansi Panchal]

I have tried same. But, not working for me. I am not sure what is reason.

[mattorb]

Same issue. This worked. The built in UI for IB did not. 2-16-2015 Xcode 6.1.1

[Trianna Brannon]

@DavidNelson you can only fill in the image section, you must leave the selected image section empty for it to work.

[Eric G]

As of Xcode 6.4 and August 2015, this bug is still affecting Xcode. Amazing. Thanks for this answer!

[Marek Stój]

Thanks. If it's not working, one might want to try cleaning first.

[wcochran]

What is the "Selected Image" for in this case? Why is there a separate section for "Tab Bar Item" and "Bar Item"? If I select one of the system items it works fine -- custom images fail.

[sudoExclaimationExclaimation]

Testing on Xcode 7 - the Selected Image field in the Attributes Inspector of UITabBarItem seems to work fine for me now. Testing in iOS 9. Not sure if it will still work on iOS 8 devices though. EDIT: Tested in 8.4 simulator - works there too with the selected image field in storyboard

[IamMashed]

I am getting blue square in place of the image. More details please on how to get it work? I am using xcode 7.1. May be there are some constraints? height width etc. ?

[Loebre]

Now you can use from the Inspector the Bar Item -> Image field, watch out NOT the Tab Bar Item -> Selected Image.

[Tiago Mendes]

the xcode (8.3.1) is crashing every time that i try to add

[Samman Bikram Thapa]

Works. Thanks in xcode (9.3.2) for swift 4 (deployed for iOS 10+)

[mike.tihonchik]

This is a VERY IMPORTANT piece, as simply setting the UIImage to the selectedImage did nothing for me. (I must note, I was doing it programmatically) Thanks @Infaz

[Karthik Kannan]

Hi! I'm getting a colored square in the place of the custom image i want when the tab bar is selected. This happens when I add a selected image using the storyboard as shown in your answer. Any idea why this is happening? I'm using Xcode 9.2

[Ethan Parker]

Was very confused on how to set the default tab, thanks for showing this.

[Tiago Mendes]

I'm glad I could help :D

[Reinhard Männer]

This worked for me. Actually, it was not necessary to set Render AS: "Original Image", the default value did it also.

[andrewlundy]

In Xcode 11, I've found that you need to use the image attribute that is under Bar Item in the attribute inspector.