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

I know this is late but I came accross this question when I encountered this problem myself and I found a solution in the BrowseSessionsActivity of the Google I/O 2014 app and adapted it.

Layouts

toolbar_spinner.xml

toolbar_spinner_item_actionbar.xml

The spinner_triangle drawable can be found here.

toolbar_spinner_item_dropdown.xml

Styles

toolbar_spinner.xml uses the following style.

Adapter

This adapter will need to be changed to match your own needs. getTitle() returns the text for each item shown in the spinner.

private class YourObjectSpinnerAdapter extends BaseAdapter {
    private List mItems = new ArrayList<>();

    public void clear() {
        mItems.clear();
    }

    public void addItem(YourObject yourObject) {
        mItems.add(yourObject);
    }

    public void addItems(List yourObjectList) {
        mItems.addAll(yourObjectList);
    }

    @Override
    public int getCount() {
        return mItems.size();
    }

    @Override
    public Object getItem(int position) {
        return mItems.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getDropDownView(int position, View view, ViewGroup parent) {
        if (view == null || !view.getTag().toString().equals("DROPDOWN")) {
            view = getLayoutInflater().inflate(R.layout.toolbar_spinner_item_dropdown, parent, false);
            view.setTag("DROPDOWN");
        }

        TextView textView = (TextView) view.findViewById(android.R.id.text1);
        textView.setText(getTitle(position));

        return view;
    }

    @Override
    public View getView(int position, View view, ViewGroup parent) {
        if (view == null || !view.getTag().toString().equals("NON_DROPDOWN")) {
            view = getLayoutInflater().inflate(R.layout.
                    toolbar_spinner_item_actionbar, parent, false);
            view.setTag("NON_DROPDOWN");
        }
        TextView textView = (TextView) view.findViewById(android.R.id.text1);
        textView.setText(getTitle(position));
        return view;
    }

    private String getTitle(int position) {
        return position >= 0 && position < mItems.size() ? mItems.get(position).title : "";
    }
}

Adding the Spinner to Your Toolbar

Toolbar toolbar = getActionBarToolbar();

View spinnerContainer = LayoutInflater.from(this).inflate(R.layout.toolbar_spinner,
        toolbar, false);
ActionBar.LayoutParams lp = new ActionBar.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
toolbar.addView(spinnerContainer, lp);

YourObjectSpinnerAdapter spinnerAdapter = new YourObjectSpinnerAdapter();
spinnerAdapter.addItems(getMyObjectSpinnerData());

Spinner spinner = (Spinner) spinnerContainer.findViewById(R.id.toolbar_spinner);
spinner.setAdapter(spinnerAdapter);

Result