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.

MPVolumeView Route Button with background changed

score 11 · Answer 1 · edited Oct 29 '15 at 16:06

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.

This worked perfectly for me! Best solution in my eyes! Thank you! — funkenstrahlen, Jun 21 '16 at 15:24
Is there a way to adjust the color of when the airplay button is connected? Ive changed the tint to my color using your suggestion, however it stays the same once connected. — tnaught, Oct 12 '18 at 21:26

score 7 · Answer 2 · answered Aug 10 '15 at 14:05

7

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)
    }

answered Aug 10 '15 at 14:05

Adam Bolcsfoldi

71
1
2

It works, but is it sure, that the last View is the image? – Karsten Oct 08 '15 at 12:39
No there's no guarantee, but the `if let` clause makes sure that it is safe if it isn't a `UIButton`. – Adam Bolcsfoldi Oct 10 '15 at 16:50
why is volumeView.routeButtonImageForState(UIControlState.Normal)?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate); not working? – Sjoerd Perfors Oct 29 '15 at 15:11

score 6 · Accepted Answer · edited Jul 20 '20 at 04:22

6

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.

edited Jul 20 '20 at 04:22

Radu Ursache

1,230
1
22
35

answered Sep 29 '13 at 07:25

lanbo

1,678
12
12

That did the trick! Turned out to be quite the easy solution, thanks for pointing me to the right solution! – jrwagz Sep 29 '13 at 07:34

Change Color of MPVolumeView Route Button iOS 7

3 Answers3