CoderzHeaven

July 18, 2011

Customizing a spinner in android.

Hello everyone………

You all knew thata 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

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

packagepack.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};@Overridepublic 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);}@Overridepublic View getDropDownView(int position, View convertView,ViewGroup parent) {return getCustomView(position, convertView, parent);}@Overridepublic 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"><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="@string/hello"/><Spinnerandroid: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"><ImageViewandroid:id="@+id/image"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/icon"/><TextViewandroid: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"/><TextViewandroid: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.

Leave a Reply Cancel reply

');isvalidName=false;}else{isvalidName=true;$n(element).html('');}}else{var element=$n("#yourname").next().next();$n(element).html('
This field is required.
');emailAdd=false;}if(emailAdd!=""){var element=$n("#youremail").next().next();if(emailAdd.toLowerCase()=='Email'.toLowerCase()){$n(element).html('
This field is required.
');isvalidEmail=false;}else{var JsRegExPatern = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/if(JsRegExPatern.test(emailAdd)){isvalidEmail=true;$n(element).html('');}else{var element=$n("#youremail").next().next();$n(element).html('
Please enter valid email address.
');isvalidEmail=false;}}}else{var element=$n("#yourname").next().next();$n(element).html('
This field is required.
');isvalidEmail=false;}if(isvalidName==true && isvalidEmail==true){$n(".AjaxLoader").show();$n('#mysuccess_msg').html('');$n('#mysuccess_msg').hide();$n('#myerror_msg').html('');$n('#myerror_msg').hide();var nonce ='fa8c4567c5';var url = 'http://www.coderzheaven.com/wp-content/plugins/email-subscribe/';var email=$n("#youremail").val();var name =$n("#yourname").val();var str="action=store_email&email="+email+'&name='+name+'&sec_string='+nonce;$n.ajax({type: "POST",url: 'http://www.coderzheaven.com/wp-admin/admin-ajax.php',data:str,async:true,success: function(msg){if(msg!=''){var result=msg.split("|");if(result[0]=='success'){$n(".AjaxLoader").hide();$n('#mysuccess_msg').html(result[1]);$n('#mysuccess_msg').show();setTimeout(function(){$n.fancybox_ns.close();},2000);}else{$n(".AjaxLoader").hide();$n('#myerror_msg').html(result[1]);$n('#myerror_msg').show();}}}});}}