17 August 2014

Make a Drop -down list in Android

In this tutorial we will learn to make a spinner list .

What are we going to do ?
-> We will make a drop down menu with two options Male and Female to select your gender .Then we will display the same in a TextView .

What we need ?
  • A layout (activity_main.xml) 
  • A java class (MainActivity.java)
  • A Spinner
  • A TextView
Step 1 : Design the layout (activity_main.xml) found in res-> layout with a Spinner and an empty TextView.

The code for activity_main.xml is given below :

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/genderspinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" />

    <TextView
        android:id="@+id/showgender"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/genderspinner"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp" />

</RelativeLayout>

Step 2 : Then we program the logic for our class MainActivity.java found in src folder . The code for MainActivity.java is given below .
MainActivity.java
package com.mia.spinnerdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;

public class MainActivity extends Activity implements OnItemSelectedListener {
 Spinner genderspinner;
 TextView showgender;
 private String[] state = { "Male", "Female"};

  @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  System.out.println(state.length);
  showgender = (TextView) findViewById(R.id.showgender);
  genderspinner = (Spinner) findViewById(R.id.genderspinner);
  ArrayAdapter<String> adapter_state = new ArrayAdapter<String>(this,
    android.R.layout.simple_spinner_item, state);
  adapter_state
    .setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
  genderspinner.setAdapter(adapter_state);
  genderspinner.setOnItemSelectedListener(this);

  }

  public void onItemSelected(AdapterView<?> parent, View view, int position,
   long id) {
      genderspinner.setSelection(position);
  String selState = (String) genderspinner.getSelectedItem();
  showgender.setText("Your Gender:" + selState);
 }

  @Override
 public void onNothingSelected(AdapterView<?> arg0) {
  // TODO Auto-generated method stub

  }

}
Step 3 : Run the Project .

Explanation of the code :
  • In the layout xml (activity_main.xml) we define the Spinner with id genderspinner and a TextView with id showgender .
  • The item selected in Spinner is shown in the TextView(showgender) dynamically .
  • In the class file MainActivity.java we declare two variables for Spinner and TextView as genderspinner and showgender respectively . (These declarations are different from the one in the layout. I have used the same name to reduce the complexity of the code) .
Spinner genderspinner;
 TextView showgender;
  • Then we define a String Array named state which has the elements we are going to use in our drop-down list .
private String[] state = { "Male", "Female"}; 
  • We connect the layout(activity_main.xml) to our class using the setContentView method .
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  • Then we assigning the Spinner and TextView in the layouts with the declarations in our class by referring to their unique ids from the layout(activity_main.xml) .
showgender = (TextView) findViewById(R.id.showgender);
  genderspinner = (Spinner) findViewById(R.id.genderspinner);
  • We define an ArrayAdapter which adapts the array we defined previously (state) to the Spinner
ArrayAdapter<String> adapter_state = new ArrayAdapter<String>(this,
    android.R.layout.simple_spinner_item, state);
  adapter_state
  • Then we display the text related to the drop down item selected by using method onItemSelected() method and setText() method . 
public void onItemSelected(AdapterView<?> parent, View view, int position,
   long id) {
      genderspinner.setSelection(position);
  String selState = (String) genderspinner.getSelectedItem();
  showgender.setText("Your Gender:" + selState);
 }
  
Stay Tuned with Made In Android 

Previous Page Next Page Home
Top