Custom Spinner with Text and Icons

Spinner is a widget similar to Drop-Down list for selecting items.

Step 1: Start a new Project named CustomSpinner

 Step 2: Open the res/layout/main.xml and insert the following

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
<Spinner
    android:id="@+id/spinner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />
</LinearLayout>

Step 3: Create row.xml in res/layout and insert the following :

 <?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">
<ImageView
 android:id="@+id/icon"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/icon"
 android:layout_marginLeft="15dip" />
<TextView
 android:id="@+id/weekofday"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="5dip"
 android:layout_marginTop="10dip"
 android:text="Sunday"
 android:textColor="#000000"/>
</LinearLayout>


Step 4: Now open CustomSpinner.java and add the following code :

package com.spinner.demo;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.Spinner;
import android.widget.TextView;

public class CustomSpinner extends Activity {
   
    String[] DayOfWeek = {"Sunday", "Monday", "Tuesday",
            "Wednesday", "Thursday", "Friday", "Saturday"};
   
    Integer[] image = {
                 R.drawable.change,
                R.drawable.change1,
                R.drawable.change2,
                R.drawable.change3,
                R.drawable.change4,
                R.drawable.change5,
                R.drawable.change1,
                R.drawable.change2 };
   
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main1);
       
        Spinner mySpinner = (Spinner)findViewById(R.id.spinner);
        mySpinner.setAdapter(new MyCustomAdapter(CustomSpinner.this, R.layout.test, DayOfWeek,image));
    }
   
    public class MyCustomAdapter extends ArrayAdapter<String>{

        public MyCustomAdapter(Context context, int textViewResourceId,
                String[] objects, Integer[] image) {
            super(context, textViewResourceId, objects);
            // TODO Auto-generated constructor stub
        }

        @Override
        public View getDropDownView(int position, View convertView,
                ViewGroup parent) {
            // TODO Auto-generated method stub
            return getCustomView(position, convertView, parent);
        }

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

        public View getCustomView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            //return super.getView(position, convertView, parent);

            LayoutInflater inflater=getLayoutInflater();
            View row=inflater.inflate(R.layout.test, parent, false);
            TextView label=(TextView)row.findViewById(R.id.weekofday);
            label.setText(DayOfWeek[position]);
           
            ImageView icon=(ImageView)row.findViewById(R.id.icon);
            icon.setImageResource(image[position]);
            return row;
        }   
    }
}