27

I'm trying to get my android app a bit more stylish and have made some progress but the spinner dropdown are giving me trouble. I've got a screenshot to show you the problem:

How do I get rid of the white background

What I want is the white box in the background to be transparent, as in the same grey overlay over the back screen as the rest of the screen outside the dropdown.

Android 4.0, API 15 if I recall correctly.

As requested here's how I do it so far. These are snippets I think are relevant but I might have missed something.

Here's the xml for spinner:

<Spinner
    android:id="@+id/edit_countrySpinner"
    android:layout_width="0dip"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:entries="@array/edit_countryArray"
    android:gravity="center"
    android:prompt="@string/country_prompt" />

In my values/style.xml. If I change the color of the background here the background in the dialog do change, but all the rest of the backgrounds as well. I haven't figure out how to jus change the background in the dropdown dialog.

<style name="appcin" parent="@android:style/Theme.NoTitleBar.Fullscreen">
    <item name="android:spinnerStyle">@style/spinnerStyle</item>
    <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
    <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item> -->
    <item name="android:background">#FFFFFF</item>
</style>
<style name="spinnerStyle">
    <item name="android:background">@drawable/pink_white_dropdown</item>
    <item name="android:clickable">true</item>
</style>
<style name="SpinnerItem">
    <item name="android:textColor">#993399</item>
    <item name="android:background">@drawable/pink_white_dropdown</item>
    <item name="android:maxHeight">10dip</item>
</style>
<style name="SpinnerDropDownItem">
    <item name="android:textColor">#993399</item>
    <item name="android:background">#FFFFFF</item>
</style>

I've tried adding this to the app theme but none of them made any difference, the background was still white.

<...theme....>
   <item name="android:dropDownListViewStyle">@style/DropDownStyle</item>
   <item name="android:dropDownSpinnerStyle">@style/DropDownStyle</item>
   <item name="android:dropDownSelector">@style/DropDownStyle</item>
</... theme ...>
<style name="DropDownStyle">
    <item name="android:background">#FFF000</item>
    <item name="android:popupBackground">#FFF000</item>
    <item name="android:cacheColorHint">#FFF000</item>
</style>

In drawable/pink_white_dropdown, just showing the same image for all the cases. pink_white_arrow is a 9patch image I've made. There are lots of guides, here's one I found by 30sec on google.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_window_focused="false" android:state_enabled="true"
      android:drawable="@drawable/pink_white_arrow"/>
  <item android:state_window_focused="false" android:state_enabled="false"
      android:drawable="@drawable/pink_white_arrow"/>
  <item android:state_pressed="true" 
      android:drawable="@drawable/pink_white_arrow"/>
  <item android:state_pressed="false" 
      android:drawable="@drawable/pink_white_arrow"/>
  <item android:state_focused="true" android:state_enabled="true" 
      android:drawable="@drawable/pink_white_arrow"/>
  <item android:state_enabled="true" 
      android:drawable="@drawable/pink_white_arrow"/>
  <item android:state_focused="true" 
      android:drawable="@drawable/pink_white_arrow"/>
  <item 
      android:drawable="@drawable/pink_white_arrow"/>
</selector>

Somewhere in these files I figure something should be made transparent, but I don't know where.

2
  • 1
    Can you share how you do it so far ?
    – sdabet
    Dec 4, 2012 at 12:49
  • 1
    Added current solution, I think that should be all the relevant things but I'm not sure.
    – dutt
    Dec 5, 2012 at 19:23

4 Answers 4

55
+50

Remove the SpinnerStyle background attribute.

Remove this:

<style name="spinnerStyle">
    <item name="android:background">@drawable/whitish_rectangle</item>
</style>

which is what draws the background white rectangle.

Building on the code in your question, here is a basic example on how you can style your Spinner:

The styles.xml file sets styles for the SpinnerItem and SpinnerDropDownItem:

<resources>
    <style name="customtheme" parent="@android:style/Theme.Light">
        <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
        <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
    </style>
    <style name="SpinnerItem">
        <item name="android:textColor">#993399</item>
        <item name="android:background">@drawable/my_rectangle</item>
    </style>
    <style name="SpinnerDropDownItem">
        <item name="android:textColor">#993399</item>
        <item name="android:background">@drawable/my_rectangle</item>
    </style>
</resources>

For testing, I've created a bright-colored drawable shape, called my_rectangle.xml. Replace this with your own drawable:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#ff0000" />
    <stroke
        android:width="1dp"
        android:color="#888888" />
</shape>

Add the Spinner to the Activity's layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:padding="40dip">
    <Spinner
        android:id="@+id/edit_countrySpinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:entries="@array/location_names"/>
</LinearLayout>

This produces:

enter image description here

with no white square in the background.

1
  • Very close, it was the background in my theme that created the white box behind actually. But you led me down the right path and now it looks like it should. Well, at least this bit does :} Now to style the dialogs... Thanks a lot for the help.
    – dutt
    Dec 18, 2012 at 23:17
2

add

<item name="android:popupBackground">@null</item>

to your spinner style.

3
  • 1
    Didn't work. I also tried adding that line to all styles related to the spinner and the app theme as well but that didn't work either.
    – dutt
    Dec 6, 2012 at 17:15
  • 1
    This helped me find the solution. The spinner was placed on a gradient grey view and so I only wanted the background of the dropdown to be light grey-- but it was defaulting to holo dark color. So I set the style of the spinner to <item name="android:popupBackground">#DDDDDD</item> and it worked perfectly. Thanks @faylon!
    – bkurzius
    Mar 24, 2013 at 23:24
  • 2
    Can u explain how you set the style of the spinner? I use this in my theme <item name="android:spinnerItemStyle">@style/SpinnerItemAppTheme</item>, where <style name="SpinnerItemAppTheme" parent="android:TextAppearance.Widget.TextView.SpinnerItem"> <item name="android:textColor">#ffffff</item> </style>. But when I try to add the item you suggested to SpinnerItemAppTheme nothing happens'.
    – Sandra
    Mar 25, 2013 at 15:59
2

style android spinner

Spinner Widget requires two different custom layouts, one for the view to be displayed and another for the drop down list!

In this example blog on Custom Spinner Android, we will guide you how to create a custom spinner in android studio which will have:

  1. Customized Background for Selected Item
  2. Custom Selected Item Text Color
  3. Text Color for Dropdown
  4. Background for Drop down List
  5. Spinner Animation

Link here: https://androiddvlpr.com/custom-spinner-android/

1
  • Links to solutions are helpful, but can disappear. You should consider adding the main text from the link as your answer.
    – tbm
    Apr 20, 2019 at 17:06
0

I had the same problem, and the below code worked for me:

<item name="android:popupBackground">@null</item> 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.