Android add arrow image to spinner

Question

I have created a background drawable that I use for a spinner. I would like to now but an arrow image inside this background. I have tried things like android:drawableRight="arrowimage", but this does not seem to show anything. Does anyone know how I can include an image in my custom background for a spinner?

Dorathydorca

android:drawableRight="arrowimage" this is done in the textview used by spinner adapter right – Troytroyer

If you show us what you have tried then it will be easy for everyone to help you. So please post some code. – Cecillececily

Answer 1

Create an XML in a drawable folder with any name for example spinner_bg.xml and add this following lines

<?xml version="1.0"
      encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <layer-list>
      <item>
        <shape>
          <gradient android:angle="90"
                    android:endColor="#ffffff"
                    android:startColor="#ffffff"
                    android:type="linear" />

          <stroke android:width="1dp"
                  android:color="#504a4b" />

          <corners android:radius="5dp" />

          <padding android:bottom="3dp"
                   android:left="3dp"
                   android:right="3dp"
                   android:top="3dp" />
        </shape>
      </item>
      <item>
        <bitmap android:gravity="bottom|right"
                android:src="@drawable/spinner_ab_default_holo_dark_am" />
        // you can use any other image here, instead of default_holo_dark_am
      </item>
    </layer-list>
  </item>
</selector>

Add the following lines to your styles.xml which is inside values folder

<style name="spinner_style" >
        <item name="android:background">@drawable/spinner_bg</item>
        <item name="android:layout_marginLeft">10dp</item>
        <item name="android:layout_marginRight">10dp</item>
        <item name="android:layout_marginBottom">10dp</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingTop">5dp</item>
        <item name="android:paddingBottom">5dp</item>
</style>

Now add this style to your spinner as

<Spinner android:id="@+id/spinner1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         style="@style/spinner_style"
         android:popupBackground="#cccccc" />

Cecillececily

The bit map confuses me in spinner_bg.xml. Is that what is used to draw an image? – Dorathydorca

You should give your image (arrow) name like android:src="@drawable/your_image_name" – Cecillececily

Ahh okay. I haven't tried using a layer-list for this scenario. android:src makes since. I have been trying to directly define an image to the right inside my layout file android:drawableRight which was not working. I will try this solution tomorrow. Thank you. – Dorathydorca

text and arrow have overlaps in android 6 – Diagraph

Answer 2

Aniruddha's solution worked fine for me, when I used JellyBean (4.2.2) or Kitkat (4.4). But unfortunately on Marshmallow (6.0) I have an exception, possible cause explained here: Using drawable resources

I ended up just making a trick and place spinner to LinearLayout with ImageView like this:

<LinearLayout
    android:id="@+id/spinner_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/your_arrow_drawable"/>
</LinearLayout>

Preferential

Answer 3

This works for me. You may be missing the default state. Without posting your code it's hard to tell.

<!-- theme -->
<item name="android:dropDownSpinnerStyle">@style/mySpinnerStyle</item>

<!-- style -->
<style name="mySpinnerStyle" parent="android:Widget.Holo.Spinner">
      <item name="android:background">@drawable/mySpinner_background</item>
</style>

<!-- mySpinner_background -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false"
          android:drawable="@drawable/mySpinner_disabled" />
    <item android:state_pressed="true"
          android:drawable="@drawable/mySpinner_pressed" />
    <item android:state_pressed="false" android:state_focused="true"
          android:drawable="@drawable/mySpinner_focused" />
    <item android:drawable="@drawable/mySpinner_default" />
</selector>

Metallist

Answer 4

This has worked for me:

<Spinner
      android:id="@+id/spinner"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:theme="@style/ThemeOverlay.AppCompat.Light"
      android:spinnerMode="dropdown" />

Scopp

The best and easiest solution. – Rolfe

Answer 5

Set your Image ICON On Spinner :

<item>

    <layer-list>

        <item>
            <color android:color="@android:color/white" />
        </item>

        <item>
            <bitmap android:gravity="center_vertical|right" android:src="@drawable/down_arrow" />
        </item>

    </layer-list>

</item>

Vantage