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.

Simple answer to a straightforward question: You can't, it's code only (for the time being at least). `initWithTitle:image:selectedImage:` — T. Benjamin Larsen, Jan 27 '14 at 17:29

score 150 · Accepted Answer · answered Nov 07 '14 at 13:41

150

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.

Setting selected image of Tabbar using storyboard

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

answered Nov 07 '14 at 13:41

Hamza Azad

2,637
1
20
15

33

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. – Code Commander Dec 12 '14 at 22:28
This is great, I've been searching for how to fix this for hours. Thanks for providing the answer! – Jake Lisby Jan 10 '15 at 16:15
3

I have tried same. But, not working for me. I am not sure what is reason. – Mansi Panchal Feb 12 '15 at 07:26
Same issue. This worked. The built in UI for IB did not. 2-16-2015 Xcode 6.1.1 – mattorb Feb 16 '15 at 23:35
As of Xcode 6.4 and August 2015, this bug is still affecting Xcode. Amazing. Thanks for this answer! – Eric G Aug 12 '15 at 06:40
Thanks. If it's not working, one might want to try cleaning first. – Marek Stój Aug 25 '15 at 21:19
4

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 – sudoExclaimationExclaimation Oct 04 '15 at 01:24
2

Now you can use from the Inspector the Bar Item -> Image field, watch out NOT the Tab Bar Item -> Selected Image. – Loebre Nov 01 '15 at 12:38
the xcode (8.3.1) is crashing every time that i try to add – Tiago Mendes Apr 24 '17 at 10:57
Works. Thanks in xcode (9.3.2) for swift 4 (deployed for iOS 10+) – Samman Bikram Thapa Feb 22 '18 at 06:02
In Xcode 11, I've found that you need to use the image attribute that is under `Bar Item` in the attribute inspector. – andrewlundy Dec 19 '19 at 13:01

Sagar Sukode · Answer 2 · 2017-06-20T10:05:14.453

29

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:

edited Jun 20 '17 at 10:05

answered Jun 20 '17 at 07:32

Sagar Sukode

1,361
12
23

This worked for me. Actually, it was not necessary to set Render AS: "Original Image", the default value did it also. – Reinhard Männer Apr 22 '18 at 19:31

score 17 · Answer 3 · answered Mar 01 '17 at 06:17

17

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 :)

answered Mar 01 '17 at 06:17

Infaz

1,133
9
19

2

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 – mike.tihonchik Mar 07 '18 at 19:59

score 12 · Answer 4 · answered Feb 07 '14 at 16:43

12

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];

answered Feb 07 '14 at 16:43

Siddharth

5,009
11
49
71

1

There is no class called `UINavigationViewController` and if you meant `UINavigationController`, it has no property called `tabBar`. – Steve Jul 27 '14 at 09:25
1

The actual first line of code should be like: `UITabBar *tabBar = self.navigationController.tabBarController.tabBar;` – CTiPKA Sep 14 '14 at 17:50

score 7 · Answer 5 · answered Jun 16 '15 at 01:12

7

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.

enter image description here

answered Jun 16 '15 at 01:12

Trianna Brannon

1,246
11
12

1

@DavidNelson you can only fill in the image section, you must leave the selected image section empty for it to work. – Trianna Brannon Jul 01 '15 at 04:23
1

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. – wcochran Aug 29 '15 at 15:24
1

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. ? – IamMashed Oct 31 '15 at 20:38
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 – Karthik Kannan Mar 15 '18 at 10:41

score 6 · Answer 6 · answered Nov 01 '15 at 12:45

6

I think that the easiest way is setting the image from the Inspector. you have a field called Bar Item -> Image, and it is in there where you have to set the image name. Watch out, not confuse with the Tab Bar Item -> Selected Image

answered Nov 01 '15 at 12:45

Loebre

615
2
8
23

score 6 · Answer 7 · answered Apr 24 '17 at 11:47

6

In the new Xcode 8 you can do in Storyboard without needing to defined the runtime attributes as is suggested in the high pointed answer.

Don't forget that image should have this size:

@1x : about 25 x 25
@2x : about 50 x 50
@3x : about 75 x 75

answered Apr 24 '17 at 11:47

Tiago Mendes

4,572
1
29
35

1

Was very confused on how to set the default tab, thanks for showing this. – Ethan Parker Apr 17 '18 at 05:18
1

I'm glad I could help :D – Tiago Mendes Apr 17 '18 at 08:32

score 6 · Answer 8 · answered Dec 15 '17 at 11:02

SWIFT 3.0 --> The Ideal way to set your tab bar button images is as follows :

first set the images you want to use for the button :

    let homeImage = UIImage(named: "TabHome")
    let homeTappedImage = UIImage(named: "TabHomeRed")

then set the button of type UITabButtonItem :

    let homeButton = UITabBarItem(title: homeText, image: homeImage, selectedImage: homeTappedImage)

    //with this method you set the image when the button is not selected 
    homeButton.image = homeImage?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)


    //with this method you set the image when the button is selected 
    homeButton.selectedImage = homeTappedImage?.withRenderingMode(.alwaysOriginal)

krizzzn · Answer 9 · 2014-04-20T10:26:49.930

The icon should be set in the corresponding view controller. When doing this you're free to rearrange the order of view controllers inside the storyboards main tab controller without having to change the code (objectAtIndex:0) for each and every icon.

Put the following line into the viewDidLoad method:

 if (self.navigationController.viewControllers.count < 2)
     self.navigationController.tabBarItem.selectedImage = [UIImage imageNamed:@"image-selected.png"];

The ifcondition makes sure that the button is only changed for the top most view controller. This is required when you reuse view controllers in a navigation hierarchy as sub view controllers.

This should be the accepted answer, noting that the "corresponding view controller" is the `UINavigationController`'s root view controller. — Steve, Jul 27 '14 at 09:30

Setting Selected Image in Tab Bar Controller with Storyboard

9 Answers9

Linked