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:

Answer 1

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.

Answer 2

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!

Answer 3

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.

Answer 4

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: