How do I set a different theme for a Spinner's dropdown?

Question

An example usage:

The Spinner is dark themed, but I want the dropdown to be light themed.

Answer 1

Android M

New in Android 6.0, Spinner now has the android:popupTheme parameter which allows you to set the theme used for the popup (dropdown).

You can use it as so:

<Spinner
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:popupTheme="@android:style/ThemeOverlay.Material.Light" />

That will work on devices running API level 23+, but not on devices running a lower version of Android.

AppCompat

This is where AppCompat comes in. Its Spinner implementation also supports popupTheme, but it's a bit more involved to get right.

<Spinner
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

After that, you need to update your Adapter to be able to work with AppCompat. You do that by making it implement the new ThemedSpinnerAdapter interface.

public class MyAdapter extends BaseAdapter implements ThemedSpinnerAdapter {

   Theme getDropDownViewTheme() { ... }

   void setDropDownViewTheme(Theme theme) { ... }

}

These methods are used by Spinner to be able to tell the Adapter which theme to use for inflating any drop down views. To make this as easy as possible we have given you a Helper class which you can plug in to your adapter.

This means that your adapter becomes something like:

public class MyAdapter extends BaseAdapter implements ThemedSpinnerAdapter {
  private final ThemedSpinnerAdapter.Helper mDropDownHelper;

  public MyAdapter(Context context) { 
    mDropDownHelper = new ThemedSpinnerAdapter.Helper(context);
  }

  @Override
  public View getDropDownView(int position, View convertView, ViewGroup parent) {
    View view;

    if (convertView == null) {
      // Inflate the drop down using the helper's LayoutInflater
      LayoutInflater inflater = mDropDownHelper.getDropDownViewInflater();
      view = inflater.inflate(R.layout.my_dropdown, parent, false);
    }

    // ...

    return view;
  }

  @Override
  public void setDropDownViewTheme(Theme theme) {
    mDropDownHelper.setDropDownViewTheme(theme);
  }

  @Override
  public Theme getDropDownViewTheme() {
    return mDropDownHelper.getDropDownViewTheme();
  }
}

Answer 2

for spinner's arrow I've used android:backgroundTint="@color/white" this will work from API 21

for spinner view and dropdown view:

ArrayAdapter<Area> areasAdapter = new ArrayAdapter<Area>(getContext(),R.layout.spinner_item, areas);

areasAdapter.setDropDownViewResource(R.layout.dropdwon_item);
areasSpinner.setAdapter(areasAdapter);

for getView() the adapter will use spinner_item.xml

for getDropDownView() the adapter will use dropdwon_item.xml

then you can use your custom layouts as you like

hope it helps

Answer 3

Just for reference if you use the CursorAdapter your implementation can be much easier, just override newView(), no need to override getDropDownView() there:

@Override
public View newView(Context context, Cursor cursor, ViewGroup parent) {
    return mDropDownHelper.getDropDownViewInflater().inflate(R.layout.list_item, parent, false);
}

Answer 4

you can try this: in your layout folder make a spinner_item.xml:

<TextView 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="10dp"
android:background = "#ffffff"
android:textColor="@color/primary_text"
android:textSize="@dimen/text_size_normal" />

then use this code:

spinnerAdapter = new ArrayAdapter<String>(R.layout.spinner_item,items);