Image is not showing up for tab bar item

Question

I uploaded an image to assets folder and assigned the image to 1x, 2x and 3x. selected the table view controller of the respective tab bar item -> selected the Attributes -> assigned the image to the image field in the Bar Items section.

After running the application a Blue Square box is showing up on selection and Grayed out square box is showing up on selection of a different bar item.

Where am I going wrong?

Answer 1

Go to Assets folder. Select your tab image. On the right side under Attributes you will find "Render As". Select "Original Image".

Answer 2

When you click on a tab bar icon in one of your view controllers, on the right hand side is where you set the image. What's misleading is that there are two places to set the image in the right sidebar. Under Tab Bar Item > System Item (custom) below that selecting the custom image. Then right below that whole first set there is Bar Item > Image. Mine wouldn't show up until I set the Bar Item > Image as well.

Answer 3

If you follow B B's answer, the image will always render in original form in all the places.

for my tabbar implementation i had to do the following

tabBarItem.selectedImage = UIImage(named: "home").withRenderingMode(.alwaysOriginal);
tabBarItem.image =  = UIImage(named: "home");

So here the image will be rendering as original when the tab is SELECTED (ie, tint will not be applied) and tint will be applied to the tab bar item image when that tab is not selected

@kishor0011: This should fix your problem.

Answer 4

add tab bar item under view controller, if you embed in view controller in navigation controller tab bar item must be come under Navigation controller.

• View controller when icon not shown

Answer 5

Just choose an image in the Bar item section. About the selectedImage, check this selectedImage Apple developer documentation

Answer 6

I had this problem due to the tint color on my UIBarButtonItem this did the trick!

BarButtonItem.image = UIImage(named: "yourImage")?.withRenderingMode(.alwaysOriginal)