Android: Make Spinner in ActionBar have the same look/style as rest of the Action Bar item

Question

I am trying to add a 'Spinner' in the OPTIONS MENU in my Android App that uses AppCompatActivity.

In the example I have prepared, I want the spinner to present a dropdown list of options such as 'All/Successful/Failed'.

Following instructions found elsewhere on StackOverflow, I am able to add the spinner to the action bar, but it looks really odd. I want the spinner to match the look of action bar items, which in my case means that the title on the action bar should be white, and when I click on the spinner, the pop up should have white background and black test just like the overflow options menu.

Please see the screenshot below for the appearance I am currently getting.

Image of collapsed and expanded spinner menu item

As you can see, the problem is that spinner selection shows up in black when the rest of the actionbar item are in white. Similarly, when the spinner is clicked, the items in the dropdown have dark background with black text, whereas the rest of the menu items (overflow menu for example), have light background with black text.

I have added this spinner by doing the following:

Step 1: Added the menu item in menu xml:

 <item android:id="@+id/spinner"
      app:showAsAction="always"
      android:title="Filter"
      app:actionViewClass="android.widget.Spinner" />

Step 2: In my Activity (in this this case Fragment) menu expansion code, added the following:

        String [] adapterValues = new String[]{"All", "Successful", "Failed"};
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_spinner_item, adapterValues);

    MenuItem item = menu.findItem(R.id.spinner);

    Spinner spinner = (Spinner) MenuItemCompat.getActionView(item);
    spinner.setAdapter(adapter); 

Solution Tried:

So in my array adapter, instead of using the default spinner layout, I created and provided my owner layout as shown below:

ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), R.layout.actionbar_spinner_filter, R.id.spinner_text, adapterValues);

And the corresponding layout file is:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     android:padding="16dp"
     android:background="@android:color/white"
>

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/spinner_text"
    />

</LinearLayout>

This gave me the following results, and as you can see, these are quite weird.

Image of collapsed and expanded spinner menu

Summary of Question:

1. Is this the best way of adding an options menu to my AppCompatActivity for a 'dropdown menu' effect?
2. What is the best way I can use to make sure that the appearance of spinner menu matches the actionbar when it's collapsed, and when it's expanded, it matches the description of rest of the pop up items in the action bar (such as overflow menu)?

Thanks

Answer 1

In your menu xml file do something like:

<?xml version="1.0" encoding="utf-8"?>
<menu 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app.polar="http://schemas.android.com/apk/res-auto">
    <item 
        android:id="@+id/item0" 
        app.polar:showAsAction="always" 
        android:icon="@drawable/some_icon" 
        android:title="@string/some_title"/>
    <item
        android:id="@+id/item1"
        app.polar:showAsAction="always"
        android:icon="@drawable/some_icon"
        android:title="@string/some_title">
        <menu
            android:id="@+id/submenu1">
            <item
                android:id="@+id/item11"
                app.polar:showAsAction="never"
                android:title="@string/some_submenu_title"/>
            <item
                android:id="@+id/item12"
                app.polar:showAsAction="never"
                android:title="@string/some_submenu_title"/>
            <item
                android:id="@+id/item13"
                app.polar:showAsAction="never"
                android:title="@string/some_submenu_title"/>
            </menu>
        </item>
    </menu>

In your activity do something like:

public boolean onCreateOptionsMenu(Menu menu){
    getMenuInflater().inflate(R.menu.yourmenu, menu);
    return true;
}

public boolean onOptionsItemSelected(MenuItem item) {
    switch(item.getItemId()){
        case R.id.item0:{
            //do something
            return true;
        }
        case R.id.item11:{
            //do something
            return true;
        }
        case R.id.item12:{
            //do something
            return true;
        }
        case R.id.item13:{
            //do something
            return true;
        }
    }
    return super.onOptionsItemSelected(item);
}

if you do it like this, the style of your submenu will always be the same as the normal actionbar overflow menu.