Wednesday, June 29, 2011

Android: DropDown for Images using spinner

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

Usage of spinner tag to create a drop-down list with image?

SpinnerSample.xml :

    <Spinner android:id="@+id/spinner_img"
        android:layout_height="35dip" android:layout_weight="15"
        android:clipToPadding="true" />

spinner_op.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
    android:layout_width="wrap_content" android:layout_height="wrap_content">
    <ImageView android:id="@+id/icon" android:layout_height="wrap_content"
        android:src="@drawable/icon" android:layout_width="fill_parent">

SpinnerImgActivity class:

        Spinner spinner = (Spinner) findViewById(;

        Integer[] image = { R.drawable.img1, R.drawable.img2, R.drawable.img3 };
        spinner.getLayoutParams().width = 3;

        // Customise ArrayAdapter
        spinner.setAdapter(new SpinnerImgAdapter(Success.this, R.layout.spinner_op, image));

SpinnerImgAdapter java class  // Customized

public class SpinnerImgAdapter extends ArrayAdapter<Integer>

    private final Activity context;

    private final Integer[] names;

    public SpinnerImgAdapter(Activity context, int textViewResourceId, Integer[] objects)
        super(context, R.layout.spinner_op, objects);
        this.context = context;
        this.names = objects;

    static class ViewHolder
        public ImageView imageView;

    public View getDropDownView(int position, View convertView, ViewGroup parent)
        return getImageView(position, convertView, parent);

    public View getView(int position, View convertView, ViewGroup parent)

        return getImageView(position, convertView, parent);

    private View getImageView(int position, View convertView, ViewGroup parent)
        ViewHolder holder;

        View rowView = convertView;

        if (rowView == null)
            LayoutInflater inflater = context.getLayoutInflater();
            rowView = inflater.inflate(R.layout.spinner_op, null, true);
            holder = new ViewHolder();
            holder.imageView = (ImageView) rowView.findViewById(;
            holder = (ViewHolder) rowView.getTag();
        Integer integer = names[position];

        return rowView;

run the application :)