Skip to main content

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




Labels:

Comments

  1. pritam5 October 2012 at 04:37

    Hi Risny,
    Thank you for such a nice and easy example.

    ReplyDelete
  2. Anonymous16 October 2012 at 21:53

    Hi .,
    How is change spinner prompt style like textColor,textSize and background color.

    In this example how is change Select your course style,color and fontsize.
    please help me.

    ReplyDelete
  3. Anonymous11 December 2012 at 02:24

    thanks

    ReplyDelete
  4. ansen5 February 2013 at 08:26

    http://picturescrap.com/best-friend/

    Best Friend facebook app
    someone with whom one shares the strongest possible kind of friendship

    ReplyDelete
  5. Prakash's1 April 2013 at 07:51

    Hi..
    Thnx for post help me lot...

    ReplyDelete

Post a Comment

Popular posts from this blog

Capture image without surface view as background service in android

Capture image without user knowledge in android/Capture image as background service in android/Take photo without preview in android/ Camera without preview in android  package com.example.picture; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import android.app.Service; import android.content.Context; import android.content.Intent; import android.hardware.Camera; import android.hardware.Camera.Parameters; import android.media.AudioManager; import android.os.IBinder; import android.util.Log; import android.view.SurfaceHolder; import android.view.SurfaceView; public class CameraService extends Service {       //Camera variables       //a surface holder       private SurfaceHolder sHolder ;        //a variable to control the camera       private Camera mCamera ;   ...
10 comments
Read more

Coroutine- A complete tutorial

 What are coroutines? To know about coroutine, first you need to know about asynchronous programming, thread and multithreading concept. What is a thread? Thread describes in which context the function or sequence of instructions should be executed. So, every block of code or functions runs in a thread, right? Also, you can load multiple threads to perform different block of codes  How to start a thread? Thread thread = new Thread(){     public void run(){       System.out.println("This is a thread");     }   }     thread.start(); So when coming to android, before learning about coroutines we need to discuss some scenarios. Normally how an app works when user launch an application. When user launchers the application, a main thread is created. This thread is intended to do small operations like button clicks, UI interaction , small mathematical operations. We cant perform long running op...
Post a Comment
Read more