Spinner Dropdown Arrow

Question

I am trying to obtain a custom Spinner such as this one:

but I was only able to get this:

enter image description here

As you can see I experience several problems.

Although I added a custom arrow, I still see the original.
My custom arrow gets shown at every row.
How do I adjust my custom arrow's dimensions and layout position?
How do I generate underlined rows?

This is my code:

onCreateView():

Spinner spinner = (Spinner) rootView.findViewById(R.id.spinner);
this.arraySpinner = new String[]{
    "Seleziona una data",
    "03 Agosto 2015",
    "13 Giugno 2015",
    "27 Novembre 2015",
    "30 Dicembre 2015",
};
ArrayAdapter<String> adapter = new ArrayAdapter<>(
        getActivity(),
        R.layout.row_spinner,
        R.id.weekofday,
        arraySpinner);

spinner.setAdapter(adapter);

res/layout/row_spinner.xml:

<?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:orientation="horizontal"
    android:padding="8dp">

    <TextView android:id="@+id/weekofday"
        android:singleLine="true"
        android:textSize="@dimen/textSize"
        style="@style/SpinnerDropdown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageView android:id="@+id/icon"
        android:paddingStart="8dp"
        android:paddingLeft="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/spinner_arrow"/>

</LinearLayout>

EDIT

I've removed the ImageView and added a second Spinnercreated from Resource:

ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
        getActivity(),
        R.array.date,
        R.layout.spinner_layout);
spinnerDate.setAdapter(adapter);

Spinner spinnerTime = (Spinner) rootView.findViewById(R.id.spinnerTime);
ArrayAdapter<CharSequence> adapterTime = ArrayAdapter.createFromResource(
        getActivity(),
        R.array.ore,
        R.layout.spinner_layout);
spinnerTime.setAdapter(adapterTime);

with this layout:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:padding="8dp"
    android:singleLine="true"
    android:layout_height="wrap_content" android:layout_width="match_parent"/>

I've added this to my style.xml:

<style name="AppTheme" parent="@style/_AppTheme"/>
<!-- Base application theme. -->
<style name="_AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:dropDownSpinnerStyle">@style/SpinnerTheme   </item>

    <item name="android:windowActionBarOverlay">false</item>
    <item name="colorPrimary">@color/ColorPrimary</item>
    <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
</style>

....
.... 
....

<!--Spinner styles 2-->
<style name="SpinnerTheme" 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="SpinnerTheme.DropDown">
    <item name="android:spinnerMode">dropdown</item>
</style>

<!-- Changes the spinner drop down item radio button style -->
<style name="DropDownItemSpinnerTheme" parent="android:Widget.DropDownItem.Spinner">
    <item name="android:checkMark">@drawable/apptheme_btn_radio_holo_light</item>
</style>

<style name="ListViewSpinnerTheme" parent="android:Widget.ListView">
    <item name="android:listSelector">@drawable/apptheme_list_selector_holo_light</item>
</style>

<style name="ListViewSpinnerTheme.White" parent="android:Widget.ListView.White">
    <item name="android:listSelector">@drawable/apptheme_list_selector_holo_light</item>
</style>

<style name="SpinnerItemTheme"
    parent="android:TextAppearance.Widget.TextView.SpinnerItem">
    <item name="android:textColor">#000000</item>
</style>

but there is no result ! I still see this:

enter image description here

EDIT 2

I've changed the style.xml into:

http://pastie.org/private/es40xgebcajajltksyeow

and this is what I get:

enter image description here

Now instead of replacing the dropdown arrow icon I even have a second icon, the holo checkbox (which is working well, getting selected when I choose one item), but still, how do I get only the one that I want??

manifest.xml:

http://pastie.org/private/tu0izusbvvxe91lwmh9vnw

Lennon Spirlandelli · Accepted Answer · 2015-06-18T15:27:55.207

10

You have to remove the Imageview into your custom layout row_spinner.xml. In case, you don't need to create an arrow inside your custom layout, because if you do, it'll be created in each row like happened to you. For doing the same you showed us, you must change the Spinner style into your styles.xml.

For example:

<resources>

    <style name="SpinnerTheme" parent="android:Widget.Spinner">
        <item name="android:background">@drawable/spinner_background_holo_light</item>
        <item name="android:dropDownSelector">@drawable/list_selector_holo_light</item>
    </style>

    <style name="SpinnerTheme.DropDown">
        <item name="android:spinnerMode">dropdown</item>
    </style>

    <!-- Changes the spinner drop down item radio button style -->
    <style name="DropDownItemSpinnerTheme" parent="android:Widget.DropDownItem.Spinner">
        <item name="android:checkMark">@drawable/btn_radio_holo_light</item>
    </style>

    <style name="ListViewSpinnerTheme" parent="android:Widget.ListView">
        <item name="android:listSelector">@drawable/list_selector_holo_light</item>
    </style>

    <style name="ListViewSpinnerTheme.White" parent="android:Widget.ListView.White">
        <item name="android:listSelector">@drawable/list_selector_holo_light</item>
    </style>

    <style name="SpinnerItemTheme" 
            parent="android:TextAppearance.Widget.TextView.SpinnerItem">
        <item name="android:textColor">#000000</item>
    </style>

</resources>

For further information take a look: http://androidopentutorials.com/android-how-to-get-holo-spinner-theme-in-android-2-x/

EDIT

selector_spinner.xml:

<?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="@android:drawable/arrow_up_float" />

            </item>

        </layer-list>

    </item>

</selector>

styles.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <item name="android:spinnerStyle">@style/SpinnerTheme</item>
    </style>

    <style name="SpinnerTheme" parent="android:Widget.Spinner">
        <item name="android:background">@drawable/selector_spinner</item>
    </style>

</resources>

At the end, the spinner will look like as enter image description here

EDIT 2

The following code is into details_fragment_three.xml

<Spinner
    android:id="@+id/spinnerDate"
    android:layout_marginLeft="-8dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/spinner_item_drawable"/>

edited Jun 18 '15 at 15:27

answered Jun 08 '15 at 15:18

Lennon Spirlandelli

3,131
5
26
51

1

@CrisBenois, Take a look: http://stackoverflow.com/questions/25028202/android-add-arrow-image-to-spinner – Clayton Oliveira Jun 08 '15 at 15:20
Done. But still I see the old arrow. After I add these styles and my arrow icon, how do I apply "SpinnerTheme"? – Cris Jun 08 '15 at 16:26
You don't need to apply because the theme is applied for every component which parent is Spinner as this part ` – Lennon Spirlandelli Jun 08 '15 at 17:50
Yes I've removed the ImageView and then applied my theme like in my last Edit... but as you can see it still didn't change the style... why? – Cris Jun 09 '15 at 16:07
1

As I could see in your code, you are just using the `SpinnerTheme` and not the others. The code I have posted was just an example, so you need to change almost everything. Anyway, I tested some code in my app and it has worked perfectly. Take a look at my edit and remember that it's only an example, then you must to adapt it. – Lennon Spirlandelli Jun 09 '15 at 17:50
I really appreciate your help but it is still not working! and I have slavishly applied your instructions, as follows: http://pastie.org/private/hdodshaapb5n8odjmejznq I wanted to get some kind of result first (your last edit) and then to customize it, but it seems as if everything I do takes no effect whatsoever... what am I doing wrong?? – Cris Jun 10 '15 at 17:12
Let me see your Manifest. Perhaps you are calling `AppTheme` instead of `_AppTheme`. Which theme are you calling into manifest? – Lennon Spirlandelli Jun 11 '15 at 19:32
manifest: http://pastie.org/private/tu0izusbvvxe91lwmh9vnw but see my edit. I've been trying to apply all the items in the `style.xml` as you told me and that's the result – Cris Jun 11 '15 at 20:22
As I said, you are calling `AppTheme` into manifest by using `android:theme="@style/AppTheme"`. And following my answer, you don't need all that code into your `style.xml`. You'll only need to add `@style/SpinnerTheme` into `AppTheme` part, because into `SpinnerTheme` there is `@drawable/selector_spinner`. If it doesn't work, you can add `style="@style/SpinnerTheme"` in each `spinner` into XML. No matter the way you do, at the end it's all the same :) – Lennon Spirlandelli Jun 11 '15 at 20:49
I removed all that code and changed the manifest into `android:theme="@style/_AppTheme`, then in `styles.xml`: http://pastie.org/private/xzq942wqjxsfeme9mjy7sa but still, the Spinner has the original arrow. Then I've tried what you said, adding `style="@style/SpinnerTheme"` in each spinner, but that causes every item to have the `selector_spinner` layout with the upper arrow....just like before... – Cris Jun 12 '15 at 16:42
Maybe there is something wrong in somewhere in your code. Can you send me your whole project so that I'm able to find out what is going wrong – Lennon Spirlandelli Jun 12 '15 at 17:32
@CrisBenois send me an email with your project attached. My email is lennonpetrick@gmail.com – Lennon Spirlandelli Jun 15 '15 at 12:50
@Lennon, I've sent you the email, did you check? Bounty ends soon ;) – Cris Jun 16 '15 at 18:36
1

Sorry dude for delay. I don't know what's going on with your project. I used all the way I know to do the spinner gets the `style` and doesn't work. However, I tried adding `android:background="@drawable/spinner_item_drawable"` into each spinner code in the `details_fragment_three.xml` and it works perfectly. So you don't need to do anything in the `style`. Check my edit answer and see how that part of code looks now. – Lennon Spirlandelli Jun 18 '15 at 15:24
Ok thanks you it is working! but there is one more thing, pertaining my original question: how do I get something like this: http://tinypic.com/r/14iewxc/8 ? – Cris Jun 19 '15 at 16:03
That image is from a default style. Only depends on your Android version. If you wanna change the style of `spinner`, you will just work into `drawable/spinner_item_drawable`. Into there you are able to add whatever arrow image. – Lennon Spirlandelli Jun 19 '15 at 18:11

score -1 · Answer 2 · edited Jul 17 '17 at 13:49

You can use your own drop down image;

        <item>

            <layer-list>

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

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

            </layer-list>

        </item>

    </selector>

Spinner Dropdown Arrow

2 Answers2

Linked