Search Functionalities in SUSI Android App Using Android SearchView Widget
Searching is a common feature that is required in most applications. But the problem in implementing searching functionality is that there is no common way to do that. People fight over whose way is best to implement search functionality. In this blog post we’ll be looking at how search functionality works in SUSI Android App and how is it implemented. We have used Android’s SearchView widget to do that. There are many other ways to do so but this one is best suited for our requirements. Let’s see how it works. UI Components used for Searching 1. Search icon (magnifying glass icon) In the action bar, you can see a small icon. Clicking on the icon initiates search. 2. Edit text An Obvious requirement is an edit test to enter search query. 3. Up and Down arrow keys Required to search through the whole app. Simply use the up and down arrow keys to navigate through the app and find out each occurrence of the word you want to search. 4. Cross Button Last but not the least, a close or cross button to close the search action. Implementation We have used Android’s inbuilt Widget SearchView. According to official android documentation “A widget that provides a user interface for the user to enter a search query and submit a request to a search provider. Shows a list of query suggestions or results, if available, and allows the user to pick a suggestion or result to launch into.” This widget makes searching a lot easier. It provides all methods and listeners which are actually required for searching. Let’s cover them one by one. Starting the search: searchView.setOnSearchClickListener Listener simply activates when a user clicks on search icon in the toolbar. Do all your work which needs to be done at the starting of the search like, hiding some other UI elements of doing an animation inside the listener searchView.setOnSearchClickListener({ chatPresenter.startSearch() }) Stop the Search: searchView.setOnCloseListener Listener gets activated when a user clicks on the cross icon to close the search. Add all the code snippet you want which is needed to be executed when the search is closed inside this like maybe notify the adapter about data set changes or closing the database etc. searchView.setOnCloseListener({ chatPresenter.stopSearch() false }) Searching a query: searchView.setOnQueryTextListener Listener overrides 2 methods: 3.1 onQueryTextSubmit: As the name suggests, this method is called when the query to be searched is submitted. 3.2 onQueryTextChange: This method is called when query you are writing changes. We, basically wanted same thing to happen if user has submitted the query or if he is still typing and that is to take the query at that particular moment, find it in database and highlight it. So, chatPresenter.onSearchQuerySearched(query) this method is called in both onQueryTextSubmit and onQueryTextSubmit to do that. searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener { override fun onQueryTextSubmit(query: String): Boolean { //Handle Search Query chatPresenter.onSearchQuerySearched(query) recyclerAdapter.query = query return false } override fun onQueryTextChange(newText: String): Boolean { if…