Show ListView as Dropdown in Android – a Spinner Alternative


Our code for today will give us an alternative to using the Android spinner.

We will show ListView as dropdown in Android.

This ListView dropdown works just like a spinner but:

  • I love how it looks and response to user touch, it feels smoother and faster than a spinner.
  • It can also be easily customized, you won’t have to get stuck with default spinner look.
  • It can be triggered on any view elements such as a Button, Layout, TextView or EditText.

In this example, we are going to have a button that when it was touched, it will show a drop-down list of Dog names.

Here’s a video demo of our final output:

Show ListView as Dropdown in Android Complete Code

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.

package com.example.showasdropdownexample;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;
import android.app.Activity;
import android.graphics.Color;

public class MainActivity extends Activity {

    String TAG = "MainActivity.java";

    String popUpContents[];
    PopupWindow popupWindowDogs;
    Button buttonShowDropDown;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // initialize pop up window items list
        
        // add items on the array dynamically
        // format is DogName::DogID
        List<String> dogsList = new ArrayList<String>();
        dogsList.add("Akita Inu::1");
        dogsList.add("Alaskan Klee Kai::2");
        dogsList.add("Papillon::3");
        dogsList.add("Tibetan Spaniel::4");

        // convert to simple array
        popUpContents = new String[dogsList.size()];
        dogsList.toArray(popUpContents);

        
        // initialize pop up window
        popupWindowDogs = popupWindowDogs();

        
        // button on click listener
        
        View.OnClickListener handler = new View.OnClickListener() {
            public void onClick(View v) {                                                                                                                                                                                                                                                                                                 

                switch (v.getId()) {

                case R.id.buttonShowDropDown:
                    // show the list view as dropdown
                    popupWindowDogs.showAsDropDown(v, -5, 0);
                    break;
                }
            }
        };

        // our button
        buttonShowDropDown = (Button) findViewById(R.id.buttonShowDropDown);
        buttonShowDropDown.setOnClickListener(handler);
    }

    public PopupWindow popupWindowDogs() {

        // initialize a pop up window type
        PopupWindow popupWindow = new PopupWindow(this);

        // the drop down list is a list view
        ListView listViewDogs = new ListView(this);
        
        // set our adapter and pass our pop up window contents
        listViewDogs.setAdapter(dogsAdapter(popUpContents));
        
        // set the item click listener
        listViewDogs.setOnItemClickListener(new DogsDropdownOnItemClickListener());

        // some other visual settings
        popupWindow.setFocusable(true);
        popupWindow.setWidth(250);
        popupWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
        
        // set the list view as pop up window content
        popupWindow.setContentView(listViewDogs);

        return popupWindow;
    }

    /*
     * adapter where the list values will be set
     */
    private ArrayAdapter<String> dogsAdapter(String dogsArray[]) {

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, dogsArray) {

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {

                // setting the ID and text for every items in the list
                String item = getItem(position);
                String[] itemArr = item.split("::");
                String text = itemArr[0];
                String id = itemArr[1];

                // visual settings for the list item
                TextView listItem = new TextView(MainActivity.this);

                listItem.setText(text);
                listItem.setTag(id);
                listItem.setTextSize(22);
                listItem.setPadding(10, 10, 10, 10);
                listItem.setTextColor(Color.WHITE);
                
                return listItem;
            }
        };
        
        return adapter;
    }
}

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.

package com.example.showasdropdownexample;

import android.content.Context;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.TextView;

public class DogsDropdownOnItemClickListener implements OnItemClickListener {

    String TAG = "DogsDropdownOnItemClickListener.java";
    
    @Override
    public void onItemClick(AdapterView<?> arg0, View v, int arg2, long arg3) {

        // get the context and main activity to access variables
        Context mContext = v.getContext();
        MainActivity mainActivity = ((MainActivity) mContext);
        
        // add some animation when a list item was clicked
        Animation fadeInAnimation = AnimationUtils.loadAnimation(v.getContext(), android.R.anim.fade_in);
        fadeInAnimation.setDuration(10);
        v.startAnimation(fadeInAnimation);
        
        // dismiss the pop up
        mainActivity.popupWindowDogs.dismiss();
        
        // get the text and set it as the button text
        String selectedItemText = ((TextView) v).getText().toString();
        mainActivity.buttonShowDropDown.setText(selectedItemText);
        
        // get the id
        String selectedItemTag = ((TextView) v).getTag().toString();
        Toast.makeText(mContext, "Dog ID is: " + selectedItemTag, Toast.LENGTH_SHORT).show();
        
    }

}

activity_main.xml – Here is the XML layout file we used for the user interface of our example.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/buttonShowDropDown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Select your dog..." />

</RelativeLayout>

That’s the solution I got on how to show ListView as dropdown in android. If you have any other solutions or suggestions to improve or rewrite this code, please let us know in the comments section below.


13 responses to “Show ListView as Dropdown in Android – a Spinner Alternative”

  1. Thank you so much for this…Well written and it saved me a whole lot. I am hearing of PopupWindow for the first time and this is exactly what I was looking for.

    Thanks again

  2. Thanks, this was exactly what I was looking for. Better than trying to change the spinner look by adjusting the images for button drop down etc.Now I can easily apply my own style.

Leave a Reply

Your email address will not be published. Required fields are marked *