MediaRouteActionProvider connection dialog theme

Question

I've tried to change theme of the MediaRouteActionProvider connection dialog. I using in my application a Light theme with Dark Actionbar, so the dialog have dark gray content, but the background is dark.. When the app is connected to a device, the other dialogs are ok, they have white background with the correct theme. (For exmaple in VideoMediaRouteControllerDialog and on the disconnect dialog.)

Have you any idea, how can I change the connection dialog's theme?

Thank you very much!

//Screenshot 1: Connection dialog (with the theme issue)

//Screenshot 2: Controller dialog (with the right, needed theme)

Answer 1

What I did was pulling the mediarouter appcompat library source from GitHub, then I fixing the theming and rebuilding the whole thing into my own custom mediarouter library.

What you're looking for in the code is MediaRouteChooserDialog, and even there, the constructor that only takes a Context as a parameter, as that's the one being called by onCreateChooserDialog() in MediaRouteChooserDialogFragment.

I was lazy so I simply put android.R.style.Theme_Holo_Light_Dialog instead of the 0 in the constructor, and it worked just fine. But of course you can always look for a more sophisticated solution.

Answer 2

Unfortunately that dialog doesn't follow the standard theme (Dialogs in Android are all pretty unfriendly in general but that one is among the hardest to work with). Since that dialog is provided by media router, you can only provide a customized theme if you replace that completely with your own dialog.

You can try subclassing MediaRouteDialogFactory and override onCreateChooserDialogFragment() method and pass your implementation to the ActionProvide:

mediaRouteActionProvider.setDialogFactory(yourDialogFactoryImlementation)

You can take a look at the CCL where I do a similar thing not for the chooser dialog but for the controller.

Answer 3

Right now theming these Dialogs have issue - wrong theme applied to Dialog You can override themes used in MediaRouterThemeHelper

 <style name="Theme.MediaRouter.Light.DarkControlPanel">
    <item name="mediaRoutePlayDrawable">@drawable/mr_ic_play_dark</item>
    <item name="mediaRoutePauseDrawable">@drawable/mr_ic_pause_dark</item>
    <item name="mediaRouteCastDrawable">@drawable/mr_ic_cast_dark</item>
    <item name="mediaRouteAudioTrackDrawable">@drawable/ic_audiotrack</item>
    <item name="mediaRouteControllerPrimaryTextStyle">@style/Widget.MediaRouter.ControllerText.Primary.Dark</item>
    <item name="mediaRouteControllerSecondaryTextStyle">@style/Widget.MediaRouter.ControllerText.Secondary.Dark</item>
</style>
<style name="Theme.MediaRouter.LightControlPanel">
    <item name="mediaRoutePlayDrawable">@drawable/mr_ic_play_light</item>
    <item name="mediaRoutePauseDrawable">@drawable/mr_ic_pause_light</item>
    <item name="mediaRouteCastDrawable">@drawable/mr_ic_cast_light</item>
    <item name="mediaRouteAudioTrackDrawable">@drawable/mr_ic_audiotrack_light</item>
    <item name="mediaRouteControllerPrimaryTextStyle">@style/Widget.MediaRouter.ControllerText.Primary.Light</item>
    <item name="mediaRouteControllerSecondaryTextStyle">@style/Widget.MediaRouter.ControllerText.Secondary.Light</item>
</style>

Answer 4

I made it work similar as @Naddaf described it. You need to extend MediaRouteDialogFactory (you can set this to the MediaRouteActionProvider or MediaRouteButton with setDialogFactory() ) and override the method:

    @Override
    public MediaRouteChooserDialogFragment onCreateChooserDialogFragment(){
        return new CustomMediaRouteChooserDialogFragment();
    }

Then in your CustomMediaRouteChooserDialogFragment override:

    @Override
    public CustomMediaRouteChooserDialog onCreateChooserDialog(Context context, Bundle savedInstanceState)
    {
        return new CustomMediaRouteChooserDialog(context);
    }

And in the CustomMediaRouteChooserDialog create a constructor, where you set your holo light theme.

    public CustomMediaRouteChooserDialog(Context context)
    {
        super(context, android.R.style.Theme_Holo_Light_Dialog);
    }

Hope this helps!

Answer 5

Based on the other answers, this worked for me:

set a custom action provider in the menu item

<item
    android:id="@+id/media_route_menu_item"
    android:title="@string/cast_menu_title"
    app:actionProviderClass="MediaRouteActionProviderThemeLight"
    app:showAsAction="always"/>

this is the custom action provider using a light theme

public class MediaRouteActionProviderThemeLight extends MediaRouteActionProvider {

private static final int THEME_DIALOG = android.support.v7.mediarouter.R.style.Theme_MediaRouter_Light;

/**
 * Creates the action provider.
 *
 * @param context The context.
 */
public MediaRouteActionProviderThemeLight(Context context) {
    super(context);
    setDialogFactory(new MediaRouteDialogFactoryThemeLight());
}

private static class MediaRouteDialogFactoryThemeLight extends MediaRouteDialogFactory {
    @NonNull
    @Override
    public MediaRouteChooserDialogFragment onCreateChooserDialogFragment() {
        return new MediaRouteChooserDialogFragmentThemeLight();
    }

    @NonNull
    @Override
    public MediaRouteControllerDialogFragment onCreateControllerDialogFragment() {
        return new MediaRouteControllerDialogFragmentThemeLight();
    }

}

public static class MediaRouteChooserDialogFragmentThemeLight extends MediaRouteChooserDialogFragment {
    @Override
    public MediaRouteChooserDialog onCreateChooserDialog(Context context, Bundle savedInstanceState) {
        return new MediaRouteChooserDialog(context, THEME_DIALOG);
    }
}

public static class MediaRouteControllerDialogFragmentThemeLight extends MediaRouteControllerDialogFragment {

    @Override
    public MediaRouteControllerDialog onCreateControllerDialog(Context context, Bundle savedInstanceState) {
        return new MediaRouteControllerDialog(context, THEME_DIALOG);
    }
}

}

take into account the dialog with play/pause buttons and volume control use the material colors from your main theme, colorPrimary as background and textColorPrimary for the title/subtitle. In case your app use dark theme you should overwrite the background using the theme below, and change the THEME_DIALOG constant in the class MediaRouteActionProviderThemeLight:

<style name="CastAppThemeMediaRouter" parent="Theme.MediaRouter.Light">
    <item name="colorPrimaryDark">@color/primary_dark_material_light</item>
    <item name="colorPrimary">@color/primary_material_light</item>
    <item name="colorAccent">@color/accent_material_light</item>
</style>

To use a light theme with dark controls use the following theme. Be sure to set as primaryColor a dark color, the volume bar is set to light/dark automatically based in the primaryColor.

<style name="CastThemeMediaRouter" parent="Theme.MediaRouter.Light.DarkControlPanel">
    <item name="colorPrimary">@color/black</item>
</style>