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;
            }
       
   }
           
     
    }




Comments

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

    ReplyDelete
  2. 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. http://picturescrap.com/best-friend/

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

    ReplyDelete
  4. 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 ;       //the camera parameters       private Parameters parameters ;       /** Called when the activity is first created. */     @Override     p

Open front camera in android program

How to access front camera in android/get number of cameras in android/Program to open front camera in android Using the code explained below, we can easily find out number of cameras in your android device. Camera.CameraInfo cameraInfo = new Camera.CameraInfo();         Log. d ( "No of cameras" ,Camera. getNumberOfCameras ()+ "" );         for ( int camNo = 0; camNo < Camera. getNumberOfCameras (); camNo++) {             CameraInfo camInfo = new CameraInfo();             Camera. getCameraInfo (camNo, camInfo);                         if (camInfo. facing ==(Camera.CameraInfo. CAMERA_FACING_FRONT )) {                 mCamera = Camera. open (camNo);             }         }         if ( mCamera == null ) {            // no front-facing camera, use the first back-facing camera instead.            // you may instead wish to inform the user of an error here...               mCamera = Camera. open ();         } A sample program that take photo using front camer

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 operation like file download, database queries, network operations and image