Customized Spinner

In this tutorial I will show you how to customized a spinner as what you see below.
See sample output below:

Now put this code under the onCreate Method in your Activity.java under setContentView.

final ArrayList<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
       HashMap<String, Object> map = new HashMap<String, Object>();
       map.put("Name", "Marjune Ibañez Sniper");
       map.put("Address", "Dauis, Bohol, Philippines");
       map.put("Relation", "Friends");
       map.put("Icon", R.drawable.profile);
       list.add(map);

       map = new HashMap<String, Object>();
       map.put("Name", "Jmarv Parba");
       map.put("Address", "Cebu City, Cebu, Philippines");
       map.put("Relation", "Friends");
       map.put("Icon", R.drawable.stalon);
       list.add(map);
       
       map = new HashMap<String, Object>();
       map.put("Name", "Alberto Gaudicos Jr.");
       map.put("Address", "Tubigon, Bohol, Philippines");
       map.put("Relation", "Mine");
       map.put("Icon", R.drawable.bradpit);
       list.add(map);
       

       final Spinner spin = (Spinner) findViewById(R.id.receiver);
       myAdapter adapter = new myAdapter(getApplicationContext(), list,
               R.layout.send_money_spinner_layout, new String[] { "Name", "Address", "Relation", "Icon" },
               new int[] { R.id.name, R.id.kyc, R.id.relation, R.id.image });

       spin.setAdapter(adapter);
       
       spin.setOnItemSelectedListener(new OnItemSelectedListener(){

        @Override
        public void onItemSelected(AdapterView<?> arg0,View v, int arg2,long arg3) {
           // TODO Auto-generated method stub
        String selected = (String) list.get(spin.getSelectedItemPosition()).get("Name");
        SavePreferences("name", selected );
        }

@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub

}
        }); 

and add this class that extends SimpleAdapter below your main class.

class myAdapter extends SimpleAdapter {

private Context mcontext;
    public myAdapter(Context context, List<? extends Map<String, ?>> data,
            int resource, String[] from, int[] to) {
        super(context, data, resource, from, to);
        
        mcontext = context;

    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater object = (LayoutInflater)mcontext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      if (convertView == null) {
               convertView = object.inflate(R.layout.send_money_spinner_layout,
                       null);
           }

           HashMap<String, Object> data = (HashMap<String, Object>) getItem(position);

           ((TextView) convertView.findViewById(R.id.name))
                   .setText((String) data.get("Name"));
           ((TextView) convertView.findViewById(R.id.kyc))
           .setText((String) data.get("Address"));
           ((TextView) convertView.findViewById(R.id.relation))
           .setText((String) data.get("Relation"));
           ((ImageView) convertView.findViewById(R.id.image))
                   .setImageResource((Integer) data.get("Icon"));

           return convertView;
    }

}

Here's the code for layout.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:paddingTop="3dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingBottom="5dp"
    android:background="@drawable/spinner_background">


<ImageView
   android:id="@+id/image"
   android:layout_width="80dp"
   android:layout_height="70dp"
   android:src="@drawable/profile" />
 
<LinearLayout
   android:id="@+id/scrolls"
       android:orientation="horizontal"
       android:layout_height="wrap_content"
       android:weightSum="100"
       android:layout_width="fill_parent">

<LinearLayout
   android:id="@+id/scroll"
    android:layout_weight="10"
       android:orientation="vertical"
       android:layout_height="wrap_content"
       android:paddingLeft="5dp"
       android:paddingTop="1dp"
    android:layout_width="fill_parent">
   
<TextView  
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content" 
   android:textColor="#4C4C4C"
   android:textSize="13dp"
   android:textStyle="bold"
   android:text="Name"
   android:id="@+id/name"
   />

<TextView
   android:id="@+id/kyc"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Address"
   android:textSize="13dp"
   android:textColor="#4C4C4C" />

<TextView  
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content" 
   android:text="Relation"
   android:textSize="13dp"
   android:textColor="#4C4C4C"
   android:id="@+id/relation"
   />

</LinearLayout>

<LinearLayout
   android:layout_weight="90"
   android:layout_below="@+id/scrolls"
       android:orientation="vertical"
       android:layout_height="wrap_content"
       android:layout_gravity="right|bottom"
       android:paddingLeft="10dp"
    android:layout_width="fill_parent">

<ImageView
   android:id="@+id/imageView1"
   android:gravity="right|bottom"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:src="@drawable/icon_dropdown" />

   </LinearLayout>
</LinearLayout>

</LinearLayout>

Here's the code for spinner_background.xml:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item

     android:state_selected="false"

        android:state_pressed="false"

        android:drawable="@drawable/gradient_bg" />

 

    <item android:state_pressed="true"

        android:drawable="@drawable/gradient_bg" />

 

    <item android:state_selected="true"

     android:state_pressed="false"

        android:drawable="@drawable/gradient_bg" />

</selector>

Here's the code for icon_dropdown.xml:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item

     android:state_selected="false"

        android:state_pressed="false"

        android:drawable="@drawable/ic_find_next_holo_dark" />

 

    <item android:state_pressed="true"

        android:drawable="@drawable/ic_find_next_holo_light" />

 

    <item android:state_selected="true"

     android:state_pressed="false"

        android:drawable="@drawable/ic_find_next_holo_light" />

</selector>

For the images, you may refer on your sdk folder, sdk\platforms\android_version\data\res. That's all enjoy coding.