How to add search functionality into Listview?

Question

I'm having some problem with the search bar. i have an app that have a Listview in some activity, the listview have only strings inside it. I'v wanted to add a search functionality into this activity. In the last few days i was searching over the web for some example of how to do that, and i founded a lot of guides and explanations of how to create a search bar, and none of them works in my app correctly and in most of them there is no explanation of the logic behind what is going on there.

Is there any simple guide/tutorial that can explain how to create a search bar (doesn't matter if it will be on the Action bar, or in the layout) that will reduce the already existing listview of strings into smaller list? (For example if you type the letter "a" so all the strings inside the listview that contains the letter "a" will be shown).

Thanks in advance!

Answer 1

Following Code will help your to filter the content of your listView.

1. Create SearcView using the layout like this:

       <ImageView
           android:id="@+id/icon_search"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:layout_margin="8dp"
           android:src="@drawable/icon_search" />
   
       <EditText
           android:id="@+id/et_userInput"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:layout_weight="1"
           android:background="@null"
           android:hint="@string/search_friends_and_contacts"
           android:singleLine="true"
           android:textColor="@color/white"
           android:textColorHint="@color/white"
           android:textSize="14sp" />
   
       <ImageView
           android:id="@+id/icon_close"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:layout_margin="8dp"
           android:src="@drawable/icon_close_white" />
   

include this in your listview Layout.

2. Update your Adapter class:

implements your adapter class with Filterable. And Override getFilter method and inside your getFilter method write this code:

private SearchFilter mSearchFilter ;

 @Override
    public Filter getFilter() {
        if (mSearchFilter == null) {
            mSearchFilter = new SearchFilter();
        }
        return mSearchFilter;
    }

now create inner private class in your adapter which extends Filter:

private class SearchFilter extends Filter {

//Invoked in a worker thread to filter the data according to the constraint.
@Override
protected FilterResults performFiltering(CharSequence constraint) {
    FilterResults results = new FilterResults();
    if (constraint != null && constraint.length() > 0) {
        ArrayList<String> filterList = new ArrayList<FriendsModel>();
        for (int i = 0; i < mOriginalList.size(); i++) {
            if ((mOriginalList.get(i).toUpperCase())
                    .contains(constraint.toString().toUpperCase())) {
                filterList.add(mOriginalList.get(i));
            }
        }
        results.count = filterList.size();
        results.values = filterList;
    } else {
        results.count = mOriginalList.size();
        results.values = mOriginalList;
    }
    return results;
}


//Invoked in the UI thread to publish the filtering results in the user interface.
@SuppressWarnings("unchecked")
@Override
protected void publishResults(CharSequence constraint,
                              FilterResults results) {
    mListViewArrayList = (ArrayList<String>) results.values;
    notifyDataSetChanged();
    }
}

also define two ArrayListVariable in your adapter class like this:

ArrayList<String> mListViewArrayList ; <----- which will be used to render data from getView Method
ArrayList<String> mOriginalList ; <----- Which holds original list all the time.

And to call this filter from activity write following code in your Activity:

et_userInput.addTextChangedListener(new TextWatcher() {

            @Override
            public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
                yourAdapter.getFilter().filter(arg0);
            }

            @Override
            public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
                                          int arg3) {
            }

            @Override
            public void afterTextChanged(Editable arg0) {

            }
        });