Change color of the drop down arrow of Spinner in XML

Question

As I wrote in my question, I want to change the color of the drop down arrow (the default arrow, not a custom arrow or something like that) of a Spinner in XML, but the problem is that I couldn't find anything to make reference to it from the XML.

Is it possible? If yes, how can I change the color?

take a look at the answer [here](http://stackoverflow.com/questions/25911287/change-colour-of-small-triangle-on-spinner-in-android) — derfect, Aug 23 '15 at 12:04
@Rayes But it is for a custom dropdown, not the default dropdown. — Francisco Romero, Aug 23 '15 at 12:13
@Error404 3 months later and am faced with the same problem. your accepted answer has helped me solve the problem. 1 vote for you 1 for Hussein :) — Edijae Crusar, Dec 09 '15 at 12:54

Hussein El Feky · Accepted Answer · 2017-05-22T22:09:32.727

180

There are three ways to achieve that.

1. Through code:

In your xml, make sure your spinner has an id. Let's say we have a spinner with id "spinner".

In your code, add the following in your onCreate():

Spinner spinner = (Spinner) findViewById(R.id.spinner);
spinner.getBackground().setColorFilter(getResources().getColor(R.color.red), PorterDuff.Mode.SRC_ATOP);

where red is your defined color in colors.xml in the values folder.

2. Through xml:

For API 21+:

<Spinner
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/red" />

or if you use the support library, you can use:

<android.support.v7.widget.AppCompatSpinner
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/red" />

3. Through drawables:

You can use this online tool: http://android-holo-colors.com

This will generate custom drawables for any view you want with your preferred color. Make sure you select spinner, then download the resources.

edited May 22 '17 at 22:09

answered Aug 23 '15 at 14:30

Hussein El Feky

6,627
5
44
57

I don't have `colors.xml` file. Or I have to create it? Also I want to point that in my question, when I say **by XML**, I mean if there is some option like `android:colorDropDownArrow` or something like that to set the value of the arrrow directly in the XML. Thanks! – Francisco Romero Aug 23 '15 at 14:46
Unfortunately, there is no way you can do this from your xml except by using **android:background="@drawable/spinnerBackground"**, but this will change your spinner background completely. So you have to create a new xml in your values folder called **colors.xml** and add a color there called red. Also check my updated answer, I have put another way instead of creating **colors.xml** if you want that. – Hussein El Feky Aug 23 '15 at 14:54
Thank you for the update! But I still have a doubt. The arrow it's only displayed with the color if I don't have any background for the Spinner, but if I make a background the arrow dissapears. Do you know why it is? – Francisco Romero Aug 23 '15 at 15:11
1

If you make a background for the spinner, this means you will remove its default background which is an arrow. So if you want to use the background attribute in your xml, then you should go for the second way I posted in my answer. The site will generate a zip file with the files you will put in your project. The site will explain that to you. If you need more help, tell me. – Hussein El Feky Aug 23 '15 at 15:38
I mark it as accepted because you had been very helpful and if I have some doubt I put a new coment ;) – Francisco Romero Aug 23 '15 at 15:49
Thanks, surely ask me anything if you want. :) – Hussein El Feky Aug 23 '15 at 15:50
very best answer – Pir Fahim Shah Sep 06 '20 at 11:57

score 15 · Answer 2 · answered May 07 '16 at 00:30

15

I'm surprised noone had pointed it out, but you can just subclass Widget.AppCompat.Spinner and change backgroundTint

<style name="Spinner" parent="Widget.AppCompat.Spinner">
        <item name="backgroundTint">@color/spinnerTint</item>
</style>

and apply it to the Spinner

<Spinner
    style="@style/Spinner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:spinnerMode="dropdown" />

answered May 07 '16 at 00:30

mewa

1,532
1
12
20

2

Isn't the backgroundTint property applicable only to API level 21? – niranjan_b Jun 08 '16 at 09:03
2

@niranjan_b `android:backgroundTint` is. This is the AppCompat version (notice no android prefix here and style extends an AppCompat derived style) – mewa Jun 08 '16 at 09:07
Weird behavior: when I added the attribute android:background, no matter what value i set the background, the color of the background is taken from backgroundTint and thus one can not see the arrow. – Zvi Jul 10 '16 at 21:19
@Zvi When you change `android:background` you're no longer using Android's background drawable, but instead you are defining a new color drawable, that's why you don't see the arrow – mewa Jul 12 '16 at 18:10
Yes, I realized it when reading other posts. I also found a post that solved my problem as follows: to change the background color without destroying the drawable, I have put the spinner in a Relative layout and defined its background color. This, combined with your solution to use backgroundTint to change the arrow color, gives full control on both colors. – Zvi Jul 13 '16 at 20:37

score 13 · Answer 3 · answered Sep 29 '16 at 15:36

use backgroundTint attribute

<Spinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/white"
        />

if min_SDK < 21(Lollipop) you should use AppCompatSpinner

<android.support.v7.widget.AppCompatSpinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint="@color/white"
        />

score 8 · Answer 4 · edited Jun 20 '20 at 09:12

If (API 21+) {

you can use directly android:backgroundTint="@color/color", inside your Spinner:

<Spinner
   android:id="@+id/spinner"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:backgroundTint="@color/color" />

} else {

create your own style:

<style name="spinner_style" parent="Widget.AppCompat.Spinner">
        <item name="backgroundTint">@color/color</item>
</style>

then into Spinner:

<Spinner
   android:id="@+id/spinner"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   style="@style/spinner_style"/>

}

Note: you can use the style method in all API's.

score 4 · Answer 5 · edited Aug 22 '19 at 14:10

4

<Spinner
            android:id="@+id/spinner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="#00000" />

Only works above API Level 21

edited Aug 22 '19 at 14:10

Pankaz Kumar

320
4
15

answered Jul 28 '16 at 08:22

Shweta Chauhan

6,739
6
37
57

score 3 · Answer 6 · answered Jun 28 '16 at 06:42

3

try this:

spinner_age.getBackground().setColorFilter(ContextCompat.getColor(this,
                R.color.spinner_icon), PorterDuff.Mode.SRC_ATOP);

answered Jun 28 '16 at 06:42

Mr T

1,409
1
17
24

3

it changed the background color and not the color of the arrow – Zvi Jul 10 '16 at 21:31

score 1 · Answer 7 · answered Jan 11 '19 at 10:49

1

Use this dependency for create a very nice and easy spinner and use "app:arrowTint="@color/green" to change the arrow color

answered Jan 11 '19 at 10:49

Ahmad Arslan

4,498
8
38
59

Tried to use it, not showing the list at all. – W.M. Jan 05 '22 at 18:08

Change color of the drop down arrow of Spinner in XML

7 Answers7

Linked