Saturday, August 2, 2014

Use Spinner (Dropdown list) in Android

A dropdown list allows you to choose a single option from amongst various predefined options. In Android, we can use “android.widget.Spinner” class to render a dropdown selection list.
In this tutorial, we shall learn the following things:
1. Render a Spinner and load the selection items using XML.
2. Render another Spinner in XML, and load the selection items dynamically via java code.
3. Attach a listener on Spinner to respond when a user selects a value in Spinner.
4. Render and attach a listener on a normal button, to display the selected value of Spinner.

1. Strings.xml

Open the strings.xml file and define a list of options that would be displayed in the predefined Spinner (Dropdown list).
File : res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Tutorial</string>
<string name="country_prompt">Choose your country</string>
<string-array name="country_arrays">
<item>India</item>
<item>Brazil</item>
<item>Russia</item>
<item>China</item>
<item>Malaysia</item>
<item>Indonesia</item>
</string-array>
</resources>

2. Add Spinner (Dropdown list)

Open the main.xml file and add two spinner components and a button.

In “spinner1″, the dropdown list would be pre-specified. The “android:entries” attribute represents the selection items in spinner1.
In “spinner2″, the selection items shall be defined later in the Java code.
File : res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<Spinner android:id="@+id/spinner1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:entries="@array/country_arrays"
        android:prompt="@string/country_prompt" />
<Spinner android:id="@+id/spinner2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
<Button android:id="@+id/btnSubmit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />
</LinearLayout>

3. Java Code

We shall be implementing two Java classes. One for initializing the dynamic dropdown list, and displaying the selected choices on pressing the "Submit" button and another for displaying the selected choice from the predefined list when the choice is made.

File : Main.java

package com.endeavour.tutorial;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.Toast;
import com.endeavour.tutorial.R;
public class Main extends Activity {
private Spinner spinner1, spinner2;
private Button btnSubmit;
@Override
public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
       addItemsOnSpinner2();
       addListenerOnButton();
       addListenerOnSpinnerItemSelection();
}
//add items into spinner dynamically
public void addItemsOnSpinner2() {
       spinner2 = (Spinner) findViewById(R.id.spinner2);
       List<String> list = new ArrayList<String>();
       list.add("Marathi");
       list.add("Hindi");
       list.add("Punjabi");
       ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, list);
       dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
       spinner2.setAdapter(dataAdapter);
}
public void addListenerOnSpinnerItemSelection() {
       spinner1 = (Spinner) findViewById(R.id.spinner1);
       spinner1.setOnItemSelectedListener(new CustomOnItemSelectedListener());
}
//get the selected dropdown list value
public void addListenerOnButton() {
       spinner1 = (Spinner) findViewById(R.id.spinner1);
       spinner2 = (Spinner) findViewById(R.id.spinner2);
       btnSubmit = (Button) findViewById(R.id.btnSubmit);
       btnSubmit.setOnClickListener(new OnClickListener() {
         @Override
         public void onClick(View v) {
           Toast.makeText(Main.this,"OnClickListener: " + "\nSpinner 1 : "+ String.valueOf(spinner1.getSelectedItem()) + "\nSpinner 2 : " + String.valueOf(spinner2.getSelectedItem()), Toast.LENGTH_SHORT).show();
}
});
}
}

File : CustomOnItemSelectedListener.java


package com.endeavour.tutorial;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.Toast;
public class CustomOnItemSelectedListener implements OnItemSelectedListener {
public void onItemSelected(AdapterView<?> parent, View view, int pos,long id) {
       Toast.makeText(parent.getContext(), "OnItemSelectedListener: " + parent.getItemAtPosition(pos).toString(), Toast.LENGTH_SHORT).show();
}
@Override
public void onNothingSelected(AdapterView<?> arg0) {
       // TODO Auto-generated method stub
}
}

4. Output

When the application is run, the following results shall be displayed:
i. The 2 spinners being displayed


ii. When a country is selected from Spinner1.


iii. When the "Submit" button is pressed.


No comments:

Post a Comment