How can I change the background color of a spinner popup?

Question

I'm trying to set the background color of a spinner popup but everything I've tried didn't work properly.

This is the spinner control:

<Spinner
  android:id="@+id/myspinner"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@null"
  android:drawSelectorOnTop="true" />

When I click on it, it shows a popup with a white background, and I want to change that.

The xml line which I use to populate the popup is:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/list_selector"      
  android:paddingBottom="@dimen/padding_medium"
  android:layout_marginBottom="@dimen/padding_medium"
  android:orientation="vertical">
  
  ..........

</RelativeLayout>

and the drawable background list_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
  <!-- Pressed -->
  <item 
    android:state_pressed="true" 
    android:drawable="@color/green" /> <!--  @drawable/tab_press -->

  <!-- Selected -->
  <item 
    android:state_selected="true" 
    android:drawable="@color/green" /> <!--  @drawable/tab_press -->
 
</selector> 

Adding a default state to the above xml is ok, but the spinner main control shows the item with that background color, and I don't want that.

Another thing I've tried is to set the application background color to black in styles.xml

<style name="AppTheme" parent="android:Theme.Light">
     <item name="android:background">#000000</item>
     <item name="android:textColor">#FFFFFF</item>
     <item name="android:typeface">sans</item> 
</style>

That overrides the popup background too, but it has undesirable collateral effects. Is there any way to accomplish this in a simple way?

PS: I'm using API level 10 (2.3.3) and the attribute android:popupBackground doesn't exist.

Ashworth

Try this gersic.com/blog.php?id=57 – Spiry

Answer 1

None of the above solutions worked for me.

The solution was writing in the adapter passed to the spinner a different implementation in the method getDropDownView to display a different layout with custom colors:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View vista = convertView;       

    // layout for spinner widget

    if (vista==null) {
        LayoutInflater inflater = actividad.getLayoutInflater();
        vista = inflater.inflate(R.layout.fila_colores_spinner, null);                  
    }

    return vista;
}

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

    //layout for spinner popup

    if (vista==null) {
        LayoutInflater inflater = actividad.getLayoutInflater();
        vista = inflater.inflate(R.layout.fila_colores_spinner_popup, null);                    
    }

    return vista;
}

Ashworth

For some reason this does not work on Gingerbread - the background of the item seems to be overwritten. It's easier to just make the text color black in this case. – Coprophilous

+1 because this solution works on API 15 (the one I needed) whereas spinner.setPopupBackgroundDrawable() only works on API 16. – Optative

Answer 2

Use android:popupBackground="@drawable/Yourxmlfile.xml" in Your spinner declaration of xml .

For Eg.

    <Spinner
        android:id="@+id/spinner3"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:layout_weight="50"
        android:background="@drawable/gradient_spinner"
        android:gravity="center"
        android:paddingLeft="40dp"
        android:popupBackground="@drawable/radialfront"
        >

Ailssa

What about when the spinnerMode="dialog"? popupBackground seems to get ignored when in that mode. – Cindicindie

Answer 3

It works great!!

• declare layout with text view with the wanted color (and other attributes you want to change)
• the id of the textView must be text1 (cause this is the id that is declare in the default layout in R.android for your spinner)
• give this layout in your spinner adapter
  

for example:

• in res\layout\custom_spinner_item.xml put this:

  TextView xmlns:android="http://schemas.android.com/apk/res/android"
                  android:id="@android:id/text1"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:background="#B2B5B7"
                  android:gravity="center_horizontal"
                   android:textSize="20dp"
  

then give this layout to the adapter:

ArrayAdapter<String> adapter = new ArrayAdapter<String>(
      MyActivity.this,
      R.layout.custom_spinner_item, strings);

• then give this adapter to your spinner

Vookles

Answer 4

  <Spinner
      android:id="@+id/myspinner"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:background="@drawable/list_selector"      
      android:drawSelectorOnTop="true" />

try this..

Zetes

you can't use drawSelectorOnTop with a spinner – Basifixed