Spinner Dropdown Arrow

46.1k views Asked by At

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.

  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:

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

2

There are 2 answers

16
Lennon Spirlandelli On BEST ANSWER

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"/> 
0
Siddharth Makadiya On

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>