Styling Sherlock Action Bar drop down items

Question

I've been trying for a while to style the items in a drop down list I added to the Action Bar, but I can't come up with the right code.

I tried looking into the abs__styles.xml and abs__themes.xml in the SherlockActionBar project but none of the items I added to my project worked.

The way I'm creating the menus is the following:

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Sharing icons
        SubMenu submenu = menu.addSubMenu(null);
        submenu.add(getResources().getString(R.string.twitter));
        submenu.add(getResources().getString(R.string.facebook));
        submenu.add(getResources().getString(R.string.email));

        // Share button itself
        MenuItem ShareButton = submenu.getItem();
        ShareButton.setIcon(R.drawable.icon_share_triangle);
        ShareButton.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS | MenuItem.SHOW_AS_ACTION_WITH_TEXT);

        // Twitter submenu button
        MenuItem TwitterItem = submenu.getItem(0);
        TwitterItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
        TwitterItem.setOnMenuItemClickListener(new OnMenuItemClickListener() {
            public boolean onMenuItemClick(MenuItem item) {
                setShareTwitterIntent();
                return true;
            }
        });
...
}

I also tried taking a look at this post using the following code, but still no luck:

<!-- style the list navigation -->
<style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">
    <item name="android:background">@drawable/ad_spinner_background_holo_light</item>
    <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>
    <item name="android:dropDownSelector">@drawable/ad_selectable_background</item>
</style>

I just need to change the background color of the items in the drop down list.

Thanks a lot for your help!

EDIT:

I also tried this, and it still doesn't work:

<item name="android:actionDropDownStyle">@style/MyApp.DropDownNav</item>
<item name="actionDropDownStyle">@style/MyApp.DropDownNav</item>
...
<style name="MyApp.DropDownNav" parent="Widget.Sherlock.Light.Spinner.DropDown.ActionBar">
        <item name="android:background">@drawable/sharing_panel</item>
</style>

Answer 1

I had the same problem and after a lot of head scratching - the sort of scratching like a dog with a bad case of fleas - I got it to work. This is with ABS 4.1 (90). The below code will change the background colour of the drop down item.

SomeActivity.java

Context context = ab.getThemedContext();
ArrayAdapter<CharSequence> list = ArrayAdapter.createFromResource(
    context, R.array.map_activity_view_list,
    R.layout.sherlock_spinner_item);
list.setDropDownViewResource(R.layout.sherlock_spinner_dropdown_item);

Note: You use R.layout.sherlock_spinner_item for the createFromResource and R.layout.sherlock_spinner_dropdown_item for the setDropDownViewResource. This is what appears in the sample in the ABS source: https://github.com/JakeWharton/ActionBarSherlock/blob/master/samples/demos/src/com/actionbarsherlock/sample/demos/ListNavigation.java

This is because the unselected dropdown in the action bar when is the sherlock_spinner_item layout and the actual dropdown items use the sherlock_spinner_dropdown_item layout which means the styles are different for each:

• sherlock_spinner_item
  • android:spinnerItemStyle
  • spinnerItemStyle
• sherlock_spinner_dropdown_item
  • android:spinnerDropDownItemStyle
  • spinnerDropDownItemStyle

Remember both styles are needed - android: prefixed styles for for the native ICS ActionBar and the style without the android: prefix is for the AcrionBarSherlock style on devices older than ICS.

res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.MyApp" parent="Theme.Sherlock.Light">
        <!--  the text when loading -->
        <!--
        <item name="actionBarStyle">@style/Widget.MyApp.ActionBar</item>
        <item name="android:actionBarStyle">@style/Widget.MyApp.ActionBar</item>
        -->

        <!-- the dropdown items -->
        <item name="android:spinnerDropDownItemStyle">@style/MyApp.Widget.Holo.DropDownItem</item>
        <item name="spinnerDropDownItemStyle">@style/MyApp.Widget.Holo.DropDownItem</item>

        <!--  the action bar dropdown menu item -->
        <!-- 
        <item name="android:spinnerItemStyle">@style/MyApp.Widget.Holo.SpinnerItem</item>
        <item name="spinnerItemStyle">@style/MyApp.Widget.Holo.SpinnerItem</item>
        -->
    </style>

    <style name="Widget.MyApp.ActionBar" parent="Widget.Sherlock.Light.ActionBar">
        <item name="titleTextStyle">@style/Widget.MyApp.TitleTextStyle</item>
        <item name="android:titleTextStyle">@style/Widget.MyApp.TitleTextStyle</item>
    </style>

   <style name="Widget.MyApp.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
    <item name="android:textColor">@color/orange</item>
    </style>

   <style name="MyApp.Widget.Holo.DropDownItem" parent="Widget.Sherlock.Light.DropDownItem.Spinner">
       <item name="android:background">@color/orange</item>
    </style>

   <style name="MyApp.Widget.Holo.SpinnerItem" parent="Widget.Sherlock.TextView.SpinnerItem">
       <item name="android:background">@color/orange</item>
    </style>

</resources>

res/values/color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

 <color name="orange">#ffEf4f1f</color>

</resources>

Please mark as answer if this solves it for you. Thanks!

Links:

Browse styles:

https://github.com/JakeWharton/ActionBarSherlock/blob/master/actionbarsherlock/res/values/abs__styles.xml

Browse themes:

https://github.com/JakeWharton/ActionBarSherlock/blob/master/actionbarsherlock/res/values/abs__themes.xml

Answer 2

To change the background drawable of the menu item in Sherlock Action Bar (v4.1.0), use the following:

<style name="My_Theme" parent="Theme.Sherlock">
  <item name="android:popupMenuStyle">@style/MyApp.PopupMenuStyle</item>
  <item name="popupMenuStyle">@style/MyApp.PopupMenuStyle</item>
</style>

<style name="MyApp.PopupMenuStyle" parent="Widget.Sherlock.ListPopupWindow">
  <item name="android:popupBackground">@drawable/menu_item_background</item>
</style>

hope this helps.