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

Chris Banes picture Chris Banes · Aug 18, 2015 · Viewed 26k times · Source

An example usage:

enter image description here

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

Answer

Chris Banes picture Chris Banes · Aug 18, 2015

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();
  }
}