iOS 7: UITabBarItem badge z-index

Question

I'd like to show a UITabBarItem badge above the selectionIndicatorImage. There are 3 screenshots:

Screenshots

Light gray color is the selectionIndicatorImage. Yes, badge looks good. When I touch up inside at the cloud icon UITabBar become:

It's wrong.. I'd like to show badge above the selection image. If there is no icon for UITabBar - it looks good.

How can I fix this issue? Thanks in advance.

Edited

I add icons in the storyboard. For badge I've made the code:

UITabBarItem *cartTabBarItem = (UITabBarItem *)[self.tabBarController.tabBar.items objectAtIndex:3];
if ([[DataSourceWrapper getInstance] getFullCost] == 0)
         cartTabBarItem.badgeValue = nil;
    else
        cartTabBarItem.badgeValue = [NSString stringWithFormat:@"%.0f тнг", [[DataSourceWrapper getInstance] getFullCost]];

For selectionIndicatorImage

[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"selected-tabbar-bg.png"]];

Answer 1

I know it's a bit tricky, but I think Apple didn't add TabBar subview in correct order. anyway I've fixed it the following way

for (UIView *subview in marketTrackerAppDelegate.tabBarController.tabBar.subviews)
{
    if ([marketTrackerAppDelegate.tabBarController.neededController.tabBarItem respondsToSelector:@selector(view)] &&
        [marketTrackerAppDelegate.tabBarController.neededController.tabBarItem performSelector:@selector(view)] == subview)
    {
        [marketTrackerAppDelegate.tabBarController.tabBar bringSubviewToFront:subview];
        break;
    }
}

Answer 2

I had the same issue. You can fix it with code that @dollar8 suggested or change order of UITabBarItems creation.

I have 4th tab with badge and SelectionIndicatorImage of 5th tab overlay badge of 4th tab, so first I set 5th tab:

UIImage *item5image = [UIImage imageNamed:@"profile_tabbar_item"];
UIImage *item5imageSel = [UIImage imageNamed:@"profile_tabbar_item_selected"];
item5image = [item5image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item5imageSel = [item5imageSel imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tab5.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"" image:item5image selectedImage:item5imageSel];

and after set 4th tab:

UIImage *item4image = [UIImage imageNamed:@"messages_tabbar_item"];
UIImage *item4imageSel = [UIImage imageNamed:@"messages_tabbar_item_selected"];
item4image = [item4image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item4imageSel = [item4imageSel imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tab4.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"" image:item4image selectedImage:item4imageSel];

And the order of subview will be right. When I set 4th tab before 5th tab - the SelectionIndicatorImage overlay badge view.