Search code examples
androidcolorsandroid-spinner

Change colour of small triangle on spinner in android


enter image description here

How can I change the colour of small triangle at the bottom right corner of spinner like shown in the image? It is showing default grey colour right now. like this

enter image description here


Solution

  • To get the correct images, you can go to Android Asset Studio site and choose the Android Holo Colors Generator. This will create all the assets you might need, including the "triangle". It also generates the XML files that implement the changes.


    Here are the example XML files:

    Custom Color:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="apptheme_color">#33b5e5</color>
    </resources>
    

    Custom Spinner Style:

    <?xml version="1.0" encoding="utf-8"?>
    
    <!-- Generated with http://android-holo-colors.com -->
    <resources xmlns:android="http://schemas.android.com/apk/res/android">
    
      <style name="SpinnerAppTheme" parent="android:Widget.Spinner">
          <item name="android:background">@drawable/apptheme_spinner_background_holo_light</item>
          <item name="android:dropDownSelector">@drawable/apptheme_list_selector_holo_light</item>
      </style>
    
      <style name="SpinnerDropDownItemAppTheme" parent="android:Widget.DropDownItem.Spinner">
          <item name="android:checkMark">@drawable/apptheme_btn_radio_holo_light</item>
      </style>
    </resources>
    

    Custom Application Theme:

    <?xml version="1.0" encoding="utf-8"?>
    
    <!-- Generated with http://android-holo-colors.com -->
    <resources xmlns:android="http://schemas.android.com/apk/res/android">
    
      <style name="AppTheme" parent="@style/_AppTheme"/>
    
      <style name="_AppTheme" parent="Theme.AppCompat.Light">
    
        <item name="android:spinnerStyle">@style/SpinnerAppTheme</item>
    
        <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItemAppTheme</item>
    
      </style>
    
    </resources>
    

    As you can see, there are also many drawables that are referenced by these styles.

    Here is the one specific to the "triangle" you want to change:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Copyright (C) 2010 The Android Open Source Project
    
         Licensed under the Apache License, Version 2.0 (the "License");
         you may not use this file except in compliance with the License.
         You may obtain a copy of the License at
    
              http://www.apache.org/licenses/LICENSE-2.0
    
         Unless required by applicable law or agreed to in writing, software
         distributed under the License is distributed on an "AS IS" BASIS,
         WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
         See the License for the specific language governing permissions and
         limitations under the License.
    -->
    
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="false"
              android:drawable="@drawable/apptheme_spinner_disabled_holo_light" />
        <item android:state_pressed="true"
              android:drawable="@drawable/apptheme_spinner_pressed_holo_light" />
        <item android:state_pressed="false" android:state_focused="true"
              android:drawable="@drawable/apptheme_spinner_focused_holo_light" />
        <item android:drawable="@drawable/apptheme_spinner_default_holo_light" />
    </selector>
    

    I don't think this is the right place to list every file completely, since you can get them all directly from the referenced tool.


    Note: this is the way to theme your whole app so that all spinners are updated to the custom style.

    If you are looking for a quick and dirty way to change just one spinner, then check out that article referenced by Ricky in his comment:

    I recommend reading it anyway, because it explains the process very well, and will help you to understand the rest of my answer.