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?

android:drawableRight="arrowimage" this is done in the textview used by spinner adapter right — Illegal Argument, Jul 30 '14 at 03:17
If you show us what you have tried then it will be easy for everyone to help you. So please post some code. — Aniruddha, Jul 30 '14 at 03:39

score 60 · Accepted Answer · edited Jun 05 '17 at 08:14

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

The bit map confuses me in spinner_bg.xml. Is that what is used to draw an image? — user3781214, Jul 30 '14 at 03:44
You should give your image (arrow) name like `android:src="@drawable/your_image_name"` — Aniruddha, Jul 30 '14 at 03:47
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. — user3781214, Jul 30 '14 at 03:54

score 2 · Answer 2 · edited May 23 '17 at 12:25

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>

score 1 · Answer 3 · answered Jul 30 '14 at 03:36

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>

score 1 · Answer 4 · edited Oct 29 '16 at 08:36

1

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

edited Oct 29 '16 at 08:36

Alexander Farber

21,519
75
241
416

answered Oct 29 '16 at 07:49

Jasmine John

873
8
12

The best and easiest solution. – Bosko Vaskovic Aug 18 '21 at 13:05

score 1 · Answer 5 · answered Jun 02 '17 at 15:06

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>

Android add arrow image to spinner

5 Answers5

Linked