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?

Answer 1

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.

Answer 2

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" />

Answer 3

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.

Answer 4

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

Answer 5

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

Only works above API Level 21

Answer 6

try this:

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

Answer 7

Step 1. Design your own drop-down arrow using:

https://icons8.com/icons/set/drop-down

Step 2. Add a white box with black border by the side of the down arrow using Paint and save as .PNG file.

It should look something like this:

Step 3. Copy and paste the .PNG image into the app's drawable folder

Step 4. At activity_main.xml, copy and paste the following codes:

         <TextView
            android:id="@+id/spinnersearchtext"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:layout_marginEnd="5dp"
            android:gravity="center|end"
            android:text="Search:"
            android:textColor="#FFFFFF"
            android:textSize="20dp"
            android:textStyle="bold"
            android:visibility="visible"
            app:layout_constraintEnd_toStartOf="@+id/spinner1"
            app:layout_constraintHorizontal_bias="1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/spinner1" /> 


         <Spinner
            android:id="@+id/spinner1"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_marginLeft="50dp"
            android:background="@drawable/dropdownarrow"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

End Result:

Answer 8

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"
        />