Post
Ask Question

Show ListView as Dropdown in Android

MainActivity.java

Shows the button, set the items for the drop down list, creates the pop up window and then show it as drop down when the button was touched
  1. package com.example.showasdropdownexample;  
  2.    
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.    
  6. import android.os.Bundle;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9. import android.view.WindowManager;  
  10. import android.widget.ArrayAdapter;  
  11. import android.widget.Button;  
  12. import android.widget.ListView;  
  13. import android.widget.PopupWindow;  
  14. import android.widget.TextView;  
  15. import android.app.Activity;  
  16. import android.graphics.Color;  
  17.    
  18. public class MainActivity extends Activity {  
  19.    
  20.     String TAG = "MainActivity.java";  
  21.    
  22.     String popUpContents[];  
  23.     PopupWindow popupWindowDogs;  
  24.     Button buttonShowDropDown;  
  25.    
  26.     @Override  
  27.     protected void onCreate(Bundle savedInstanceState) {  
  28.            
  29.         super.onCreate(savedInstanceState);  
  30.         setContentView(R.layout.activity_main);  
  31.    
  32.         // initialize pop up window items list  
  33.            
  34.         // add items on the array dynamically  
  35.         // format is DogName::DogID  
  36.         List<String> dogsList = new ArrayList<String>();  
  37.         dogsList.add("Akita Inu::1");  
  38.         dogsList.add("Alaskan Klee Kai::2");  
  39.         dogsList.add("Papillon::3");  
  40.         dogsList.add("Tibetan Spaniel::4");  
  41.    
  42.         // convert to simple array  
  43.         popUpContents = new String[dogsList.size()];  
  44.         dogsList.toArray(popUpContents);  
  45.    
  46.            
  47.         // initialize pop up window  
  48.         popupWindowDogs = popupWindowDogs();  
  49.    
  50.            
  51.         // button on click listener  
  52.            
  53.         View.OnClickListener handler = new View.OnClickListener() {  
  54.             public void onClick(View v) {                                                                                                                                                                                                                                                                                                   
  55.    
  56.                 switch (v.getId()) {  
  57.    
  58.                 case R.id.buttonShowDropDown:  
  59.                     // show the list view as dropdown  
  60.                     popupWindowDogs.showAsDropDown(v, -5, 0);  
  61.                     break;  
  62.                 }  
  63.             }  
  64.         };  
  65.    
  66.         // our button  
  67.         buttonShowDropDown = (Button) findViewById(R.id.buttonShowDropDown);  
  68.         buttonShowDropDown.setOnClickListener(handler);  
  69.     }  
  70.    
  71.     public PopupWindow popupWindowDogs() {  
  72.    
  73.         // initialize a pop up window type  
  74.         PopupWindow popupWindow = new PopupWindow(this);  
  75.    
  76.         // the drop down list is a list view  
  77.         ListView listViewDogs = new ListView(this);  
  78.            
  79.         // set our adapter and pass our pop up window contents  
  80.         listViewDogs.setAdapter(dogsAdapter(popUpContents));  
  81.            
  82.         // set the item click listener  
  83.         listViewDogs.setOnItemClickListener(new DogsDropdownOnItemClickListener());  
  84.    
  85.         // some other visual settings  
  86.         popupWindow.setFocusable(true);  
  87.         popupWindow.setWidth(250);  
  88.         popupWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);  
  89.            
  90.         // set the list view as pop up window content  
  91.         popupWindow.setContentView(listViewDogs);  
  92.    
  93.         return popupWindow;  
  94.     }  
  95.    
  96.     /* 
  97.      * adapter where the list values will be set 
  98.      */  
  99.     private ArrayAdapter<String> dogsAdapter(String dogsArray[]) {  
  100.    
  101.         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, dogsArray) {  
  102.    
  103.             @Override  
  104.             public View getView(int position, View convertView, ViewGroup parent) {  
  105.    
  106.                 // setting the ID and text for every items in the list  
  107.                 String item = getItem(position);  
  108.                 String[] itemArr = item.split("::");  
  109.                 String text = itemArr[0];  
  110.                 String id = itemArr[1];  
  111.    
  112.                 // visual settings for the list item  
  113.                 TextView listItem = new TextView(MainActivity.this);  
  114.    
  115.                 listItem.setText(text);  
  116.                 listItem.setTag(id);  
  117.                 listItem.setTextSize(22);  
  118.                 listItem.setPadding(10, 10, 10, 10);  
  119.                 listItem.setTextColor(Color.WHITE);  
  120.                    
  121.                 return listItem;  
  122.             }  
  123.         };  
  124.            
  125.         return adapter;  
  126.     }  
  127. }  
DogsDropdownOnItemClickListener.java

Triggered when an item on the drop down list was touched, it will change the text on the button and show a toast with the ID of the selected item. 
  1. package com.example.showasdropdownexample;  
  2.    
  3. import android.content.Context;  
  4. import android.view.View;  
  5. import android.view.animation.Animation;  
  6. import android.view.animation.AnimationUtils;  
  7. import android.widget.AdapterView;  
  8. import android.widget.Toast;  
  9. import android.widget.AdapterView.OnItemClickListener;  
  10. import android.widget.TextView;  
  11.    
  12. public class DogsDropdownOnItemClickListener implements OnItemClickListener {  
  13.    
  14.     String TAG = "DogsDropdownOnItemClickListener.java";  
  15.        
  16.     @Override  
  17.     public void onItemClick(AdapterView<?> arg0, View v, int arg2, long arg3) {  
  18.    
  19.         // get the context and main activity to access variables  
  20.         Context mContext = v.getContext();  
  21.         MainActivity mainActivity = ((MainActivity) mContext);  
  22.            
  23.         // add some animation when a list item was clicked  
  24.         Animation fadeInAnimation = AnimationUtils.loadAnimation(v.getContext(), android.R.anim.fade_in);  
  25.         fadeInAnimation.setDuration(10);  
  26.         v.startAnimation(fadeInAnimation);  
  27.            
  28.         // dismiss the pop up  
  29.         mainActivity.popupWindowDogs.dismiss();  
  30.            
  31.         // get the text and set it as the button text  
  32.         String selectedItemText = ((TextView) v).getText().toString();  
  33.         mainActivity.buttonShowDropDown.setText(selectedItemText);  
  34.            
  35.         // get the id  
  36.         String selectedItemTag = ((TextView) v).getTag().toString();  
  37.         Toast.makeText(mContext, "Dog ID is: " + selectedItemTag, Toast.LENGTH_SHORT).show();  
  38.            
  39.     }  
  40.    
  41. }  
Activity_main.xml – Here is the XML layout file we used for the user interface of our example. 
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:paddingBottom="@dimen/activity_vertical_margin"  
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  7.     android:paddingRight="@dimen/activity_horizontal_margin"  
  8.     android:paddingTop="@dimen/activity_vertical_margin"  
  9.     tools:context=".MainActivity" >  
  10.    
  11.     <Button  
  12.         android:id="@+id/buttonShowDropDown"  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content"  
  15.         android:layout_centerHorizontal="true"  
  16.         android:layout_centerVertical="true"  
  17.         android:text="Select your dog..." />  
  18.    
  19. </RelativeLayout>