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?

Custom Spinner Demo

Custom Spinner Demo

Custom Spinner Demo

Custom Spinner Demo

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.

21 thoughts on “Customizing a spinner in android.

  1. kamal

    good tutorial, I would like to ask one question that, how to display the spinner list View just below the spinner and making it’s width smaller. thank you.

    Reply
  2. David

    Hello, I have been trying to do something like this for some time now. All teh samples I look at seem to be missing something (or don’t explain it well). Your example has been the most complete, but I am still having problems.

    lines 30 and 52 have .row highlighted.
    my suggested corrections are to create field row in type layout, or create constant row in type layout.

    Any ideas? No other errors listed elsewhere.

    I tried renaming spinner.row.xml to spinnerrow.xml and changing .row to spinnerrow on lines 30 and 52, but that didnt work.

    I tried

    Reply
    1. James Post author

      Hey mart :- If you dont want to show the first option when the spinner is not expanded then make your array of strings with a blank field in the first index. Is that you want or anything else. please explain.
      Or call this
      mySpinner.setAdapter(new MyAdapter(CustomSpinnerDemo.this, R.layout.row, strings));
      when your spinner expands to reset it’s data with your choice in the first index of the string array when it expands.

      Reply
  3. Arefin

    Hi, I was wondering if you could explain this span thing.
    package pack.coderzheaven;

    I am new to this kind of thing. Since I am not aware of span, I also could not complete the tutorial because of errors. Please do mention what alternatives can be used instead.
    Thanks

    Reply
    1. James Post author

      Sorry, that’s the problem with my syntax highlighter. please remove those HTML span tags and proceed.

      Reply
  4. vaishali

    how to do the same thing using sqlite. i mean if i have to fetch these values from database, in that case how it will be done?

    Reply
  5. Pingback: Only images in a spinner : Android Community - For Application Development

  6. Pingback: ImageView in Spinner items : Android Community - For Application Development

  7. ali

    hello,
    great job
    its woriking perfectly. but how can i get the String[] strings from the string,.xml in value folder for translation?
    i tried to do it with getResource.getString(R.array.something)
    but the app is crashing.
    what to do please help.
    thanks in advance

    Reply
  8. bedirhan

    hey thats a very good tutorial.ı am new on android and ı need the add image to spinner but ı cant do this.ı already have spinner and add some items in it.would you make a tutorial video about that cause ı barely understand.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>