How can I fix the Spinner style for Android 4.x placed on top of the Toolbar

Question

According to Android documentation, Material Design style is supported for Spinner widget.

So I decided to use it in my app placing it on top of the Toolbar.

<

Answer 1

To pick up on this, I was having similar problems. My main problem was the text in my toolbar was smaller than the usual title dimensions and the wrong colour. Screenshot here http://s27.postimg.org/v24x1aw43/Screen_Shot_2015_01_11_at_13_36_04.png

The dropdown menu was ok, but I will go through the customisation of that as well.

Let me also make clear this fix is mostly based on @Daniel B's fix, however does not require the custom adapter, as far as I can tell nothing is broken, but I give no guarantees!

1. Add a normal spinner item into the XML layout file (within the toolbar).

2. Create new layout file toolbar_spinner_item_actionbar.xml (This will be the stuff showing for the spinner in the toolbar)

3. The adapter for your spinner remains pretty much the same, however switch the layout from the standard android.R.layout.simple_spinner_dropdown_item to R.layout.toolbar_spinner_item_actionbar. This will apply your custom look for the toolbar text.

In this example I have set the adapter.setDropDownViewResource to android.R.layout.simple_spinner_dropdown_item, this applies the standard theme defaults for the drop down list, which I am happy with.

ArrayAdapter set1Adapter = new ArrayAdapter(RoutineDetailsActivity.this, R.layout.toolbar_spinner_item_actionbar, set1Actual);
        set1Adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

        mWeekSpinner.setAdapter(set1Adapter);

That's basically it, result here [can't attach image or add another link as my rep is too low! Will add in comment] . You could stop here, however you may want to change the colour of the dropdown arrow.

Technically it is the correct tinting for my app, however, as my primary colour is already the colour for the toolbar, it would make sense to customise the arrow.

Setup custom arrow drawable

1. Add this line drawable line 'android:drawableRight="@drawable/spinner_triangle' into the toolbar_spinner_item_actionbar.xml made earlier. Now this could be any image, for now you could use Daniel B's white arrow resource here https://raw.githubusercontent.com/google/iosched/master/android/src/main/res/drawable-xxhdpi/spinner_triangle.png.

Running this will result in two arrows, the white arrow and the theme default. To solve this add the style below. Again this is pulled from Daniel B's code and could probably be abridged, but for now it works....

2. Apply the created style to the spinner...

The result will be something like this [again can't attach or link, will add to comment]. The padding can be set from the file setup earlier, in my case I would need to change the arrow to match the icons.

Hope that makes some sort of sense.