Introduction

• At the best of times the Android documentation can be overwhelming and confusing, at the worst of times it is very overwhelming and very confusing. This series hopes to boil down topics and make them less complex.

YouTube

• YouTube version can be found HERE

GitHub

• The code from this tutorial can be found HERE

Adding search bar to Android

• In this tutorial we are going to implementing a search bar but not adding any functionality to it. That will be in the next tutorial. This tutorial is just about the initial steps needed to implement a search bar.
• So in Android when we want to implement some sort of search, the Android system helps us out. We are given two options when implementing search functionality to our app:

1) SearchDialog
2) SearchWidget

• For this tutorial we will be implementing the SearchWidget into our app.

Search Widget

• The search widget is a class that we can use to put search functionality any where in our app's layout(we will be putting it in the appbar). By default the search widget behaves like a standard EditText widget, meaning that it has to have functionality added to it.

Creating menu resource file

• The first thing that we have to do is actually create the XML file for the view that we are going to see. We can do this in a series of steps:

1) Click on the resources manager, which is on the left side of android studio

2) Click Menu

3) click the plus button and name the new menu resource file whatever you want

• We have now created the appropriate menu resource file, which will dictate how our search bar will look.

Adding to the menu resource file

• There are many types of menus in Android but we are going to create a options menu. Which is what the Android documentation recommends for creating a search menu. By the end of this section your resource file should look like this:

: the menu tag is required when creating a menu resource file and it must also be the root node.

: used to represent a menu item. Within the menu item there are many attributes.

android:id ) a resource Id that is unique to the item, which allows the application to recognize the item when the user selects it.

android:icon ) a reference to a drawable to use as the item's icon.

android:title ) A reference to a string to use as the item's title.

android:showAsAction ) specifies when and how this item should appear as an action item in the app bar.

android:actionViewClass ) this allows us to use a searchView as an actionView. Which is essential for us adding the search bar into the app bar. Fun fact, without this attribute our app will fail.

Inflating the menu

• To inflate the new menu that we have created, we have to override the onCreateOptionsMenu() method:

    @Override
    public void onCreateOptionsMenu(@NonNull Menu menu, @NonNull MenuInflater inflater){
        inflater.inflate(R.menu.main_menu,menu);
    }

• To do the actual inflating we call the inflate method which takes the menu we created R.menu.main_menu and the menu that we are adding it to menu. If you run the app at this point everything will work just fine. However, we want to add a little extra bit of functionality.

Extra functionality

• First we have to grab a reference to our menu item and to do that we call:

@Override
    public void onCreateOptionsMenu(@NonNull Menu menu, @NonNull MenuInflater inflater){
        MenuItem menuItem = menu.findItem(R.id.search_all);
    }

• Unfortunately this gives us back a MenuItem object and we need to call methods that are only available on a SearchView object. So we do the casting like this:

@Override
    public void onCreateOptionsMenu(@NonNull Menu menu, @NonNull MenuInflater inflater){
        SearchView searchView = (SearchView) menuItem.getActionView();
    }

• getActionView() returns the View object of our menuItem, which we are able to cast to a SearchView.

• Next we want to add a search hint to the search bar and a search button. Which we can do like this:

@Override
    public void onCreateOptionsMenu(@NonNull Menu menu, @NonNull MenuInflater inflater){
       searchView.setQueryHint("Search Tag Number");
       searchView.setSubmitButtonEnabled(true);
    }

• Lastly we add query listeners to the search bar with this:

@Override
    public void onCreateOptionsMenu(@NonNull Menu menu, @NonNull MenuInflater inflater){
       searchView.setOnQueryTextListener(this);
    }

• The this means we are providing our current class to this method. The current class must implement SearchView.OnQueryTextListener. Once we have implemented the interface we will have to implement two methods:

@Override
    public boolean onQueryTextSubmit(String query) {
        return false;
    }

    @Override
    public boolean onQueryTextChange(String newText) {
        return false;
    }

• These two methods are how we are going gather the data from the search bar and submit it to our database. We will be implementing the actual query logic in the next tutorial

Conclusion

• Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on Twitter.