Android Widgets: Custom Spinner in Android

Recommended by 75 users

Jan 28, 2013
Android Widgets: Custom Spinner in Android
Add to Bookmark Email this Post 77.7K    24

Lets Take a spin on Custom Spinner in Android

In this topic of “How to Create Android Widgets” we will learn how to create a custom spinner in android. Spinners is one of the widgets in Android which allows the user to pick one item from a list of items. The items in the Spinner come from the Adapter associated.

If you are not clear with the basic concepts of Android, please attend this Android Course.

Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a drop-down menu with all other available values, from which the user can select a new one.

Example :  Displaying the list of days of the week and  on selecting an item it will display that item in a Toast.

1)      Declare the spinner Globally  i.e  outside the onCreate method

// Declare the variable outside onCreate
Spinner spin;

2)      Within the onCreate method : 

  • Typecasting spinner
  • Creating Data Pump
  • Declaring an ArrayAdapter
// Typecasting the variable here
spin = (Spinner) findViewById(R.id.spn1);

// Array of Months acting as a data pump
String[] objects = { "January", "Feburary", "March", "April", "May",
"June", "July", "August", "September", "October", "November","December" };

// Declaring an Adapter and initializing it to the data pump
ArrayAdapter adapter = new ArrayAdapter(
getApplicationContext(),android.R.layout.simple_list_item_1 ,objects);

// Setting Adapter to the Spinner
spin.setAdapter(adapter);

// Setting OnItemClickListener to the Spinner
spin.setOnItemSelectedListener(this);

3) Outside the onCreate method : The callback methods that are necessary to be implemented with OnItemSelectedListener.

There are two callback methods :

  1. onItemSelected
  2. onNothingSelected
// Defining the Callback methods here
public void onItemSelected(AdapterView parent, View view, int pos,
long id) {
Toast.makeText(getApplicationContext(),
spin.getItemAtPosition(pos).toString(), Toast.LENGTH_LONG)
.show();
}

// Defining the Callback methods here
@Override
public void onNothingSelected(AdapterView arg0) {
// TODO Auto-generated method stub

}

2     3    4

Now you know how to implement Spinner , which is a widget in Android.

Now we will Create a Custom Spinner in Android:

So why wait, Lets see how to Implement a Custom Spinner that will display an image followed by some text as elements of the Spinner.

Take a look on what we are tending to create :

5        6

This is more like a “real and practical” Spinner.

 Steps to Create a Custom Spinner:

1)      Before  onCreate method  :

  • Declare an Array of the items that has to be displayed in the Spinner
  • Declare an Array with the resource id’s of the corresponding images that has to be displayed with the items.
// Declaring the String Array with the Text Data for the Spinners
String[] Languages = { "Select a Language", "C# Language", "HTML Language",
"XML Language", "PHP Language" };
// Declaring the Integer Array with resourse Id's of Images for the Spinners
Integer[] images = { 0, R.drawable.image_1, R.drawable.image_2,
R.drawable.image_3, R.drawable.image_4 };

2)      Inside onCreate method :

  • Typecasting spinner
  • Creating Data Pump
  • Declaring and assigning a Custom Adapter
// Declaring and typecasting a Spinner
Spinner mySpinner = (Spinner) findViewById(R.id.spinner1);

// Setting a Custom Adapter to the Spinner
mySpinner.setAdapter(new MyAdapter(MainActivity.this, R.layout.custom,
Languages));

3)      After onCreate method :

  • Defining Custom Adapter i.e  MyAdapter
// Creating an Adapter Class
public class MyAdapter extends ArrayAdapter {

public MyAdapter(Context context, int textViewResourceId,
String[] objects) {
super(context, textViewResourceId, objects);
}

public View getCustomView(int position, View convertView,
ViewGroup parent) {

// Inflating the layout for the custom Spinner
LayoutInflater inflater = getLayoutInflater();
View layout = inflater.inflate(R.layout.custom, parent, false);

// Declaring and Typecasting the textview in the inflated layout
TextView tvLanguage = (TextView) layout
.findViewById(R.id.tvLanguage);

// Setting the text using the array
tvLanguage.setText(Languages[position]);

// Setting the color of the text
tvLanguage.setTextColor(Color.rgb(75, 180, 225));

// Declaring and Typecasting the imageView in the inflated layout
ImageView img = (ImageView) layout.findViewById(R.id.imgLanguage);

// Setting an image using the id's in the array
img.setImageResource(images[position]);

// Setting Special atrributes for 1st element
if (position == 0) {
// Removing the image view
img.setVisibility(View.GONE);
// Setting the size of the text
tvLanguage.setTextSize(20f);
// Setting the text Color
tvLanguage.setTextColor(Color.BLACK);

}

return layout;
}

// It gets a View that displays in the drop down popup the data at the specified position
@Override
public View getDropDownView(int position, View convertView,
ViewGroup parent) {
return getCustomView(position, convertView, parent);
}

// It gets a View that displays the data at the specified position
@Override
public View getView(int position, View convertView, ViewGroup parent) {
return getCustomView(position, convertView, parent);
}
}

4)      Create a XML file named as activity_mail.xml

  • It includes a Spinner
<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>

7

5)  Create a XML file named as custom.xml :

It includes

  • One Image View
  • One Text View
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="3dip" >

    <ImageView
        android:id="@+id/imgLanguage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" >
    </ImageView>

    <TextView
        android:id="@+id/tvLanguage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="8dp"
 android:text="Text Here" >
    </TextView>

</LinearLayout>

8

Have a doubt in the discussed concepts? Ask our experts!

Stay tuned for more tutorials to learn how to create Android widgets!

Got a question for us? Please mention it in the comments section and we will get back to you.

Related Posts:

How to create Android Widgets:Custom Toast

How to create Android Widgets: RatingBar in Android

Top 5 Android Interview Questions for freshers

Share on
Comments
24 Comments
  • Danniel Prado

    I want to implement this within a fragment, how can this be possible?
    Thanks!

    • EdurekaSupport

      Hey Danniel, thanks for checking out our blog. You can implement spinner using fragment in such a way that there will be two fragments running on an activity. The alignment of the fragments will be vertical which means one side list (spinner) fragment and on the other side empty fragment with just layout(no widgets). Now, on selecting any available color from the spinner, the color of the other fragment will be changed. Hope this helps. Cheers!

      • Danniel Prado

        Hey thanks so much for your answer. Now my spinner is working. Have a nice day!

        • EdurekaSupport

          We’re glad we could help. :) Cheers!

  • Sankalp Upadhyay

    Thnaks for this blog………….

  • Gopesh kumar

    concrete description..

    • EdurekaSupport

      Thanks for all the wonderful feedback, Gopesh! We’re glad you found the blog useful. Do check out this blog too: https://goo.gl/BlD80e. You can also subscribe to our blog to stay posted on upcoming Android blogs. Cheers!

  • Gopesh kumar

    nice content

  • Gopesh kumar

    nice blog

24 X 7 Customer Support X

  • us flag 1-800-275-9730 (Toll Free)
  • india flag +91 88808 62004