Cover Image for SearchView on Toolbar in Android
77 views

SearchView on Toolbar in Android

Implementing a SearchView in the Toolbar is a common feature in Android apps for allowing users to search for specific content within your app. Here’s how you can add a SearchView to the Toolbar in Android:

  1. Include the SearchView Widget: Make sure you’ve included the SearchView widget in your XML layout file where you define the Toolbar. You can place it as an action view in the Toolbar‘s menu item.
XML
   <menu xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto">

       <item
           android:id="@+id/action_search"
           android:icon="@android:drawable/ic_search_category_default"
           android:title="Search"
           app:actionViewClass="androidx.appcompat.widget.SearchView"
           app:showAsAction="ifRoom" />

       <!-- Other menu items can be added here -->

   </menu>

In the above XML, app:actionViewClass specifies the SearchView widget, and app:showAsAction determines how the search item is displayed in the Toolbar.

  1. Java Code: In your activity or fragment, you need to handle the SearchView actions, including search queries and query text changes.
Java
 import androidx.appcompat.app.AppCompatActivity;
 import android.os.Bundle;
 import androidx.appcompat.widget.SearchView;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.widget.Toast;

 public class MainActivity extends AppCompatActivity {

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
     }

     @Override
     public boolean onCreateOptionsMenu(Menu menu) {
         getMenuInflater().inflate(R.menu.main_menu, menu);
         MenuItem searchItem = menu.findItem(R.id.action_search);
         SearchView searchView = (SearchView) searchItem.getActionView();

         // Configure the SearchView
         searchView.setQueryHint("Search...");
         searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
             @Override
             public boolean onQueryTextSubmit(String query) {
                 // Handle the query submission (e.g., perform search)
                 Toast.makeText(MainActivity.this, "Search query submitted: " + query, Toast.LENGTH_SHORT).show();
                 return true;
             }

             @Override
             public boolean onQueryTextChange(String newText) {
                 // Handle query text change (e.g., update search suggestions)
                 return true;
             }
         });

         return true;
     }
 }

In the code above:

  • In the onCreateOptionsMenu() method, we inflate the menu that includes the SearchView item.
  • We retrieve the SearchView using menu.findItem() and configure it, including setting the query hint and handling query text changes and submissions.
  1. Handling Search Actions: In the onQueryTextSubmit() method of the OnQueryTextListener, you can perform actions like searching for content based on the user’s query. This is where you would typically execute the search operation and display the results. You can also handle query text changes in the onQueryTextChange() method if you want to provide real-time search suggestions or filter results as the user types.

With these steps, you can add a SearchView to the Toolbar in your Android app, allowing users to search for content easily. Remember to customize the search behavior according to your app’s requirements.

YOU MAY ALSO LIKE...

The Tech Thunder

The Tech Thunder

The Tech Thunder


COMMENTS