Android Multi Search Like Deliveroo, Search Contacts With Examples

In this tutorial, we’ll discuss and implement a search feature that displays the matched results in a drop-down beside allowing to filter the ListView results based on the searched string. This type of UI is commonly seen in Food Delivery apps that have plenty of options to choose from. The user can search based on a certain tag/category to quickly find their desired result.

At the end of this tutorial, you’ll be able to come up with a working application similar to the one given below.

android multi search, android search filter

Android Multi Search

For the above application, we’ll NOT be using a SearchView. Instead, we’ll be using an EditText wrapped inside a CardView. The dropdown that pops up with a list of suggestions will be a RecyclerView.

Project Structure

android-efficient-search-project-structure-253x450

Code

The activity_main.xml layout is given below.

In the above code, the CardView is a Custom SearchView UI with a back button on the left. The ListView would display all the restaurants from the adapter.

The Data Source for the restaurants and the type of cuisines is defined in the Model.java file as shown below.

The parameter that differentiates between a restaurant and a cuisine is isCuisine which is of type Boolean.

The MainActivity.java is given below.

The Toolbar layout is set from the menu_main.xml file as shown below.

Before analysing the MainActivity.java class in detail, let’s glance at the code for ListViewAdapter with a filter. Something that we’ve already implemented here.

The code for the ListViewAdapter.java class is given below.

In the above class, we check the isCuisine param on each Model instance. If it’s true we add an empty row with 0 height. Else list_row_model.xml is added. The xml code for each of the layouts is given below.

Clicking the search icon from the Toolbar inflates our custom Search UI and populates the RecyclerView under. To do this, the handleToolbar method is invoked on an instance from the ShowSearchView class.
The code for the ShowSearchView.java is given below.

The handleToolbar method shows/hides the custom UI depending upon the search icon/back arrow clicked respectively. The view animates in/out in the form of circular reveal animation.

The RecyclerView is populated with the cuisines as well as restaurants. Though only the cuisines are displayed until the user types anything.

The adapter for the RecyclerView is defined in the class CuisinesSearchAdapter.java as shown below.

The layout for each row of the RecyclerView is defined in the xml code below.

  • As the user enters text, the RecyclerView data is filtered from the performFiltering method inside the MainActivity.java class. The substrings in the RecyclerView rows that match the typed text are then highlighted.
  • Clicking on a cuisine would filter the list to display all the restaurants having that cuisine as a type.
    Clicking a restaurant shall display its name in a Toast message.

This brings an end to this tutorial. You can download the Android EfficientSearch Project from the link below.

By admin

Leave a Reply

%d bloggers like this: