Custom Spinner with icon and text

Spinner is a widget similar to a drop-down list for selecting items.

In this tutorial, we'll create a custom spinner widget that displays a list of countries with their flags. When one is selected, a toast message will display the selected item.

The appliction should look like this:


1. Start a new project named CustomSpinnerActivity.



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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dip" >


    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:text="Custom Spinner with text and icon" />


    <Spinner
        android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:drawSelectorOnTop="true"
        android:prompt="@string/ru_prompt" />


</LinearLayout>




3. Create a row.xml file in res/layout/ and insert the following to setup the layout on each row:



<?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:layout_marginTop="10dip"
        android:layout_marginBottom="10dip"
        android:layout_marginLeft="15dip"/>


    <TextView
        android:id="@+id/country"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:layout_marginBottom="10dip"
        android:layout_marginTop="10dip"
        android:textColor="#000000" />


</LinearLayout>



4. Now open the CustomSpinnerActivity.java file and insert the following code:

package sn.fbintou.CustomSpinnerActivity;

package sn.fbintou.customspinner;


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.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;


public class CustomSpinnerActivity extends Activity {


String[] Country_list = { "Senegal", "Afrique du Sud", "Kenya", "Ghana",
"Liberia", "Burkina Fasso", "Nigeria", "Cameroon", "Uganda",
"Tanzania", "Congo", "Malawi", "Zambia" };


Integer[] image = { R.drawable.sn, R.drawable.sa, R.drawable.ky,
R.drawable.gh, R.drawable.lb, R.drawable.bf, R.drawable.ng,
R.drawable.cm, R.drawable.ug, R.drawable.tz, R.drawable.cg,
R.drawable.mw, R.drawable.zb };


@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Spinner mySpinner = (Spinner) findViewById(R.id.spinner);
mySpinner.setAdapter(new MyCustomAdapter(CustomSpinnerActivity.this,
R.layout.row, Country_list, image));
mySpinner.setOnItemSelectedListener(new MyOnItemSelectedListener());
}


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.row, parent, false);
TextView label = (TextView) row.findViewById(R.id.country);
label.setText(Country_list[position]);


ImageView icon = (ImageView) row.findViewById(R.id.icon);
icon.setImageResource(image[position]);
return row;
}
}


public class MyOnItemSelectedListener implements OnItemSelectedListener {


public void onItemSelected(AdapterView<?> parent, View view, int pos,
long id) {
Toast.makeText(
parent.getContext(),
"The country is "
+ parent.getItemAtPosition(pos).toString(),
Toast.LENGTH_LONG).show();
}


public void onNothingSelected(AdapterView parent) {
// Do nothing.
}
}
}


7. Run the application.  
You can download the code source here.

Original article  here