Customized Spinners in Android

See more basics on Android along with interview questions

The Android Spinner Control is definitely the equivalent of the drop-down selector . By making use of spinner control you basically obtain the capability to choose from a list without taking up all of the display screen space of a ListView.

Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one.

You can add a spinner to your layout with the Spinner object. You should usually do so in your xml layout with a  <spinner>  element. For example:

 <Spinner
    android:id="@+id/myspinner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" /> 

Also See....Simple Spinners In Android

Here we are going to deal with Customized Spinners.Here we go with java code samples.

in java file:

public class Custom_spinner extends Activity {
	String[] data1 = { "Java", "Android","Blackberry", "Apple", "Windows" };
	
	String[] data2 = { "Developed by Sun Microsystems", "Android is a Linux-based operating system",
			"Designed and marketed by Research In Motion Limited ","Designed and marketed by Apple Inc" 
	        ,"developed, marketed, and sold by Microsoft."};
	
	Integer[] images = { R.drawable.java, R.drawable.android,
			R.drawable.blackberry, R.drawable.apple, R.drawable.windows };

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.custom_spinner);
		Spinner mySpinner = (Spinner) findViewById(R.id.spinner1);
		mySpinner.setAdapter(new MyAdapter(this, R.layout.cus_row, data1));
	}

	public class MyAdapter extends ArrayAdapter<String> {

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

		@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();//inflate xml for each row
			View row = inflater.inflate(R.layout.cus_row, parent, false);
			TextView label = (TextView) row.findViewById(R.id.textView1);
			label.setText(data1[position]);

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

			ImageView icon = (ImageView) row.findViewById(R.id.imageView1);
			icon.setImageResource(images[position]);

			return row;
		} }}

in custom_spinner.xml (main xml file) :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp" >
    <Spinner
        
        android:id="@+id/spinner1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawSelectorOnTop="true"
        android:background="@drawable/purple"
        >
    </Spinner>
</RelativeLayout>

in cus_row.xml (inflated xml file) :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="3dip" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" >
        </ImageView>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="70dp" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold" >
        </TextView>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </TextView>
    </LinearLayout>

</RelativeLayout>

@drawable/purple.xml :