How do I change the style of the MediaRouteButton in the ActionBar?

Question

I realize I'm probably doing something fundamentally wrong with styles and themes but I'm still a bit of an Android newbie so please excuse my ignorance. I'm trying to change the style of my MediaRouteButton from the default dark to light since I have a light ActionBar. My MediaRouteButton is implemented in the ActionBar as follows:

<item
    android:id="@+id/menu_item_cast"
    android:actionProviderClass="android.support.v7.app.MediaRouteActionProvider"
    android:actionViewClass="android.support.v7.app.MediaRouteButton"
    android:showAsAction="always"
    android:actionButtonStyle="@android:style/Theme.MediaRouter.Light"/>

However, this gives me:

android/res/menu/main.xml:24: error: Error: No resource found that matches the given name (at 'actionButtonStyle' with value '@android:style/Theme.MediaRouter.Light').

ActiveApathy · Answer 1 · 2013-10-09T22:30:24.110

I ended up decompiling android-support-v7-mediarouter.jar to see what was going on. With the code available I was able to extend MediaRouteButton and set the private Drawable through reflection hacking. There has to be a better way right?

public class CustomMediaRouteButton extends MediaRouteButton {

    private static final String TAG = "CustomMediaRouteButton";

    public CustomMediaRouteButton(Context context){
      this(context, null);
    }

    public CustomMediaRouteButton(Context context, AttributeSet attrs) {
      this(context, attrs, R.attr.mediaRouteButtonStyle);
    }

    public CustomMediaRouteButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        Drawable d = getResources().getDrawable(R.drawable.mr_ic_media_route_holo_light);
        setRemoteIndicatorDrawable(d);
    }

    private void setRemoteIndicatorDrawable(Drawable d) {
        try {
            Field field = MediaRouteButton.class.getDeclaredField("mRemoteIndicator");
            field.setAccessible(true);
            Drawable remoteIndicator = (Drawable)field.get(this);
            if (remoteIndicator != null) {
                remoteIndicator.setCallback(null);
                unscheduleDrawable(remoteIndicator);
            }
            field.set(this, d);
            if (d != null) {
                d.setCallback(this);
                d.setState(getDrawableState());
                d.setVisible(getVisibility() == 0, false);
            }

        } catch (Exception e) {
            Log.e(TAG, "problem changing drawable:" + e.getMessage());
        }
        refreshDrawableState();
    }
}

There has to be a better way... Did you manage to find a better way, or is this the way you're still using? — b.lyte, Oct 30 '13 at 02:25
Nope. I'm still using this. Maybe there will be a better way when Google releases the official API. — ActiveApathy, Oct 30 '13 at 06:28
The button seems to have some default padding (displayed next to a simple Button instance, with the same size, it appears smaller). Did you have the same issue? — Marc Plano-Lesay, Jun 05 '14 at 09:55

score 8 · Accepted Answer · edited Apr 09 '18 at 05:58

If you don't want to change the color of the icon, framework would choose the right one (dark or light) based on the theme of your actionbar, so for an actionbar with light background, it will choose a darker icon and vice versa; here is a sample app with two different themes, Theme.AppCompat.Light and Theme.AppCompat, respectively (everything else is identical):

This is with Theme.AppCompat.Light theme

This is with Theme.AppCompat

As you can see, the appropriate one is selected automatically. If you want to use a different color based on your branding requirements, the easiest would be to add the following images to your project (with usual resolutions under mdpi, hdpi, ..):

mr_ic_media_route_disabled_holo_dark.png
mr_ic_media_route_off_holo_dark.png
mr_ic_media_route_on_0_holo_dark.png
mr_ic_media_route_on_1_holo_dark.png
mr_ic_media_route_on_2_holo_dark.png

(if you are using a light actionbar theme, replace "dark" with "light"). Take a look at the assets at Google Cast > Sample Apps (section Cast Icons) to get a feel for what these images are and build your own ones based on those.

The framework doesn't seem to choose the correct icons if you're using a solid action bar and `android:actionBarWidgetTheme` with a parent of `Theme.Base.AppCompat.Light.DarkActionBar` (a dark actionbar, yet the CC icon shows up also dark). See [this question](http://stackoverflow.com/questions/24688598/styling-chromecast-mediaroute-button) — Tim Malseed, Jul 19 '14 at 11:53

score 5 · Answer 3 · answered Sep 18 '16 at 13:46

5

You can change it easily now with your custom drawable. Just call this method on your cast button.

mediaRouteButton = (MediaRouteButton) findViewById(R.id.media_route_button);
mediaRouteButton.setRemoteIndicatorDrawable(yourDrawable);

answered Sep 18 '16 at 13:46

stevyhacker

1,847
2
23
31

score 1 · Answer 4 · answered Nov 28 '15 at 13:55

I found a way to change your color of MediaRouteButton by code, and is easy to be done, no need to touch existing code.

The MediaRouteButton will style itself following the theme of context which you passed. You can create a ContextThemeWrapper to wrap the context and then pass it to MediaRouteActionProvider.

Following is an example:

    MenuItem item = menu.add(Menu.NONE, R.id.menu_cast, Menu.NONE, "Cast");
    MenuItemCompat.setActionProvider(item, new MediaRouteActionProvider(new ContextThemeWrapper(this, R.style.AppTheme)));
    item.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);

Here the R.style.AppTheme is a theme which extends from Theme.AppCompat, it is a dark theme so the cast button will always show in light version. You can also pass in light theme to make cast button behave in dark version. Also you can change it dynamically, just invalidate the option menu, it should recreate the action provider using the new theme.

I am using support library 23.1.1 and have not found any problem in this way.

score 1 · Answer 5 · answered Feb 12 '16 at 15:48

If you want to change the icons used (not just the style), you need to name them the exact same way they are named here. For instance, for the light theme, you need to have a set of icons for every resolution with names: ic_cast_on_light.png, ic_cast_on_0_light.png, ic_cast_on_1_light.png, ic_cast_on_2_light.png, ic_cast_disabled_light.png, ic_cast_off_light.png.

palimad · Answer 6 · 2014-08-22T13:13:46.743

You should be able to change the style by applying the style to your activity, e.g. in AndroidManifest.xml. If you want to change the drawable, I succeeded by adding mr_ic_media_route_holo_light drawable to my project. Just add it to drawables folder and customize it as you need it. Example: https://github.com/android/platform_frameworks_support/blob/master/v7/mediarouter/res/drawable/mr_ic_media_route_holo_light.xml

How do I change the style of the MediaRouteButton in the ActionBar?

6 Answers6

Linked