How to style Android spinner popup?

Question

I have set

<item name="android:spinnerMode">dialog</item>

and so when I tap the spinner, I get a popup. But that popup is grey with white text and I can't seem to change any of the colors. How do I style this dialog?

I tried the following with some crazy temporary colors to see what changes but nothing changes.

<style name="AppTheme" parent="AppBaseTheme">
    <item name="android:dialogTheme">@style/SpinnerDialog</item>
    <item name="android:alertDialogTheme">@style/SpinnerAlertDialog</item>
</style>

<style name="SpinnerDialog" parent="Theme.AppCompat.Light.Dialog">
    <item name="android:popupBackground">#ff00ff</item>
    <item name="colorPrimary">#ff00ff</item>
    <item name="colorPrimaryDark">#ffff00</item>
    <item name="colorAccent">#ff0000</item>
</style>

<style name="SpinnerAlertDialog" parent="Theme.AppCompat.Dialog">
    <item name="colorPrimary">#00ffff</item>
    <item name="colorPrimaryDark">#00ff00</item>
    <item name="colorAccent">#0000ff</item>
</style>

There are a bunch of similar questions, but they all either deal with dropdowns or ancient versions of Android or just don't work.

Answer 1

Instead of using theme or style.xml for changing the popup background color of dialog.

Why not try this?? In your layout xml

 <Spinner
    android:id="@+id/spinner1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:spinnerMode="dialog"
    android:popupBackground="#yourcolor"/>

Since you tried adding theme it changes nothing.This will be easy to achieve..isn't it??

Hope this helps!!!

Answer 2

You can use a custom layout to achieve this.

Spinner spinner = (Spinner) findViewById(R.id.spinner);
ArrayAdapter<String> adapter = new ArrayAdapter<>(this,
        R.id.custom_spinner_item, yourItemList);
adapter.setDropDownViewResource(R.layout.custom_spinner_dropdown_item);
spinner.setAdapter(adapter);

You should have the custom layouts in place:

• R.id.custom_spinner_item for the item in the spinner.
• R.layout.custom_spinner_dropdown_item for the spinner drop-down item.

Answer 3

I wanted to change the dialog background and add custom padding here's the style:

 <style name="customSpinnerDialog" >

        <item name="android:background">@android:color/white</item>
        <item name="android:textColor">@color/color_accent</item>
        <item name="android:padding">0dp</item>

 </style>

to apply to you spinner in layout xml :

<android.support.v7.widget.AppCompatSpinner
                android:id="@+id/reason_spinner"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:drawSelectorOnTop="true"
                android:theme="@style/customSpinnerDialog"
                android:spinnerMode="dialog"
                style="@style/SpinnerTheme"
                 />

hope this helps.

Answer 4

in your app theme or activity them :

  <item name="android:dropDownListViewStyle">@style/SpinnerStyle1</item>

declare SpinnerStyle1:

<style name="SpinnerStyle1" parent="Widget.AppCompat.ListView.DropDown">
        <item name="android:divider">@color/blackText</item>
        <item name="android:dividerHeight">1px</item>
        <item name="android:scrollbars">none</item>
</style>

Answer 5

Just create theme with "background" item which contains color that you want.

<style name="Spinner.PopUpTheme">
    <item name="android:background">@color/black</item>
</style>

Then set that theme to "popupTheme" attribute for your spinner.

<Spinner
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:spinnerMode="dialog"
    android:popupTheme="Spinner.PopUpTheme"/>

Answer 6

If it is BaseAdapter , you can use parent's rootView to set background.

@SuppressLint("ViewHolder")
override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

    val view: View = inflater.inflate(R.layout.unit_spinner_item, parent, false)
    parent?.rootView?.background = AppCompatResources.getDrawable(context,R.drawable.aa_shape )

    ...

    return view
}