Wrong barButton item tint for play/pause buttons built programatically

Question

I have a UIToolbar with audio controls. Sometime around iOS 7 upgrade the color of the bar changed and iOS started shading my buttons differently. That introduced a bug where the play and pause buttons which I change programatically don't match the new look of the toolbar:

Toolbar starts out looking fine:

Now I pressed play so code inserted pause button but wrong color:

Now I pressed pause and code inserted play button, again with wrong color:

I want the play and pause buttons to have that same dark look as the other buttons. I assume I have to do something differently when building the replacement buttons. The raw icon images are all that lighter color, but iOS toolbar seems to be automatically recoloring to darker color from the storyboard, as seen in first screenshot.

Here's the code I use to build the buttons:

- (UIBarButtonItem *) makeBarButton: (NSString *) imageName action:(SEL)targetAction
{
    UIImage* image = [UIImage imageNamed:imageName];
    CGRect frame = CGRectMake(0 - 20, 0 - 20, image.size.width + 20, image.size.height + 20);
    UIButton *button = [[UIButton alloc] initWithFrame:frame];
    [button addTarget:self action:targetAction forControlEvents:UIControlEventTouchUpInside];
    [button setImage:image forState:UIControlStateNormal];
    [button setShowsTouchWhenHighlighted:YES];
    return [[UIBarButtonItem alloc] initWithCustomView:button];
}

- (void) setAsPlaying:(BOOL)isPlaying
{
    self.rootViewController.playing = isPlaying;

    // we need to change which of play/pause buttons are showing, if the one to
    // reverse current action isn't showing
    if ((isPlaying && !self.pauseButton) || (!isPlaying && !self.playButton))
    {
        UIBarButtonItem *buttonToRemove = nil;
        UIBarButtonItem *buttonToAdd = nil;
        if (isPlaying)
        {
            buttonToRemove = self.playButton;
            self.playButton = nil;
            self.pauseButton = [self makeBarButton:@"icon_pause.png" action:@selector(pauseAudio:)];
            buttonToAdd = self.pauseButton;
        }
        else
        {
            buttonToRemove = self.pauseButton;
            self.pauseButton = nil;
            self.playButton = [self makeBarButton:@"icon_play.png" action:@selector(playAudio:)];
            buttonToAdd = self.playButton;
        }

        // Get the reference to the current toolbar buttons
        NSMutableArray *toolbarButtons = [[self.toolbar items] mutableCopy];

        // Remove a button from the toolbar and add the other one
        if (buttonToRemove)
            [toolbarButtons removeObject:buttonToRemove];
        if (![toolbarButtons containsObject:buttonToAdd])
            [toolbarButtons insertObject:buttonToAdd atIndex:4];

        [self.toolbar setItems:toolbarButtons];
    }
}

Appreciate your help with this.

Answer 1

Check the following:

If the images are stored inside your image assets, make sure they are template images .

Then you can either A) set their tint colour in Interface Builder to the grey colour you prefer or B) do it programmatically in your makeBarButton method as such;

button.tintColor = [UIColor grayColor];