iOS 7 UITabBar badge position

Question

Is there any way to adjust the position of the UITabBar badge in iOS 7? The badge now blocks the tab bar icon a bit more than I would like.

iOS 6: enter image description here

iOS 7: enter image description here

score 2 · Answer 1 · answered Jan 05 '14 at 19:09

It looks like the badge is placed in a certain position relative to the image. So if you have no image, the badge is in the upper left corner of the tabBarItem.

So - to position the badge, adjust the border of blank pixels around the .png you're using for the tabBarItem image.

score 1 · Answer 2 · answered Oct 06 '13 at 18:08

1

It's not possible to adjust appearance of the badge.

If you really want to have it different, I think implementing custom overlay on UITabBar should be pretty easy. That way you could put there any custom text, not just numbers.

answered Oct 06 '13 at 18:08

Tricertops

8,492
1
39
41

Daniel Amitay · Accepted Answer · 2013-10-06T23:50:30.587

1

If possible, can you provide the method by which you are setting the tab bar image?

I had the same problem that you did, and fixed it by using UIImageRenderingModeAlwaysOriginal:

UIImage *image = // Your tab bar item image
UIImage *selected = // Your selected tab bar item image

image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
selected = [selected imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

controller.tabBarItem = [[UITabBarItem alloc] initWithTitle:title
                                                      image:image
                                              selectedImage:selected];

Cheers!

edited Oct 06 '13 at 23:50

answered Oct 06 '13 at 23:42

Daniel Amitay

6,677
7
36
43

This only fixed the unselected image. The selected image for me still looks like shadowing is applying. Any help? – Halsafar Oct 23 '13 at 20:43
1

@Halsafar, You need to set your tab item selected image as well. iOS 7 badge will overlay you image if you don't set the selected image and unselected image. add [tabBarItem setSelectedImage: selectedImage]; to your tabBar controller viewDidLoad method should fix your problem. – Lei Jan 07 '14 at 19:46

score 0 · Answer 4 · answered Dec 18 '13 at 07:09

iOS 7 SDK depreciate 3 key method we used to customize tabbar

- (void)setFinishedSelectedImage:(UIImage *)selectedImage withFinishedUnselectedImage:(UIImage *)unselectedImage

- (UIImage *)finishedUnselectedImage

- (UIImage *)finishedSelectedImage

They suggest their alternatives in docs as @Daniel Amitay suggests.

Documentation is here

https://developer.apple.com/library/ios/documentation/uikit/reference/UITabBarItem_Class/DeprecationAppendix/AppendixADeprecatedAPI.html#//apple_ref/occ/instm/UITabBarItem/setFinishedSelectedImage:withFinishedUnselectedImage:

iOS 7 UITabBar badge position

4 Answers4

Linked