Programming and Personal Development

Android Spinner

Spinners are the Dropdown widget equivalent in android.  They are useful for displaying the list of items especially when the available screen real estate is less. Only the selected item is shown while the rest are hidden. Clicking on the spinner results in a drop down list showing the list contents. Just as with ListViews you have to feed the input items using an  Adapter and attach the adapter to the spinner.  In addition you can register a callback object for tracking the selection changes via the setOnItemSelectedListener () interface.

Android spinner demo example output

Android Spinner Demo

Example

Lets see the use of spinner with a example. In this example, we have a TextView and a Spinner element wrapped in a LinearLayout. When the user clicks on the spinner a drop down list with the names of the mobile development platforms is displayed. Every time the user makes a selection, we display the selection in the TextView element. Its the same ClickTracker example we saw in the ListView demo but adapted to use the spinner element instead.
Lets now see the xml layout and Java code associated with this example.
<?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">
 
    <TextView android:id="@+id/spin_tv1"
              android:layout_height="wrap_content"
              android:layout_width="match_parent"/>
 
    <Spinner android:id="@+id/spin1"             android:layout_height="wrap_content"
             android:layout_width="match_parent"/>
 
</LinearLayout>
Next we define a String array element that will serve as the input list of Strings for the ArrayAdapter class.
<string-array name="dev_platforms">
    <item>Android</item>
    <item>Iphone</item>
    <item>Windows</item>
    <item>Bada</item>
    <item>WebOS</item>
</string-array>
Once we define the layout and the input array, we do the following in the Java code.
  • Register the XML layout with the Activity using the setContentView() method
  • Fetch the array string of mobile platforms using the getResources().getStringArray() method by supplying the resource id as argument.
  • Pass in the string array as input and android.R.layout.simple_spinner_dropdown_item as layout to the constructor of the ArrayAdapter class
  • Hook the adapter with the spinner element using the setAdapter () method
  • Define a AdapterView.OnItemSelectedListener () to track the user selections and register it with the spinner using the setOnItemSelectedListener () method.
public class SpinnerDemo extends Activity {
   private TextView m_tv;
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.spinnerdemo);
      m_tv = (TextView) findViewById(R.id.spin_tv1);
      Spinner spinner = (Spinner) findViewById(R.id.spin1);
      String[] platforms = getResources().              getStringArray(R.array.dev_platforms);
      ArrayAdapter<String> adapter =
              new ArrayAdapter<String>(this,
                      android.R.layout.simple_spinner_dropdown_item,                      platforms);
      spinner.setAdapter(adapter); 
      spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {         @Override
         public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
            TextView tv = (TextView) view;
            m_tv.setText(tv.getText());
         }
 
         @Override
         public void onNothingSelected(AdapterView<?> parent) {
            m_tv.setText("");
         }
      });
   }
}

Setting DropDown Views 

Android spinner DropDownView layout

Checked DropDown View


You can also display a different drop down view by using the setDropDownViewResource () method on the ArrayAdapter class . In our example, we can display a checked item view using the  android.R.layout.simple_list_item_checked  for the dropdown view in addition to the default view passed in the constructor. Adding this line of code before registering the adapter with the spinner results in the output as shown.
adapter.setDropDownViewResource(android.R.layout.simple_list_item_checked);

 

Web Analytics