Wie ändere ich die Hintergrundfarbe des Optionsmenüs der Aktionsleiste in Android 4.2?


70

Ich möchte die Hintergrundfarbe des Optionsmenüs (Überlauf) in Android 4.2 ändern. Ich habe alle Methoden ausprobiert, aber es wird immer noch die vom Thema festgelegte Standardfarbe angezeigt. Ich habe die folgenden Code- und XML-Konfigurationen verwendet.

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>

Der obige setMenuBackground hat keine Wirkung:

Menübeispiel

Im obigen Bild möchte ich den Menühintergrund in der Aktionsleiste von schwarz auf blau ändern . Wie kann ich das erreichen und was habe ich falsch gemacht?


Antworten:


18

Es gibt eine einfache Möglichkeit, die Farben in der Aktionsleiste zu ändern. Verwenden Sie den ActionBar-Generator und kopieren Sie alle Dateien in Ihren resOrdner und ändern Sie Ihr Thema in der Datei Android.manifest.


1
+1, der einzige Weg, den ich gefunden habe, um es zum Laufen zu bringen, war in der Tat der Style Generator. Wenn Sie nicht alle Dutzende von Dateien, die es erstellt, zu Ihrem Projekt hinzufügen möchten, überprüfen Sie dies .
Jonik

4
Dies beantwortet nicht die Frage, wie genau dies zu tun ist, obwohl es das Problem löst
Nlinscott

94

Für den Fall, dass immer noch Leute nach einer funktionierenden Lösung suchen, hat Folgendes für mich funktioniert: - Dies ist für die Appcompat-Supportbibliothek. Dies ist eine Fortsetzung des hier erläuterten ActionBar-Stils

Es folgt die Datei 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>

und so sieht es aus - MenuItem-Hintergrundfarbe ist himmelblau und MenuItem-Textfarbe ist pink mit einer Textgröße von 25sp: -

Geben Sie hier die Bildbeschreibung ein


1
Danke @Nicks, android:itemBackgroundfunktioniert für mich und android:popupBackgroundnicht.
Ninja

1
Ja, die App-Kompatibilität ist voller Trivia, die ich ohne diese Website nie herausgefunden hätte.
user798719

2
Vielen Dank, dass Sie mich davon abgehalten haben, verrückt zu werden (AppCompat ist scheiße)
SoliQuiD

1
Vielen Dank dafür android:itemBackground, es hat mir auf Android M mit Appcompat 23.1.1 geholfen. Keine andere Lösung hat geklappt.
JHH

3
Dies beseitigt den Welleneffekt :(
David Velasquez

89

Die Aktionsleiste Style - Generator , von Sunny vorgeschlagen , ist sehr nützlich, aber es erzeugt eine Menge von Dateien, von denen die meisten nicht relevant sind , wenn Sie die Hintergrundfarbe ändern möchten.

Also habe ich mich eingehender mit dem generierten Reißverschluss befasst und versucht, die wichtigen Teile einzugrenzen, damit ich möglichst wenig Änderungen an meiner App vornehmen kann. Unten ist, was ich herausgefunden habe.


Im Stilgenerator ist die relevante Einstellung die Popup-Farbe , die sich auf " Überlaufmenü , Untermenü und Hintergrund des Drehfelds " auswirkt .

Geben Sie hier die Bildbeschreibung ein

Fahren Sie fort und generieren Sie die Zip-Datei, aber von allen generierten Dateien benötigen Sie wirklich nur ein Bild menu_dropdown_panel_example.9.png, das ungefähr so ​​aussieht:

Geben Sie hier die Bildbeschreibung ein

Fügen Sie also die verschiedenen Auflösungsversionen hinzu res/drawable-*. (Und vielleicht umbenennen in menu_dropdown_panel.9.png.)

Dann hätten Sie als Beispiel res/values/themes.xmlFolgendes, wobei android:popupMenuStyleund android:popupBackgrounddie Schlüsseleinstellungen sind.

<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>

Und natürlich in AndroidManifest.xml:

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

Was Sie mit diesem Setup erhalten:

Geben Sie hier die Bildbeschreibung ein

Beachten Sie, dass ich Theme.Holo.Lightals Basisthema verwende. Wenn Sie Theme.Holo(Holo Dark) verwenden, ist ein zusätzlicher Schritt erforderlich, wie in dieser Antwort beschrieben !

Wenn Sie (wie ich) die gesamte Aktionsleiste und nicht nur das Menü gestalten möchten, geben Sie Folgendes ein 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>

Funktioniert zumindest unter Android 4.0+ (API Level 14+) hervorragend.


Danke Jonik. Dies funktionierte für mich, um die Popup-Hintergrundfarbe mit android: popupMenuStyle und android: popupBackground zu ändern. Könnten Sie mich bitte beim Ändern der Textfarbe im Popup-Menü unterstützen?
VikramV

2
@VikramV: Ich habe es geschafft, die Menütextfarbe mit android:itemTextAppearance& android:textColor wie in dieser Antwort beschrieben zu ändern .
Jonik

10
Aus irgendeinem seltsamen Grund funktioniert dies bei Android 4.4 nicht. Genau das gleiche Setup ...
Upvote

@artworkad シ, neugierig; funktioniert gut auf 4.4 für mich. Welches Basisthema verwenden Sie? Wenn Holo Dark, könnten Sie versuchen, ob dies funktioniert .
Jonik

2
GG für die Antwort, es hat mir sehr geholfen. Leider benutze ich Android: Theme.Holo.Light.DarkActionBar und Popup werden sich nicht ändern. Es scheint, dass dies ein Fehler ist: - /.
JJ86

17

Wenn Sie dies lesen, liegt dies wahrscheinlich daran, dass alle vorherigen Antworten für Ihr Holo Dark- basiertes Thema nicht funktionierten .

Holo Dark verwendet einen zusätzlichen Wrapper für das PopupMenus. Nachdem Sie die von Jonik vorgeschlagenen Schritte ausgeführt haben, müssen Sie Ihrer XML-Datei den folgenden Stil hinzufügen:

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

Verweisen Sie dann in Ihrem Themenblock darauf:

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

Das ist es!


ohh wie schade, es war eine ziemlich gründliche Erklärung :(
rupps

Gibt es nicht wirklich eine weniger verdrehte Methode? ... Derzeit API28 gibt es noch kein anderes System als dieses, um die Farben einer Aktionsleiste weniger verrückt zu definieren?
Bronz

hmm diese Antwort ist 4 Jahre alt! ActionBar ist jetzt veraltet. Mit ToolBar können Sie jede gewünschte Farbe festlegen. Das einzige ist der Hintergrund des Popup-Menüs und ich weiß nicht, ob sich die Situation hier verbessert hat. Wie auch immer, es ist nur ein Stil, es ist nicht so verdreht, oder?
Rupps

15

Mein einfacher Trick, um die Hintergrundfarbe und die Farbe des Textes im Popup-Menü / Optionsmenü zu ändern

<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>

6

Wenn Sie in der neuesten Symbolleiste in Android Studio arbeiten, finden Sie hier die kleinste Lösung. Um die Menüfarbe der Symbolleistenoptionen zu ändern, fügen Sie diese Ihrem Symbolleistenelement hinzu

 app:popupTheme="@style/MyDarkToolbarStyle"

Definieren Sie dann in Ihrer styles.xml den Popup-Menüstil

<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>

Beachten Sie, dass Sie colorBackground und nicht background verwenden müssen. Letzteres wird auf alles angewendet (das Menü selbst und jeden Menüpunkt), Ersteres gilt nur für das Popup-Menü.


4

Ich bin auch mit dem gleichen Problem konfrontiert, schließlich habe ich eine einfache Lösung. Ich habe gerade eine Zeile zum Aktionsleistenstil hinzugefügt.

<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" reicht aus, um den Hintergrund des Optionsmenüs zu ändern


4

Der schnelle Weg!

styles.xml

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

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

</style>

Fügen Sie dann diese spezifischen Stile zu Ihren AppTheme-Stilen hinzu

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

GETAN!


android:backgroundVerwenden android:colorBackground
Sie

4

In Ihrem App-Design können Sie die Eigenschaft android: itemBackground festlegen, um die Farbe des Aktionsmenüs zu ändern.

Zum Beispiel:

<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>


Verwenden Sie <item name="android:colorBackground">@color/colorAppWhite</item>, sonst werden die Untermenütitel nicht geändert.
Eugene Kartoyev

3

Sie können Stile und Designs wie unten im Überlaufmenüelement anwenden. Das OverFlow-Menü ist ListView, daher können wir das Thema gemäß der Listenansicht anwenden.

Wenden Sie den folgenden Code in styles.xml an

<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>

2

Ich konnte die Farbe des Aktionsüberlaufs ändern, indem ich einfach den Hex-Wert auf:

    <!-- 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

Fügen Sie Folgendes zu Ihrem hinzu 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>

Ändern Sie nur das Thema activity_main.xml.

android:theme="@style/Custom_Theme"

1

Versuchen Sie diesen Code. Fügen Sie dieses Snippet zu Ihrer Datei res> values> styles.xml hinzu

<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>

Und in Manifest.xml fügen Sie unter Anwendung einen Ausschnitt hinzu

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

     android:theme="@style/AppTheme"  >

1
<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>

0

Im Folgenden sind die Änderungen aufgeführt, die in Ihrem Thema zum Ändern der Hintergrundfarbe der Aktionsleiste und des Überlaufmenüs erforderlich sind. Sie müssen "android: background" von actionBarStyle & popupMenuStyle konfigurieren

<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

Ich habe das benutzt und es funktioniert gut.

Wenden Sie diesen Code in der Funktion onCreate () an

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

0

Um nur die Farbe der App-Leiste zu ändern, müssen Sie nur den Wert colorPrimary in der Datei colours.xml und den Wert colorPrimaryDark ändern, wenn Sie auch die Farbe der Batterieleiste ändern möchten:

<resources>
  <color name="colorPrimary">#B90C0C</color>
  <color name="colorPrimaryDark">#B90C0C</color>
  <color name="colorAccent">#D81B60</color>
</resources>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.