Android - Change Custom Spinner's DropDownItem style

Question

I got a custom spinner, and I'm trying to replace the 9-patch background / the triangle in the DropDownSelector.

I just can't get it to work right though. I end up with (the white box is a test asset):

the new 9 patch gets shown, but it messes up the padding, and it looks like a Spinner inside a Spinner.

Here's what it looks like without the 9 patch added:

This is what I want it to look like, but then with the new 9patch instead of the old one, not the Spinner in Spinner effect.

Here's my code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

   <Spinner xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/spinner2"
             android:layout_width="wrap_content"
             android:layout_height="fill_parent"
             android:layout_alignParentRight="true"
             android:gravity="center_horizontal"/>

</RelativeLayout>

I add this RelativeLayout to the Actionbar, and set a custom spinner adapter:

    SpinnerAdapter mSpinnerAdapter = (new SpinnerCustomAdapterDark(this, R.layout.customSpinnerTitleLayout, categoryNames ));

    spinner = findViewById(R.id.spinner2);

    categorySpinnerMenuitem = (Spinner) spinner;

    categorySpinnerMenuitem.setAdapter(mSpinnerAdapter);

This is the CustomSpinnerTitleLayout set to the adapter:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                style="?android:attr/spinnerDropDownItemStyle"
                android:paddingRight="0dp"   >
    <ImageView

            android:id="@+id/spinner_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon"
            android:layout_gravity="center"
            android:paddingRight="0dp"
            />

</LinearLayout>

This is the Theme where I add the 9 patch

<resources>
    <style name="CustomTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:spinnerDropDownItemStyle">@style/customActionBarDropDownStyle</item>
    </style>


    <style name="customActionBarDropDownStyle" parent="@android:style/Widget.Holo.Light.ListView" >
           <item name="android:background">@drawable/spinner9patch</item>
    </style>
</resources>

I'm obviously doing something wrong, but what? I've tried to set the spinnerDropDownItemStyle and the spinnerStyle at the Spinner in the first layout file, what didn't do anything. What am I doing wrong here?

Thanks in advance!!

Solution 1

Create an XML in drawable folder with any name for example spinner_bg.xml and add the 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>

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

Solution 2

I really recommended you check this out online Generator just make your custom spinner then download file http://jgilfelt.github.io/android-actionbarstylegenerator/

Comments

[ThomQ]

Thanks! Totally works. A question though: So, just to be clear, this way the spinner uses spinner_style and does not inherit anything from it's parent, right?

[ThomQ]

Also, where would I put the <item android:state_pressed="true" android:drawable="@color/darkgray" /> option, so that it doesn't remove the bitmap drawable? Thanks!!!