Sunday, November 17, 2024
Google search engine
HomeLanguagesJavaHow to Implement Android SearchView with Example

How to Implement Android SearchView with Example

SearchView widget is used to provide a search interface to the user so that the user can enter his search query and submit a request to the search provider and get a list of query suggestions or results.

Class Syntax:

public class SearchView extends LinearLayout implements CollapsibleActionView

Class Hierarchy:

java.lang.Object
  ↳  android.view.View
    ↳  android.view.ViewGroup
      ↳  android.widget.LinearLayout
        ↳  android.widget.SearchView

Example to Demonstrate SearchView:

In this article, you will create a basic search application with a search view and list view. The user will type a search query in the search view which is present in the action bar. Here are explained steps:

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project. It consists of a Relative Layout with ListView in it from which data is to be searched. Here is the complete code for activity_main.xml: 

XML




<?xml version="1.0" encoding="utf-8"?>
<!-- Relative Layout -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
    <!-- List View from which data is to be searched -->
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="fill_parent" />
</RelativeLayout>


Create menu.xml Resource File and Add a SearchView as a Menu Item to Action Bar with the title “Search”.

Here is the complete code for the menu.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
  
    <!-- Search view widget as item in menu -->
    <item
        android:id="@+id/search_bar"
        android:title="Search"
        app:actionViewClass="android.widget.SearchView"
        app:showAsAction="ifRoom|withText" />
</menu>


Step 3: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. In this file, items are added to List View manually and setOnQueryTextListener is attached to Search View. onQueryTextSubmit() method is overridden in which List View gets filtered according to the search query entered by the user.

Java




import android.os.Bundle;
import android.support.v4.view.MenuItemCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.SearchView;
import android.widget.Toast;
import java.util.ArrayList;
  
public class MainActivity extends AppCompatActivity {
  
    // List View object
    ListView listView;
  
    // Define array adapter for ListView
    ArrayAdapter<String> adapter;
  
    // Define array List for List View data
    ArrayList<String> mylist;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // initialise ListView with id
        listView = findViewById(R.id.listView);
  
        // Add items to Array List
        mylist = new ArrayList<>();
        mylist.add("C");
        mylist.add("C++");
        mylist.add("C#");
        mylist.add("Java");
        mylist.add("Advanced java");
        mylist.add("Interview prep with c++");
        mylist.add("Interview prep with java");
        mylist.add("data structures with c");
        mylist.add("data structures with java");
  
        // Set adapter to ListView
        adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, mylist);
        listView.setAdapter(adapter);
    }
  
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate menu with items using MenuInflator
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu, menu);
  
        // Initialise menu item search bar
        // with id and take its object
        MenuItem searchViewItem = menu.findItem(R.id.search_bar);
        SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchViewItem);
  
        // attach setOnQueryTextListener
        // to search view defined above
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            // Override onQueryTextSubmit method which is call when submit query is searched
            @Override
            public boolean onQueryTextSubmit(String query) {
                // If the list contains the search query than filter the adapter
                // using the filter method with the query as its argument
                if (list.contains(query)) {
                    adapter.getFilter().filter(query);
                } else {
                    // Search query not found in List View
                    Toast.makeText(MainActivity.this, "Not found", Toast.LENGTH_LONG).show();
                }
                return false;
            }
  
            // This method is overridden to filter the adapter according
            // to a search query when the user is typing search
            @Override
            public boolean onQueryTextChange(String newText) {
                adapter.getFilter().filter(newText);
                return false;
            }
        });
        return super.onCreateOptionsMenu(menu);
    }
}


Kotlin




import android.os.Bundle
import android.support.v4.view.MenuItemCompat
import android.support.v7.app.AppCompatActivity
import android.view.Menu
import android.widget.ArrayAdapter
import android.widget.ListView
import android.widget.SearchView
import android.widget.Toast
  
class MainActivity : AppCompatActivity() {
  
    // List View object
    lateinit var listView: ListView
  
    // Define array adapter for ListView
    lateinit var adapter: ArrayAdapter<String>
  
    // Define array List for List View data
    lateinit var mylist: ArrayList<String>
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // initialise ListView with id
        listView = findViewById(R.id.listView) as ListView
  
        // Add items to Array List
        mylist = ArrayList()
        mylist.add("C")
        mylist.add("C++")
        mylist.add("C#")
        mylist.add("Java")
        mylist.add("Advanced java")
        mylist.add("Interview prep with c++")
        mylist.add("Interview prep with java")
        mylist.add("data structures with c")
        mylist.add("data structures with java")
  
        // Set adapter to ListView
        adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, mylist)
        listView.adapter = adapter
    }
  
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        // Inflate menu with items using MenuInflator
        val inflater = menuInflater
        inflater.inflate(R.menu.menu, menu)
  
        // Initialise menu item search bar
        // with id and take its object
        val searchViewItem = menu.findItem(R.id.search_bar)
        val searchView = MenuItemCompat.getActionView(searchViewItem) as SearchView
  
        // attach setOnQueryTextListener
        // to search view defined above
        searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
            // Override onQueryTextSubmit method which is call when submit query is searched
            override fun onQueryTextSubmit(query: String): Boolean {
                // If the list contains the search query than filter the adapter
                // using the filter method with the query as its argument
                if (mylist.contains(query)) {
                    adapter.filter.filter(query)
                } else {
                    // Search query not found in List View
                    Toast.makeText(this@MainActivity, "Not found", Toast.LENGTH_LONG).show()
                }
                return false
            }
  
            // This method is overridden to filter the adapter according
            // to a search query when the user is typing search
            override fun onQueryTextChange(newText: String): Boolean {
                adapter.filter.filter(newText)
                return false
            }
        })
        return super.onCreateOptionsMenu(menu)
    }
}


Output:

RELATED ARTICLES

Most Popular

Recent Comments