web-dev-qa-db-fra.com

Comment changer la couleur de fond du menu d'options de la barre d'action dans Android 4.2?

J'aimerais modifier la couleur de fond du menu Option (débordement) dans Android 4.2. J'ai essayé toutes les méthodes, mais la couleur par défaut définie par le thème est toujours affichée. J'ai utilisé les configs de code et XML suivants.

MainActivity.Java

public class MainActivity extends Activity {

@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    getActionBar().setIcon(R.drawable.ic_launcher);     
    getActionBar().setTitle("Sample Menu");
    getActionBar().setBackgroundDrawable(new 
               ColorDrawable(Color.parseColor("#33B5E5"))); 

    int titleId = Resources.getSystem().getIdentifier("action_bar_title", "id", "Android");
    TextView titleText = (TextView)findViewById(titleId);
    titleText.setTextColor(Color.parseColor("#ffffff"));

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    setMenuBackground();
    return true;
}

protected void setMenuBackground(){                     
    // Log.d(TAG, "Enterting setMenuBackGround");  
    getLayoutInflater().setFactory( new Factory() { 

        @Override
        public View onCreateView(String name, Context context,
                AttributeSet attrs) {
            if ( name.equalsIgnoreCase( "com.Android.internal.view.menu.IconMenuItemView" ) ) {
                try { // Ask our inflater to create the view  
                    LayoutInflater f = getLayoutInflater();  
                    final View view = f.createView( name, null, attrs );  
                    /* The background gets refreshed each time a new item is added the options menu.  
                    * So each time Android applies the default background we need to set our own  
                    * background. This is done using a thread giving the background change as runnable 
                    * object */
                    new Handler().post( new Runnable() {  
                        public void run () {  
                            // sets the background color   
                            view.setBackgroundResource( R.color.menubg);
                            // sets the text color              
                            ((TextView) view).setTextColor(Color.WHITE);
                            // sets the text size              
                            ((TextView) view).setTextSize(18);
            }
                    } );  
                return view;
            }
        catch ( InflateException e ) {}
        catch ( ClassNotFoundException e ) {}  
    } 
            return null;
        }});
}

}

Menu.xml

<menu xmlns:Android="http://schemas.Android.com/apk/res/Android" >

<item
    Android:id="@+id/action_settings"
    Android:icon="@drawable/menu"
    Android:showAsAction="always"
    Android:title="@string/action_settings">
    <menu>
        <item
            Android:id="@+id/item1"             
            Android:showAsAction="always"
            Android:title="@string/item1" />
        <item
            Android:id="@+id/item2"             
            Android:showAsAction="always"
            Android:title="@string/item2" />
        <item
            Android:id="@+id/item3"
            Android:showAsAction="always"
            Android:title="@string/item3" />
        <item
            Android:id="@+id/item4"
            Android:showAsAction="always"
            Android:title="@string/item4" />
    </menu>
</item>

</menu>

color.xml

<color name="menubg">#33B5E5</color>

Le setMenuBackground ci-dessus ne prend aucun effet:

Menu Sample

Dans l'image ci-dessus, Je souhaite modifier l'arrière-plan du menu du noir au bleu dans la barre d'actions . Comment puis-je y parvenir et ce que j'ai fait de travers?

59
MKD

Il existe un moyen simple de changer les couleurs dans Actionbar Utilisez ActionBar Generator et copiez-collez tout le fichier dans votre dossier res et modifiez votre thème dans le fichier Android.manifest. 

19
Sunny

Le générateur de styles Action , suggéré par Sunny , est très utile, mais il génère beaucoup de fichiers, dont la plupart ne sont pas pertinents si vous souhaitez uniquement modifier la la couleur de fond. 

J'ai donc approfondi le code Zip généré et essayé de cerner les éléments importants afin de pouvoir apporter le minimum de modifications à mon application. Voici ce que j'ai découvert. 


Dans le générateur de style, le paramètre approprié est Couleur de la fenêtre contextuelle, qui affecte "le menu Débordement, le sous-menu et l'arrière-plan du panneau fléché".

enter image description here

Continuez et générez le fichier Zip, mais sur tous les fichiers générés, vous n'avez vraiment besoin que d'une image, menu_dropdown_panel_example.9.png, qui ressemble à ceci:

enter image description here

Ajoutez donc les différentes versions de résolution à res/drawable-*. (Et peut-être les renommer en menu_dropdown_panel.9.png.)

Ensuite, à titre d'exemple, dans res/values/themes.xml, vous auriez le suivant, avec Android:popupMenuStyle et Android:popupBackground en tant que paramètres de clé.

<resources>

    <style name="MyAppActionBarTheme" parent="Android:Theme.Holo.Light">
        <item name="Android:popupMenuStyle">@style/MyApp.PopupMenu</item>
        <item name="Android:actionBarStyle">@style/MyApp.ActionBar</item>
    </style>

    <!-- The beef: background color for Action Bar overflow menu -->
    <style name="MyApp.PopupMenu" parent="Android:Widget.Holo.Light.ListPopupWindow">
        <item name="Android:popupBackground">@drawable/menu_dropdown_panel</item>
    </style>

    <!-- Bonus: if you want to style whole Action Bar, not just the menu -->
    <style name="MyApp.ActionBar" parent="Android:Widget.Holo.Light.ActionBar.Solid">
        <!-- Blue background color & black bottom border -->
        <item name="Android:background">@drawable/blue_action_bar_background</item>
    </style>   

</resources>

Et bien sûr, dans AndroidManifest.xml:

<application
    Android:theme="@style/MyAppActionBarTheme" 
    ... >

Ce que vous obtenez avec cette configuration:

enter image description here

Notez que j'utilise Theme.Holo.Light comme thème de base. Si vous utilisez Theme.Holo (Holo Dark), une étape supplémentaire est nécessaire car cette réponse décrit !

De plus, si vous (comme moi) souhaitiez styliser toute la barre d’action, et pas seulement le menu, mettez quelque chose comme ceci dans res/drawable/blue_action_bar_background.xml

<!-- Bonus: if you want to style whole Action Bar, not just the menu -->
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <item>
        <shape Android:shape="rectangle">
            <stroke Android:width="2dp" Android:color="#FF000000" />
            <solid Android:color="#FF2070B0" />                   
        </shape>
    </item>

    <item Android:bottom="2dp">
        <shape Android:shape="rectangle">
            <stroke Android:width="2dp" Android:color="#FF2070B0" />
            <solid Android:color="#00000000" />
            <padding Android:bottom="2dp" />
        </shape>
    </item>

</layer-list>

Fonctionne très bien au moins sur Android 4.0+ (API de niveau 14+).

87
Jonik

Dans le cas où des personnes sont toujours en visite pour trouver une solution qui fonctionne, voici ce qui a fonctionné pour moi: - Ceci concerne la bibliothèque de support Appcompat . C'est dans la continuité du style ActionBar expliqué ici

Voici le fichier styles.xml.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- This is the styling for action bar -->
        <item name="actionBarStyle">@style/MyActionBar</item>
        <!--To change the text styling of options menu items</item>-->
        <item name="Android:itemTextAppearance">@style/MyActionBar.MenuTextStyle</item>
        <!--To change the background of options menu-->
        <item name="Android:itemBackground">@color/skyBlue</item>
    </style>

    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@color/red</item>
        <item name="titleTextStyle">@style/MyActionBarTitle</item>
    </style>

    <style name="MyActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="Android:textColor">@color/white</item>
    </style>

    <style name="MyActionBar.MenuTextStyle"
        parent="style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="Android:textColor">@color/red</item>
        <item name="Android:textStyle">bold</item>
        <item name="Android:textSize">25sp</item>
    </style>
</resources>

et voici à quoi il ressemble - La couleur d’arrière-plan de MenuItem est bleu ciel et la couleur du texte de MenuItem est rose avec une taille de texte de 25sp: -

enter image description here

78
Nicks

Si vous lisez ceci, c'est probablement que toutes les réponses précédentes ne fonctionnaient pas pour votre thème basé sur Holo Dark

Holo Dark utilise un wrapper supplémentaire pour les PopupMenus, donc après avoir fait ce que Jonik a suggéré vous devez ajouter le style suivant à votre fichier 'xml':

<style name="PopupWrapper" parent="@Android:style/Theme.Holo">
    <item name="Android:popupMenuStyle">@style/YourPopupMenu</item>
</style>

Ensuite, référencez-le dans votre bloc de thème:

<style name="Your.cool.Theme" parent="@Android:style/Theme.Holo">
    .
    .
    .
    <item name="Android:actionBarWidgetTheme">@style/PopupWrapper</item>
</style>

C'est tout!

17
rupps

Mon astuce simple pour changer la couleur de fond et la couleur du texte dans Popup Menu/Option Menu

<style name="CustomActionBarTheme"
       parent="@Android:style/Theme.Holo">
    <item name="Android:popupMenuStyle">@style/MyPopupMenu</item>
    <item name="Android:itemTextAppearance">@style/TextAppearance</item>
</style>
<!-- Popup Menu Background Color styles -->
<style name="MyPopupMenu" 
       parent="@Android:style/Widget.Holo.ListPopupWindow">
    <item name="Android:popupBackground">@color/Your_color_for_background</item> 
</style>
<!-- Popup Menu Text Color styles -->
<style name="TextAppearance">
    <item name="Android:textColor">@color/Your_color_for_text</item>
</style>
15
aLIEz

Si vous travaillez dans la dernière barre d'outils d'Android Studio, voici la solution la plus petite.

 app:popupTheme="@style/MyDarkToolbarStyle"

Puis, dans votre styles.xml, définissez le style du menu contextuel

<style name="MyDarkToolbarStyle" parent="ThemeOverlay.AppCompat.Light"> <item name="Android:colorBackground">@color/mtrl_white_100</item> <item name="Android:textColor">@color/mtrl_light_blue_900</item> </style>

Notez que vous devez utiliser colorBackground et non en arrière-plan. Le dernier serait appliqué à tout (le menu lui-même et chaque élément de menu), le premier s'applique uniquement au menu contextuel.

3
Rishab

Vous pouvez appliquer des styles et des thèmes dans Overflow MenuItem comme indiqué ci-dessous. Le menu OverFlow est ListView, nous pouvons donc appliquer le thème selon listview.

Appliquer ci-dessous le code dans styles.xml

<style name="AppTheme" parent="@Android:style/Theme.Holo.Light">
<item name="Android:dropDownListViewStyle">@style/PopupMenuListView</item>
        <item name="Android:actionBarWidgetTheme">@style/PopupMenuTextView</item>
        <item name="Android:popupMenuStyle">@style/PopupMenu</item>
        <item name="Android:listPreferredItemHeightSmall">40dp</item>
</style>

<!-- Change Overflow Menu ListView Divider Property -->
    <style name="PopupMenuListView" parent="@Android:style/Widget.Holo.ListView.DropDown">
        <item name="Android:divider">@color/app_navigation_divider</item>
        <item name="Android:dividerHeight">1sp</item>
        <item name="Android:listSelector">@drawable/list_selector</item>
    </style>

    <!-- Change Overflow Menu ListView Text Size and Text Size -->
    <style name="PopupMenuTextView" parent="@Android:style/Widget.Holo.Light.TextView">
        <item name="Android:textColor">@color/app_white</item>
        <item name="Android:textStyle">normal</item>
        <item name="Android:textSize">18sp</item>
        <item name="Android:drawablePadding">25dp</item>
        <item name="Android:drawableRight">@drawable/navigation_arrow_selector</item>
    </style>

    <!-- Change Overflow Menu Background -->
    <style name="PopupMenu" parent="Android:Widget.Holo.Light.ListPopupWindow">
        <item name="Android:popupBackground">@drawable/menu_overflow_bg</item>
    </style>
3
Tejas Mehta

Je suis également frappé par ce même problème, enfin j'ai une solution simple. vient d'ajouter une ligne au style de la barre d'action.

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="Android:textColorPrimary">@color/colorAccent</item>
    <item name="Android:colorBackground">@color/colorAppWhite</item>
</style>

"Android: colorBackground" suffit de changer le fond du menu des options

3
Gowsik Raja

Manière rapide!

styles.xml

<style name="popupTheme" parent="Theme.AppCompat.Light">

    <item name="Android:background">@color/colorBackground</item>
    <item name="Android:textColor">@color/colorItem</item>

</style>

Ajoutez ensuite ces styles spécifiques à vos styles AppTheme

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="popupTheme">@style/popupTheme</item>
</style>

TERMINÉ!

2
Soon Santos

J'ai été en mesure de changer la couleur du débordement d'action en mettant simplement la valeur hexadécimale à:

    <!-- The beef: background color for Action Bar overflow menu -->
<style name="MyApp.PopupMenu" parent="Android:Widget.Holo.Light.ListPopupWindow">
    <item name="Android:popupBackground">HEX VALUE OF COLOR</item>
</style>
2
Rishabh

Ajouter ce qui suit à votre Styles.xml

<style name="Custom_Theme" parent="Theme.AppCompat.Light.DarkActionBar">

    <item name="Android:itemBackground">@color/white</item>
    <item name="Android:textColor">@color/colorPrimaryDark</item>

</style>

Changer le thème dans activity_main.xml seulement.

Android:theme="@style/Custom_Theme"
1
Keyur Sureliya

Essayez ce code. Ajouter cet extrait à votre res> valeurs> styles.xml

<style name="AppTheme" parent="AppBaseTheme">
    <item name="Android:actionBarWidgetTheme">@style/Theme.stylingactionbar.widget</item>
</style>
<style name="PopupMenu" parent="@Android:style/Widget.Holo.ListPopupWindow">
    <item name="Android:popupBackground">@color/DarkSlateBlue</item>
 <!-- for @color you have to create a color.xml in res > values -->
</style>
<style name="Theme.stylingactionbar.widget" parent="@Android:style/Theme.Holo">
    <item name="Android:popupMenuStyle">@style/PopupMenu</item>
</style>

Et dans Manifest.xml, ajoutez le fragment ci-dessous sous l'application

 <application
    Android:allowBackup="true"
    Android:icon="@drawable/ic_launcher"
    Android:label="@string/app_name"

     Android:theme="@style/AppTheme"  >
1
Niranjan

Je l'ai utilisé et cela fonctionne très bien.

Appliquer ce code dans la fonction onCreate ()

val actionBar: Android.support.v7.app.ActionBar? = supportActionBar
    actionBar?.setBackgroundDrawable(ColorDrawable(Color.parseColor("Your color code here")))    
0
user8397875

Dans le thème de votre application, vous pouvez définir la propriété Android: itemBackground pour modifier la couleur du menu Action. 

Par exemple: 

<style name="AppThemeDark" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/drk_colorPrimary</item>
        <item name="colorPrimaryDark">@color/drk_colorPrimaryDark</item>
        <item name="colorAccent">@color/drk_colorAccent</item>
        <item name="actionBarStyle">@style/NoTitle</item>
        <item name="windowNoTitle">true</item>
        <item name="Android:textColor">@color/white</item>

        <!-- THIS IS WHERE YOU CHANGE THE COLOR -->
        <item name="Android:itemBackground">@color/drk_colorPrimary</item>
</style>

0
Tyler Devenere
<style name="customTheme" parent="any_parent_theme">
    <item name="Android:itemBackground">#424242</item>
    <item name="Android:itemTextAppearance">@style/TextAppearance</item>
</style>

<style name="TextAppearance">
    <item name="Android:textColor">#E9E2BF</item>
</style>

Vous trouverez ci-dessous les modifications requises dans votre thème pour modifier la couleur d'arrière-plan de la barre d'action et du menu de dépassement. Vous devez configurer "Android: background" de actionBarStyle & popupMenuStyle

<application
            Android:name="...."
            Android:theme="@style/AppLightTheme">

<style name="AppLightTheme" parent="Android:Theme.Holo.Light">      
        <item name="Android:actionBarStyle">@style/ActionBarLight</item>
        <item name="Android:popupMenuStyle">@style/ListPopupWindowLight</item>
</style>

<style name="ActionBarLight" parent="Android:style/Widget.Holo.Light.ActionBar">
        <item name="Android:background">@color/white</item>
</style>


<style name="ListPopupWindowLight"parent="@Android:style/Widget.Holo.Light.ListPopupWindow">
        <item name="Android:background">@color/white</item>
</style>
0
Pawan Maheshwari