Customizing a spinner in android.

Hello everyone………

You all knew that a spinner or combobox is an inbuilt widget in android. And Like any other widgets spinners are also customizable.
Here is a simple example to customize a spinner. First we will look at the java code.
The getView method is called for each row in the spinner. So with the help of an Layout Inflater you can inflate any layout for each row.
At extreme you can have each layout for each row.

Check these older posts about spinner.

1. How to get a selected Item from a spinner in ANDROID?

2. How to set an item selected in Spinner in ANDROID?

3. How to create a custom ListView in android?

Check out these of ListViews

1. Simplest Lazy Loading ListView Example in Android with data populated from a MySQL database using php.

2. How to add checkboxes and radio buttons to ListView in android? OR How to set single choice items in a ListView in android?

Now we will look at the source code

Resources needed.
These are images I am using in this example. Put these images inside the res/drawable folder.

apple.png
bkg.png
coderzheaven.png
google.png
icon.png
microsoft.png
samsung.png
yahoo.png

package         pack.coderzheaven;

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 CustomSpinnerDemo extends Activity {
	String[] strings = {"CoderzHeaven","Google",
			"Microsoft", "Apple", "Yahoo","Samsung"};

	String[] subs = {"Heaven of all working codes ","Google sub",
			"Microsoft sub", "Apple sub", "Yahoo sub","Samsung sub"};


	int arr_images[] = { R.drawable.coderzheaven,
						 R.drawable.google, R.drawable.microsoft,
						 R.drawable.apple, R.drawable.yahoo, R.drawable.samsung};
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Spinner mySpinner = (Spinner)findViewById(R.id.spinner);
        mySpinner.setAdapter(new MyAdapter(CustomSpinnerDemo.this, R.layout.row, strings));
    }

    public class MyAdapter extends ArrayAdapter<String>{

    	public MyAdapter(Context context, int textViewResourceId,	String[] objects) {
    		super(context, textViewResourceId, objects);
    	}

    	@Override
    	public View getDropDownView(int position, View convertView,ViewGroup parent) {
    		return getCustomView(position, convertView, parent);
    	}

    	@Override
    	public View getView(int position, View convertView, ViewGroup parent) {
    		return getCustomView(position, convertView, parent);
    	}

    	public View getCustomView(int position, View convertView, ViewGroup parent) {

	    	LayoutInflater inflater=getLayoutInflater();
	    	View row=inflater.inflate(R.layout.row, parent, false);
	    	TextView label=(TextView)row.findViewById(R.id.company);
	    	label.setText(strings[position]);

	    	TextView sub=(TextView)row.findViewById(R.id.sub);
	    	sub.setText(subs[position]);

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

	    	return row;
    		}
    	}
   }

Now the main.xml which defines the main layout.

<?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"
      android:background="@drawable/bkg"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
<Spinner
    android:id="@+id/spinner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:drawSelectorOnTop="true"
    android:prompt="@string/prompt"
    />
</LinearLayout>

Now the layout for each row in the spinner.
row.xml

<?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="wrap_content"
 android:orientation="vertical"
 android:padding="3dip"
>
	<ImageView
		 android:id="@+id/image"
		 android:layout_width="wrap_content"
		 android:layout_height="wrap_content"
		 android:src="@drawable/icon"/>
	<TextView
		 android:layout_toRightOf="@+id/image"
		 android:padding="3dip"
		 android:layout_marginTop="2dip"
		 android:textColor="@drawable/red"
		 android:textStyle="bold"
		 android:id="@+id/company"
		 android:text="CoderzHeaven"
		 android:layout_marginLeft="5dip"
		 android:layout_width="wrap_content"
		 android:layout_height="wrap_content"/>
	 <TextView
		 android:layout_toRightOf="@+id/image"
		 android:padding="2dip"
		 android:textColor="@drawable/darkgrey"
		 android:layout_marginLeft="5dip"
		 android:id="@+id/sub"
		 android:layout_below="@+id/company"
		 android:text="Heaven of all working codes"
		 android:layout_width="wrap_content"
		 android:layout_height="wrap_content"/>
</RelativeLayout>

Now the strings.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">CustomSpinner Demo from CoderzHeaven!</string>
    <string name="prompt">  Select your Favourite  </string>
    <string name="app_name">CustomSpinner Demo</string>
    <drawable name="white">#ffffff</drawable>
	<drawable name="black">#000000</drawable>
	<drawable name="green">#347C2C</drawable>
	<drawable name="pink">#FF00FF</drawable>
	<drawable name="violet">#a020f0</drawable>
	<drawable name="grey">#778899</drawable>
	<drawable name="red">#C11B17</drawable>
	<drawable name="yellow">#FFFF8C</drawable>
	<drawable name="PowderBlue">#b0e0e6</drawable>
	<drawable name="brown">#2F1700</drawable>
	<drawable name="Hotpink">#7D2252</drawable>
	<string name="select_Category">Select Category</string>
	<drawable name="darkgrey">#606060</drawable>
</resources>

Please click the +1 button on top to share it with your friends and leave your valuable comments also.