How to design a spinner in Android

Question

I want to design a spinner as displayed in the image below:

I am not getting the arrow symbol pointing downside in spinner. How can I do this?

If I make a button design like shown above then I have to write extra code to get similar functionality as for a spinner, as Spinner doesn't have android:drawableRight="@drawable/arraodown", but in the button we have this method.

Answer 1

Do not mess around with right/left/... drawables.

Just set one 9-patch drawable as background that limits the inner content.

<Spinner
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/you_spinner_drawable" />

Regarding the 9-patch drawable have a look at the android resources or at this example picture taken from this blog post (which shows in little more detail on how to make a custom spinner):

For information about 9-patch drawables see the android documentation: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch http://developer.android.com/tools/help/draw9patch.html

Of course you can also specify a State list xml file as drawable, eg.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When disabled -->
    <item android:state_enabled="false"
        android:drawable="@drawable/your_disabled_spinner_drawable" />
    <!-- When selected -->
    <item android:state_pressed="true"
        android:drawable="@drawable/your_selected_spinner_drawable" />
    <!-- When not selected-->
    <item
        android:drawable="@drawable/your_default_spinner_drawable" />
</selector>

http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList

Answer 2

<Spinner
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/you_spinner_drawable" />

**You can use the below mentioned Drawable to set as background for this spinner**.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When disabled -->
    <item android:state_enabled="false"
        android:drawable="@drawable/your_disabled_spinner_drawable" />
    <!-- When selected -->
    <item android:state_pressed="true"
        android:drawable="@drawable/your_selected_spinner_drawable" />
    <!-- When not selected-->
    <item
        android:drawable="@drawable/your_default_spinner_drawable" />
</selector>

Answer 3

You will have to create a custom layout for the spinner. I think the following XML might give you an idea.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="3dip">

    <TextView
        android:id="@+id/number"
        android:padding="3dip"
        android:layout_marginTop="2dip"
        android:layout_marginLeft="5dip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>