How to style the menu items on an Android action bar

There’s been many questions on styling on action bars, but the ones I’ve found either are relating to styling the tabs, or have answers that don’t work for me.

The question is really quite simple. I want to be able to change the text styling (even just colour) of the menu items in the action bar.

  • How to get Activity's content view?
  • Android SDK on a 64-bit linux machine
  • How to Inflate view from XML in Android?
  • onActivityResult() Intent data is always null
  • Buck vs Gradle, pro's and cons for Android build systems
  • How to check permission is granted for a directory path and won't thorow EACCES error?
  • I’ve read this:
    http://android-developers.blogspot.com/2011/04/customizing-action-bar.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+blogspot%2FhsDu+%28Android+Developers+Blog%29

    And this question:
    Style an Action Bar in Android Honeycomb

    From which I have put together a test application that I am using to try and get the menu items to change. It uses all the default values for an app created in the eclipse android plugin, except for the following.

    A styles file:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
    <style name="MyAppTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>
    
    <style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBar.TitleTextStyle</item>
        <item name="android:actionMenuTextAppearance">@style/MyActionBar.MenuTextStyle</item>
    </style>
    
    <style name="MyActionBar.TitleTextStyle"
        parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">#F0F</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">24dip</item>
    </style>
    
    <style name="MyActionBar.MenuTextStyle"
        parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">#F0F</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">24dip</item>
    </style>
    </resources>
    

    A menu for the action bar:

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:showAsAction="always|withText" android:icon="@android:drawable/ic_menu_edit"
        android:id="@+id/menu_item1" android:title="menu_item1"></item>
    
    <item android:showAsAction="always|withText" android:icon="@android:drawable/ic_menu_edit"
        android:id="@+id/menu_item2" android:title="menu_item2"></item>
    
    </menu>
    

    The main activity:

    public class Main extends Activity {
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
    
    /**
     * Create the options menu that is shown on the action bar
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main_menu, menu);
        return true;
    }
    }
    

    The application compiles and runs. The styling for the action bar title text works perfectly (is that lovely shade of pink #F0F I’ve defined). The menu items do not change appear but with default styling (holo light).

    What am I doing wrong ?

  • Why do we specify namespace in android xml file?
  • Can't get array string resource from XML
  • How to Shrink WebView size dynamically according to its content?
  • Delay when using android.speech.SpeechRecognizer in DICTATION_MODE
  • java.text.ParseException: Unparseable date: “2014-06-04” (at offset 5)
  • Android Studio 2.0 builds are really slow
  • 7 Solutions collect form web for “How to style the menu items on an Android action bar”

    Instead of having the android:actionMenuTextAppearance item under your action bar style, move it under your app theme.

    I know its an old post, but just in case anyone is looking here. I added this to my style.xml and it worked for me.

    <!-- This is the main theme parent -->
    <style name="MyTabStyle">
        <item name="android:actionBarTabTextStyle">@style/MyTabTextStyle</item>
    </style>
    
    <style name="MyTabTextStyle" parent="@android:style/Widget.ActionBar.TabText">
        <item name="android:textAppearance">@android:style/TextAppearance.Medium</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/pressed_skylogtheme</item>
    </style>
    

    I think the code below

    <item name="android:actionMenuTextAppearance">@style/MyActionBar.MenuTextStyle</item> 
    

    must be in MyAppTheme section.

    You have to change

    <style name="MyActionBar.MenuTextStyle"
    parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    

    to

    <style name="MyActionBar.MenuTextStyle"
    parent="android:style/TextAppearance.Holo.Widget.ActionBar.Menu">
    

    as well. This works for me.

    Chris answer is working for me…

    My values-v11/styles.xml file:

    <resources>
    <style name="LightThemeSelector" parent="android:Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/ActionBar</item>
        <item name="android:editTextBackground">@drawable/edit_text_holo_light</item>
        <item name="android:actionMenuTextAppearance">@style/MyActionBar.MenuTextStyle</item>
    </style>
    
    <!--sets the point size to the menu item(s) in the upper right of action bar-->
    <style name="MyActionBar.MenuTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textSize">25sp</item>
    </style>
    
    <!-- sets the background of the actionbar to a PNG file in my drawable folder. 
    displayOptions unset allow me to NOT SHOW the application icon and application name in the upper left of the action bar-->
    <style name="ActionBar" parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:background">@drawable/actionbar_background</item>
        <item name="android:displayOptions"></item>
    </style>
    
    <style name="inputfield" parent="android:Theme.Holo.Light">
        <item name="android:textColor">@color/red2</item>
    </style>  
    </resources>
    

    My guess is that you have to also style the views that are generated from the menu information in your onCreateOptionsMenu(). The styling you applied so far is working, but I doubt that the menu items, when rendered with text use a style that is the same as the title part of the ActionBar.

    You may want to look at Menu.getActionView() to get the view for the menu action and then adjust it accordingly.

    I did this way:

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="actionMenuTextAppearance">@style/MenuTextAppearance</item>
        <item name="android:actionMenuTextAppearance">@style/MenuTextAppearance</item>
        <item name="actionMenuTextColor">@color/colorAccent</item>
    </style>
    
    <style name="MenuTextAppearance" >
        <item name="android:textAppearance">@android:style/TextAppearance.Large</item>
        <item name="android:textSize">20sp</item>
        <item name="android:textStyle">bold</item>
    </style>
    
    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.