How to give search option on Spinner?

Question

Basically i need to build up a spinner with search option. Couldn't really find anything similar. But got some ideas though. Like it can be done through below processes:

1. Use Autocomplete TextView : Here the problem is i can't really load a list when i click it. It shows a list when i start typing.

2. Use a dropdown listview underneath editTextView. So, when i click the editText it will act as dropdown and when i start typing the items will be only shown in the listview.

   Problem here is i cant really implement it. Please help me out on this.

3. Use a spinner- which it will act like a EditTextView, so that i can type.

   I need help on how to type/put a editTextView inside & ontop of the spinner.

Please help me out.

Or if there is any better suggestions than please say it too.

Answer 1

I am using Filtering, instead of Autocomplete..The flow would be, you must populate the Arraylist that you have and display it as normal list. the Filtering thingy will be implemented in your EditText. Here's some of my code:

1st: Declare your EditText and a RelativeLayout wherein the result will be plotted:

 etClinicName = (EditText)findViewById(R.id.etClinicName);      
    btnSearch = (Button) findViewById(R.id.btnSearch);
    rlayoutResult = (RelativeLayout) findViewById(R.id.relativelayout_result);

2nd: Inside your OnCreate, Put this codes:

    etClinicName.addTextChangedListener(new TextWatcher()
    {

        @Override
        public void onTextChanged(CharSequence cs, int arg1, int arg2, int     arg3) 
        {
            // When user changed the Text
    SearchByNameFragmentActivity.this.arrayAdapter.getFilter().filter(cs);  
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                int after) 
{
            // TODO Auto-generated method stub
        }

        @Override
        public void afterTextChanged(Editable s) {
            // TODO Auto-generated method stub

        }
    });

and here's my XML layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_theme"
android:orientation="vertical" >

  <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="41dp"
                android:layout_margin="20dp"
                android:orientation="horizontal"
                android:background="@drawable/shadow" >

                <EditText
                    android:id="@+id/etClinicName"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:hint="@string/hintSearchbranch"
                    android:inputType="textPersonName"
                    android:textSize="13sp"
                    android:background="@drawable/shadow"
                    android:paddingLeft="1dp"
                    android:gravity="center_vertical" />



            </LinearLayout>




            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_margin="10dp">

                <ListView
                    android:id="@+id/lvlClinicList"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent" />



            </LinearLayout>
            </RelativeLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/newline" />

           <RelativeLayout
                android:id="@+id/relativelayout_result"
                android:layout_width="wrap_content"
                android:layout_height="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp" >



                                <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                >

                <Button
                    android:id="@+id/btnSearch"
                    android:layout_width="42dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_action_search_black"
                    android:padding="15dp" />

                </LinearLayout>
            </RelativeLayout>


        </LinearLayout>

    </RelativeLayout>


</LinearLayout>

Feel free to ask If you're still Confused, Hope it Helps :D

Answer 2

There is a searchable spinner library for Android which might be useful for you.

Searchable Spinner is a dialog spinner with the search feature which allows to search the items loaded in the spinner.

There is very little code change that will be needed for this library, you just need to replace your Spinner tag in your layout xml with the library's tag.

PFB the link for more details SearchableSpinner