Customizing spinner does not work

Question

I tried to customize spinner as follows where image is a 9 patch image.

<Spinner
android:layout_width="fill_parent"
android:layout_height="50dp"
android:id="@+id/spinner"
android:textSize="20sp"
android:background="@drawable/image"
/>

The result is this: Spinner screenshot

The text is completely hidden by the image. How to make the text visible?

Edit:

I verified that I can see the text on spinner if I use the image1. But if I use this image2 (created by yours truly) then I cannot see the text. Seems something is wrong with my 9 patch image. But I can't figure out what ?

http://stackoverflow.com/questions/16694786/how-to-customize-a-spinner-in-android — Naveen Tamrakar, Nov 12 '14 at 06:50
http://adanware.blogspot.in/2012/03/android-custom-spinner-with-custom.html — Naveen Tamrakar, Nov 12 '14 at 06:51

score 1 · Answer 1 · answered Nov 12 '14 at 07:22

try this code


layout:- 



 <Spinner
                android:id="@+id/endmonthsp"
                android:layout_width="140dp"
                android:layout_height="50dp"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"

                android:gravity="center" />




Activity:-


ArrayList<String> month = new ArrayList<String>(Arrays.asList("Month",
            "January", "February", "March", "April", "May", "june", "July",
            "August", "September", "October", "November", "December"));



Spinner  spinner5 = (Spinner) findViewById(R.id.endmonthsp);
        startdatemonthadapter = new DateAdapter(this, R.layout.spinnerlayout,
                month);
        spinner1.setAdapter(startdatemonthadapter);
        startdatemonthadapter
                .setDropDownViewResource(android.R.layout.simple_dropdown_item_1line);



Adapter:-

public class DateAdapter extends ArrayAdapter<String> {

    public DateAdapter(Context context, int resource, List<String> objects) {
        super(context, resource, objects);
        // TODO Auto-generated constructor stub
        this.context = context;
    }

    private Context context;

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub

        View view = convertView;
        if (view == null) {
            LayoutInflater inflate = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            view = inflate.inflate(R.layout.spinnerlayout, null);
        }

        TextView spinneritemTV = (TextView) view
                .findViewById(R.id.spinneritemTV);
        spinneritemTV.setText(getItem(position));
        return view;
    }
}




spinnerlayout:-

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="200dp"
    android:layout_marginBottom="50dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="50dp" >

    <TextView
        android:id="@+id/spinneritemTV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:padding="10dp"
        android:text="Testing "
        android:textColor="#868A8D"
        android:textSize="18sp" />

</RelativeLayout>

score 0 · Answer 2 · answered Nov 12 '14 at 07:05

You need to set background of spinner as follows:

In your layout xml :

         <Spinner
             android:id="@+id/spinner1"
             style="@style/spinner_style"
             android:layout_width="match_parent"
             android:layout_gravity="center_vertical"
             android:gravity="center_vertical" 
             android:layout_height="45dp" />

Now in style.xml add a style for spinner as follows:

` <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>
    -->
    <item  name="android:paddingLeft">5</item>
 </style>`

Now make a xml named spinner_bg.xml in drawable : `

<item><layer-list>
        <item><shape>


                 <gradient android:angle="90" android:endColor="@android:color/transparent" android:startColor="@android:color/transparent" android:type="linear" />

                <padding android:left="2dp" android:right="2dp" />
            </shape></item>
        <item>
            <bitmap android:gravity="center_vertical|left" android:src="your background drawable for spinner here" />
        </item>

    </layer-list></item>

`

According to your question, below part of spinner_bg.xml did the trick.

 `<item>
      <bitmap android:gravity="center_vertical|left" android:src="your background      drawable for spinner here" />
   </item>`

Thats it.

score 0 · Accepted Answer · answered Nov 12 '14 at 09:19

There is really nothing wrong in setting the spinner background directly as I have done. Of course you cannot have different "states" of the spinner then. The text was not visible because the 9 patch image was corrupted for some unknown reason. I recreated the image and I can see the text on the spinner now. One more thing: the text will not be visible if "content areas" are not defined on the 9 patch.

Customizing spinner does not work

3 Answers3