Custom Spinner in Android

Custom Spinner in Android/Spinner using custom adapter/spinner with icon and text

 In this tutorial, i'll show you to customizing spinner in different methods. 

To change the normal display of spinner view, add background image using the code " android:background="@drawable/myspinner_background" in the xml. You can also make it customizable by setting up an xml file in drawable folder

Custom display with icon in the spinner

 main.xml

<?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"     >     <Spinner     android:drawSelectorOnTop="true"     android:id="@+id/spinner1"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:prompt="@string/select">     </Spinner> </LinearLayout>

spinner.xml

<?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">         <ImageView         android:src="@drawable/icon"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:id="@+id/imageView1"         android:layout_alignParentLeft="true">         </ImageView>         <TextView         android:text="TextView"         android:layout_marginTop="10dip"         android:layout_width="wrap_content"         android:id="@+id/textView1"         android:layout_height="wrap_content"         android:layout_below="@+id/imageView1"         android:layout_toRightOf="@+id/imageView1">         </TextView>            </RelativeLayout>

 CustomSpinnerActivity.java

package com.example.customspinner; import android.app.Activity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.widget.Spinner; public class CustomSpinnerActivity extends Activity {     String []data1={"Java","Android","Embedded Systems","PHP"};        /** Called when the activity is first created. */     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);         Spinner mySpinner = (Spinner)findViewById(R.id.spinner1);         mySpinner.setAdapter(new ArrayAdapter<String>(this, R.layout.spinner,R.id.textView2, data1));     }                     }

OUTPUT

Custom Spinner with imageview and textview

main.xml

<?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"     >     <Spinner     android:drawSelectorOnTop="true"     android:id="@+id/spinner1"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:prompt="@string/select">     </Spinner> </LinearLayout>

spinner.xml

<?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">         <ImageView         android:src="@drawable/icon"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:id="@+id/imageView1"         android:layout_alignParentLeft="true">         </ImageView>         <TextView         android:text="TextView"         android:layout_marginTop="10dip"         android:layout_width="wrap_content"         android:id="@+id/textView1"         android:layout_height="wrap_content"         android:layout_below="@+id/imageView1"         android:layout_toRightOf="@+id/imageView1">         </TextView>         <TextView         android:text="TextView"         android:layout_width="wrap_content"         android:id="@+id/textView2"         android:layout_height="wrap_content"         android:layout_toRightOf="@+id/imageView1"         android:layout_alignTop="@+id/imageView1"         android:layout_alignBottom="@+id/imageView1">         </TextView>     </RelativeLayout>

CustomSpinnerActivity.java

package com.example.customspinner; 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 CustomSpinnerActivity extends Activity {       String []data1={"Brainbitz:java","Brainbitz:Android","Brainbitz:Embedded Systems","Brainbitz:PHP"};       String []data2={"6month Course","3month Course","3month Course","3month Course"};       Integer[] images={R.drawable.java,R.drawable.android,R.drawable.emb,R.drawable.php};     /** Called when the activity is first created. */     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);         Spinner mySpinner = (Spinner)findViewById(R.id.spinner1);         mySpinner.setAdapter(new MyAdapter(this, R.layout.spinner, 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();             View row=inflater.inflate(R.layout.spinner, 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;             }            }                       }

OUTPUT


See More
Custom Radiobutton
Custom Checkbox
Custom Listview
Custom Gridview with icon
Custom Gridview with icon and text
Tab layout