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”
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
Hello @roryrudy, glad you found it useful, thanks for sharing what you think of this code!
nice looking popup
Yes it is! Thanks for sharing your thoughts @i.m. shy
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.
Enjoy the code with your own style @Case! You’re welcome! :)
THANK YOU Now I,ve learned something new
You’re welcome @Alia! I’m glad you learned something new from our site! :)
any way to use other listview to the root listview item dropdown menu
hello.. your tutorial is amazing…
but, how i implement that inside Fragment ?
have you found the solution. i also stuck on it.
How to i adjust the width of popup window
Excellent