Posted on

Android SearchView with RecyclerView


android searchview

Today I want to share the best Android SearchBar library that I’ve seen. It has the coolest design and we’ll also learn how to handle its events, search for an item in RecyclerView. Let’s get started!

SearchView

I’m going to use a library over default Android SDK SearchView, simply because of the better look. We’re going to use MaterialSearchView library. Great, simple, has all features you’d want out of the box

Without further ado, here’s what it’s going to look like

 

android searchview

Setup

Add this line to your build.gradle

Main Activity

This SearchView looks just like a menu item, which extends to the whole toolbar. Just like you have with your YouTube app

Now let’s add our activity_main.xml

Since using AppBarLayout is the most common way of adding a toolbar – I have it wrapped in it. But if you don’t use it, you can just delete AppBarLayout and leave everything like it is, will work the same way

Menu Item

Since this SearchView in collapsed state looks just like a menu item – it’s implemented that way. So let’s add a menu item for it

menu_main.xml

It’s a magnifying glass icon, no need to add any drawable, this icon is included in the library. Next, inflate menu from this file in your MainActivity.java

That’s basically all setup you need. Now you’ll have exactly what’s on the GIF above

RecyclerView

Before implementing listening for events, let’s add a list under our toolbar with some texts, so we have the stuff to search on. It’s going to be a list of strings, so just one TextView is needed, if you’re not familiar with RecyclerView – check this post

list_item.xml

Holder.java

And we’re going to display a list of countries, Adapter.java

Main Activity

Finally, add RecyclerView to MainActivity, content_main.xml

and MainActivity.java

Here’s the result

android searchview

 

Search Events

Finally, let’s implement listening for SearchView events. Add few lines in MainActivity.java

onTextQuerySumbit is triggered when you click on this keyboard button

android searchview

And onQueryTextChange – for each letter change. So you choose yourself – if you want real-time search – choose second, otherwise – first

Beware that if you choose using onQueryTextChange – you still need to copy search code to onTextQuerySumbit, otherwise, search will be cleared on submit button pressed

Clear Search

Now the final part is to clear search and go to original list. If you noticed, in onQueryTextSumbit I return true, it means that I handled search query. Returning true doesn’t close search view on submit. Returning false – closes search view

Which means that when submitting search we don’t close a search view, when you press you just clear search input. Search view is closed only when you click on ←  button. That’s when we can clear the search and display original list

Here’s the result, the second time to submit search I pressed Enter

android searchview

 

If you noticed, I always extract small code blocks, that have some little task into their own methods and name them exactly what they’re intended to do. This stuff I learned from an incredible book called Clean Code by Uncle Bob, just as an amazing dude. Highly recommend you read this book, it will change the way you write code completely!

Hope you found it useful, you can get source code here. Don’t forget to subscribe, follow me on Twitter, Facebook, G+ and share with friends!