Style dialog after click on MediaRouteButton

Question

Hi can someone help me with styling dialog that appears after clicking on MediaRouteButton?

There is a white text displayed on gray background which doesn't look good.

android.support.v7.app.MediaRouteButton

is wrapped in parent with styles

<FrameLayout
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:fitsSystemWindows="true"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

(I know that I should use Toolbar here but it doesn't match my requirements)

which works good on MediaRouteButton which turns white, but it have no influence on dialog styles.

I tried to look at sample app provided by Google, but I haven't found anything that helps me. Link to sample app styles

My current theme:

  <style name="Theme.AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>//Blue
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>//dark blue
    <item name="colorAccent">@color/colorPrimary</item>//blue
</style>

Did you made any progress to style the dialog correctly? – elcolto Sep 21 '16 at 18:33 — elcolto, Sep 21 '16 at 18:33

score 17 · Accepted Answer · answered Sep 29 '16 at 19:26

Found a solution that worked for me.

At first you have to set a custom MediaRouteDialogFactory on your MediaRouteButton

mMediaRouteMenuItem = CastButtonFactory.setUpMediaRouteButton(this, menu, R.id.media_route_menu_item);
MediaRouteButton mediaRouteButton = (MediaRouteButton) mMediaRouteMenuItem.getActionView()
mediaRouteButton.setDialogFactory(new ThemeableMediaRouteDialogFactory());

Cause the default MediaRouteDialogFactory will always create non themed Dialogs

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

which will lead to

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

but there is also a themed constructor MediaRouteControllerDialog(Context context, int theme) which is not called from original MediaRouteDialogFactory.

So your ThemeableMediaRouteDialogFactory should be look like this

public class ThemeableMediaRouteDialogFactory extends MediaRouteDialogFactory {
@NonNull
@Override
public MediaRouteChooserDialogFragment onCreateChooserDialogFragment() {
    return new ThemeableMediaRouterChooserDialogFragment();
}

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

with

public class ThemeableMediaRouterChooserDialogFragment extends MediaRouteChooserDialogFragment {

@Override
public MediaRouteChooserDialog onCreateChooserDialog(Context context, Bundle savedInstanceState) {
    return new MediaRouteChooserDialog(context, R.style.CastChooserDialogTheme);
}
}

and

public class ThemeableMediaRouteControllerDialogFragment extends MediaRouteControllerDialogFragment {

@Override
public MediaRouteControllerDialog onCreateControllerDialog(Context context, Bundle savedInstanceState) {
    return  new MediaRouteControllerDialog(context, R.style.CastControllerDialogTheme);
}
}

Your themes/styles can also be customized

<style name="DarkDialogTheme" parent="Theme.AppCompat.Dialog">
    <item name="colorPrimary">@color/charcoal_grey</item>
    <item name="colorPrimaryDark">@color/charcoal_grey_dark</item>
    <item name="colorAccent">@color/pumpkin_orange</item>
    <item name="android:windowBackground">@color/dark_grey</item>
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:windowNoTitle">true</item>
</style>

<style name="CastChooserDialogTheme" parent="DarkDialogTheme">
    <item name="android:windowNoTitle">false</item>
    <item name="mediaRouteChooserPrimaryTextStyle">@style/MediaRouteChooserPrimaryText</item>
    <item name="mediaRouteChooserSecondaryTextStyle">@style/MediaRouteChooserSecondaryText</item>
</style>

<style name="CastControllerDialogTheme" parent="DarkDialogTheme">
    <item name="MediaRouteControllerWindowBackground">@color/dark_grey</item>
    <item name="colorPrimary">@color/dark_grey</item>
    <item name="mediaRouteCloseDrawable">@drawable/ic_dialog_close_dark</item>
    <item name="mediaRouteControllerTitleTextStyle">@style/Widget.MediaRouter.ControllerText.Title.Dark</item>
</style>

This was super helpful. Thanks for taking the time to post this. — masterwok, Oct 07 '17 at 03:18

Style dialog after click on MediaRouteButton

1 Answers1