Android Widgets: Custom Spinner in Android

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, you can pursue this Android online training to understand each & every nuance of the technology.

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

}

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 :

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">
</LinearLayout>

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>

[buttonleads form_title=”Download Code” redirect_url=https://edureka.wistia.com/medias/sl63rjlcfc/download?media_file_id=64011904 course_id=318 button_text=”Download Code”]

Have a doubt in the discussed concepts? Please mention it in the comments section and we will get back to you.

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

How to create Android Widgets:Custom Toast

How to create Android Widgets: RatingBar in Android

Top 5 Android Interview Questions for freshers