When the user submits a query, your app should execute a search against the Flickr web service and refresh the images the user sees with the search results. First, update PhotoGalleryViewModel to keep track of the user’s latest search term and update the search results when the query changes.

class PhotoGalleryViewModel : ViewModel() {

    val galleryItemLiveData: LiveData<List<GalleryItem>>

    private val flickrFetchr = FlickrFetchr()
    private val mutableSearchTerm = MutableLiveData<String>()

    init {
        mutableSearchTerm.value = "planets"

        galleryItemLiveData = FlickrFetchr().searchPhotos("planets")
                Transformations.switchMap(mutableSearchTerm) { searchTerm ->
                    flickrFetchr.searchPhotos(searchTerm)
                }
    }

    fun fetchPhotos(query: String = "") {
        mutableSearchTerm.value = query
    }
}

Every time the search value changes, the gallery item list should change to reflect the new results. Since both the search term and gallery item lists are wrapped in LiveData, you use Transformations.switchMap(trigger: LiveData<X>, transformFunction: Function<X, LiveData<Y>>) to implement this relationship. (If you need to brush up on LiveData transformations, see Chapter 12.)

You also stash an instance of FlickrFetchr in a property. This way, you only create an instance of FlickrFetchr once in the lifetime of the ViewModel instance. Reusing the same FlickrFetchr instance avoids the unnecessary overhead of re-creating a Retrofit and FlickrApi instance every time the app performs a search. This means a speedier app for your user.

Next, update PhotoGalleryFragment to change PhotoGalleryViewModel’s search term value whenever the user submits a new query through the SearchView. Fortunately, the SearchView.OnQueryTextListener interface provides a way to receive a callback when a query is submitted.

Update onCreateOptionsMenu(…) to add a SearchView.OnQueryTextListener to your SearchView.

class PhotoGalleryFragment : Fragment() {
    ...
    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
         super.onCreateOptionsMenu(menu, inflater)
         inflater.inflate(R.menu.fragment_photo_gallery, menu)

         val searchItem: MenuItem = menu.findItem(R.id.menu_item_search)
         val searchView = searchItem.actionView as SearchView

         searchView.apply {

             setOnQueryTextListener(object : SearchView.OnQueryTextListener {
                 override fun onQueryTextSubmit(queryText: String): Boolean {
                     Log.d(TAG, "QueryTextSubmit: $queryText")
                     photoGalleryViewModel.fetchPhotos(queryText)
                     return true
                 }

                 override fun onQueryTextChange(queryText: String): Boolean {
                     Log.d(TAG, "QueryTextChange: $queryText")
                     return false
                 }
             })
         }
     }
     ...
}

When importing SearchView, select the androidx.appcompat.widget.SearchView option from the choices presented.

In onCreateOptionsMenu(…), you pull the MenuItem representing the search box from the menu and store it in searchItem. Then you pull the SearchView object from searchItem using getActionView().

Once you have a reference to the SearchView, you are able to set a SearchView.OnQueryTextListener using setOnQueryTextListener(…). You must override two functions in the SearchView.OnQueryTextListener implementation: onQueryTextSubmit(String) and onQueryTextChange(String).

The onQueryTextChange(String) callback is executed any time text in the SearchView text box changes. This means that it is called every time a single character changes. You will not do anything inside this callback for this app except log the input string and return false. Returning false indicates to the system that your callback override did not handle the text change. This cues the system to perform SearchView’s default action (which is to show relevant suggestions, if available).

The onQueryTextSubmit(String) callback is executed when the user submits a query. The query the user submitted is passed as input. Returning true signifies to the system that the search request has been handled. This callback is where you call into PhotoGalleryViewModel to trigger the photo download for your search query.

Run your app and submit a query. You should see log statements reflecting the execution of your SearchView.OnQueryTextListener callback functions. You should also see the images displayed change based on the search term you enter (Figure 26.3).

Figure 26.3  Working SearchView

Note that if you use the hardware keyboard to submit your search query on an emulator (versus the emulator’s onscreen keyboard), you may see the search executed two times, one after the other. This is because there is a small bug in SearchView. You can ignore this behavior because it is a side effect of using the emulator and will not affect your app when it runs on a real Android device.