Spinner Dropdown Arrow

Question

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

but I was only able to get this:

As you can see I experience several problems.

1. Although I added a custom arrow, I still see the original.
2. My custom arrow gets shown at every row.
3. How do I adjust my custom arrow's dimensions and layout position?
4. 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:

EDIT 2

I've changed the style.xml into:

http://pastie.org/private/es40xgebcajajltksyeow

and this is what I get:

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

Abutter

Answer 1

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

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

Epicardium

@CrisBenois, Take a look: #25028702 – Reahard

Done. But still I see the old arrow. After I add these styles and my arrow icon, how do I apply "SpinnerTheme"? – Abutter

You don't need to apply because the theme is applied for every component which parent is Spinner as this part <style name="SpinnerTheme" parent="android:Widget.Spinner">. Did you remove the ImageView from your custom layout? – Epicardium

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? – Abutter

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. – Epicardium

I really appreciate your help but it is still not working! and I have slavishly applied your instructions, as follows: 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?? – Abutter

Let me see your Manifest. Perhaps you are calling AppTheme instead of _AppTheme. Which theme are you calling into manifest? – Epicardium

manifest: 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 – Abutter

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 <item name="android:spinnerStyle">@style/SpinnerTheme</item> into AppTheme part, because into SpinnerTheme there is <item name="android:background">@drawable/selector_spinner</item>. 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 :) – Epicardium

I removed all that code and changed the manifest into android:theme="@style/_AppTheme, then in styles.xml: 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... – Abutter

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 – Epicardium

@CrisBenois send me an email with your project attached. My email is [email protected] – Epicardium

@Lennon, I've sent you the email, did you check? Bounty ends soon ;) – Abutter

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. – Epicardium

Ok thanks you it is working! but there is one more thing, pertaining my original question: how do I get something like this: tinypic.com/r/14iewxc/8 ? – Abutter

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. – Epicardium

Answer 2

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>

Maisey