Change Color of MPVolumeView Route Button iOS 7

Question

I am designing a Music app for iOS 7 and I want to put the "AirPlay" route selector button directly in my app. I am able to get the button placed just fine, however it doesn't show up because the icon is white and my background is white.

Is there a way to change the color of the Route Button?

Here is the code I'm using to create the button.

self.airPlayButton = [[MPVolumeView alloc] initWithFrame:CGRectZero];
    self.airPlayButton.showsVolumeSlider = NO;
    [self.airPlayButton sizeToFit];
    self.airPlayButton.backgroundColor = [UIColor myGreenColor];
    [self addSubview:self.airPlayButton];

Basically the picture below is what I want, except I want the icon green instead of just it's background.

Answer 1

Create your own image and Try setRouteButtonImage:forState: Assigns a button image to the specified control states.

- (void)setRouteButtonImage:(UIImage *)image forState:(UIControlState)state

Parameters

image - The image to associate with the specified states.

state - The control state with which to associate the image.

Discussion

Use this to customize the appearance of the route button when it is enabled, disabled, highlighted, and so on.

Available in iOS 6.0 and later.

Answer 2

in reviewing Adams answer I like more clarity in that task. So I safe-guarded that code a bit:

Objective-C:

for( UIView *wnd in volumeView.subviews ) {
    if( [wnd isKindOfClass:[UIButton class] ]) {
        UIButton *button = (UIButton*) wnd;
        UIImage *img = button.currentImage;
        UIImage *img2 = [img imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
        [volumeView setRouteButtonImage: img2 forState:UIControlStateNormal];
        break;
    }
}

Swift:

    for view in volumeView.subviews {
        if view.isKindOfClass(UIButton) {
            let buttonOnVolumeView : UIButton = view as! UIButton
            volumeView.setRouteButtonImage(buttonOnVolumeView.currentImage?.imageWithRenderingMode(.AlwaysTemplate), forState: .Normal)
            break;
        }
    }

Now it reacts on the tintColor property of volumeView and if Apple decides to add another button or change the sequence this code will still work.

Answer 3

To expand on lanbo's answer, you can also get the original image of the Route Button and create a copy that uses the UIImageRenderingMode.AlwaysTemplate rendering mode. That way it heeds the current tintColor.

In Swift:

    let volumeView = MPVolumeView()

    if let routeButton = volumeView.subviews.last as? UIButton,
        let routeButtonTemplateImage  = routeButton.currentImage?.imageWithRenderingMode(.AlwaysTemplate)
    {
        volumeView.setRouteButtonImage(routeButtonTemplateImage, forState: .Normal)
    }