set my own color of radio button in menu option items

Question

I want to change the circle color of radio button (now is pink, (see the image below)) to dark blue for all items of menu.

That's my menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.aoutir.mohamed.movies.MainFragment"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <!--<item-->
    <!--android:id="@+id/action_refresh"-->
    <!--android:title="@string/Refresh"-->
    <!--android:orderInCategory="200"/>-->
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/action_popular"
            android:orderInCategory="100"
            android:title="@string/action_popular"
            app:showAsAction="never" />
        <item
            android:id="@+id/action_rated"
            android:orderInCategory="200"
            android:title="@string/action_rated"
            app:showAsAction="never" />
        <item
            android:id="@+id/action_favourites"
            android:orderInCategory="300"
            android:title="@string/action_favourites"
            app:showAsAction="never" />
    </group>

</menu>

style.xml (here is my style of whole application):

<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <!--<item name="android:popupMenuStyle">@style/PopupMenu</item>-->
    </style>

    <!--<style name="PopupMenu" parent="@android:style/Widget.PopupMenu">-->
        <!--<item name="android:popupBackground">@android:color/white</item>-->
        <!--<item name="colorAccent">@color/colorPrimary</item>-->
        <!--<item name="android:textColor">@android:color/black</item>-->
    <!--</style>-->

    <style name="AppTheme.NoActionBar" parent="Base.Theme.AppCompat.Light">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="MovieTheme" parent="AppTheme">
        <item name="actionBarStyle">@style/ActionBar.Solid.Movies.NoTitle</item>
        <item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>
    </style>

    <style name="ActionBar.Solid.Movies.NoTitle" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="displayOptions">useLogo|showHome</item>
        <item name="logo">@mipmap/pop_corn</item>
    </style>
    <style name="AppTheme.AppBarOverlay" parent="Base.ThemeOverlay.AppCompat.Dark.ActionBar" >
        <item name="overlapAnchor">false</item>
        <item name="android:overlapAnchor" tools:ignore="NewApi">false</item>
    </style>

    <style name="AppTheme.PopupOverlay" parent="Base.ThemeOverlay.AppCompat.Light">

    </style>

    <style name="CircularProgress" parent="Theme.AppCompat.Light">
        <item name="colorAccent">@color/sky_blue</item>
    </style>

    <style name="MyActionButtonOverflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
        <item name="android:src">@mipmap/ic_sort</item>
        <item name="android:contentDescription">@string/action_sort</item>
    </style>

</resources>

and java code that is associated to my menu (check if item is selected and do some action):

public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        inflater.inflate(R.menu.main_fragment_menu,menu);
        super.onCreateOptionsMenu(menu,inflater);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.action_popular:
                if (item.isChecked()) item.setChecked(false);
                else item.setChecked(true);
                return true;
            case R.id.action_rated:
                if (item.isChecked()) item.setChecked(false);
                else item.setChecked(true);
                return true;
            case R.id.action_favourites:
                if (item.isChecked()) item.setChecked(false);
                else item.setChecked(true);
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

Thanks in advance for any help.

Answer 1

To style the radio buttons inside your overflow menu's popup window, you can set colorAccent (for the selected radio button) and colorControlNormal (for the other buttons) in your toolbar's popup theme.

First, create a <style> to use as the theme:

<style name="MyPopupTheme">
    <item name="colorAccent">#00f</item>
    <item name="colorControlNormal">#00f</item>
</style>

Then, set this style as your app:popupTheme in your layout, on whatever Toolbar you're using for your activity's action bar:

<android.support.v7.widget.Toolbar
    app:popupTheme="@style/MyPopupTheme"
    .../>