NoobsPlanet

Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics, posts and unlimited download to our resources, as well as connect with other members through your own private inbox!

Android SearchView on ActionBar RecyclerView

noobsplanet

Active member
Staff member
Administrator
Moderator
872
874
873
We have learned how to use RecyclerView in our previous guide, if you haven't read it yet then please read the previous guide from here. Now we will implement the search feature for RecyclerView, The key concept for using SearchView is while working with a large list, so that a user can find a list item quickly. This guide will show you how to search a user by his First Name.

875


First we will create a SearchView on xml as menu, which will be display on the end of ActionBar. To do this Right Click on res directory > New > Android Resource Directory > Name as menu click Ok. Now create a new menu resource inside menu directory that we have just created and name it as search_menu.xml (Right Click on menu directory > New > Menu resource File > Name it as search_menu.xml and click Ok). Now, paste the following code inside search_menu.xml

search_menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/search_menu"
        android:icon="@drawable/ic_search"
        android:title="Search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always" />
</menu>
Right Click on drawable directory under res > New > Drawable Resource File > Name as ic_search.xml and click Ok. Remove all the code from ic_search.xml and paste the following line of code.
ic_search.xml:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#FFFFFF"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z" />
</vector>
Now, goto RVAdapter.java and create a void function() for which we'll call from MainActivity.java, when user type in a SearchField. The following code takes List<RecyclerViewData> filterItems as parameter, which is a filtered list that contains the input, which will be added into recyerViewDataList and notify the RecylerView to change it's data.

RVAdapter.java:
public void setFilter(List<RecyclerViewData> filterItems) {
    recyclerViewDataList = new ArrayList<>();
    recyclerViewDataList.addAll(filterItems);
    notifyDataSetChanged();
}
In the MainActivity.java create a Method called onCreateOptionsMenu and instantiate SearchView. Then set the setOnQueryTextListener to SearchView, which will be called every time whenever user type in SearchField.
  • onQueryTextSubmit - Only calls after when user presses submit button.
  • onQueryTextChange - Calls this function immediately when user start typing.
We have converted the list item first name and input text to UpperCase because as we already know Java is case sensitive.

MainActivity.java:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater menuInflater = getMenuInflater();
    menuInflater.inflate(R.menu.search_menu, menu);

    MenuItem menuItem=menu.findItem(R.id.search_menu);
    searchView= (SearchView) menuItem.getActionView();
    searchView.setQueryHint("Search By First Name");
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextSubmit(String query) {
           return false;
        }

        @Override
        public boolean onQueryTextChange(String newText) {
            newText = newText.toUpperCase();
            List<RecyclerViewData> newList = new ArrayList<>();
            for (RecyclerViewData PItem : recyclerViewDataList) {
                String name = PItem.getFirstname().toUpperCase();
                if (name.contains(newText))
                    newList.add(PItem);
            }
            if (rvAdapter != null) {
                rvAdapter.setFilter(newList);
            }
            return true;
        }
    });
    return true;
}



That's it . If you have got any problem this please ask me below!!
Thank You!!
 
Last edited:
Top