Providing Search with SearchView (Android Development Patterns Ep 7)


IAN LAKE: For many, how
you use and navigate your app can be classified
in one of two ways, either browsing through
content, or by directed search for specific content. If your app isn’t delivering a
good in-app search experience, you’re only serving
part of your user base. Hi, I’m Ian Lake, and
I want to show you what goes into building a great
in-app search experience using SearchView, to help your
users get to exactly what they want as easily as possible. The basic building blocks
of a good search experience start with perhaps the
hardest one, good content. We’re talking about searching
using a single query string. But how that maps
onto your data– be it a list of users or a
full text search of posts– and how you store that
data is all in your hands. Well, it may be helpful to
have a special Full Text Search, or FTS, Table
locally on the device, if your data set is small enough
and query speed is critical. For now, let’s focus on
the search process itself. With search being such a
core navigation pattern, it makes sense to standardize
on a single pattern for providing search. For Android, that involves
an aptly-named SearchView. Usually, the SearchView is seen
as an action in the main app bar, or an appropriate toolbar. By tapping on the
SearchView icon, the SearchView expands
inline, allowing users to immediately search. Through AppCompat, part of
the Android Support Library, SearchView is available on all
Android 2.1 and higher devices. Adding a SearchView
to your app bar involves just adding another
item to the menu you inflate. Besides the more
obvious title and icon, you’ll note the showAsAction
contains collapseActionView. This is what tells the menu that
this item should be collapsed by default, but can be expanded
into the full actionViewClass that’s defined. We also need ifRoom– or
alternatively, always– for showAsAction. Without this, our icon will
only appear in the overflow menu and we won’t be able to expand
it into the full SearchView. Not what we want. With just this addition,
we get a nice search icon that expands into
the SearchView, but the search doesn’t really
go anywhere or do anything. We can get a reference to
it when we inflate our menu, but where do we go from there? Firstly, there’s
full manual mode, using setOnQueryTextListener. Here, you’ll get a callback for
when the search text changes and when the user submits
their search, giving you full control over exactly
what happens when. You can take advantage of a lot
more when you instead provide a searchable configuration. This is an XML
file, specifically for all the various
options relating to search. So many options that we have
a full documentation page just on all the various options,
all nine pages of the detailed explanations. Thankfully, it can also
be super short and easy. Just a label–
which would usually be your app name– and a hint
in the form of search posts or search your app name. Guess what it takes to add
voice search to your SearchView? Just a single additional line to
your searchable configuration. That’s a pretty powerful line,
but remember that voice search directly submits what is said. There’s no opportunity to
change things before submitting, so make sure your
searches lend themselves to voice before enabling it. Then you’ll associate that
searchable configuration with an activity. This is the activity
you want to go to when the user submits a query. You’ll note we use
singleTop launch mode. This is important if
you have a SearchView on your searchable activity–
say, to do a second search. And this launch mode prevents
a potential giant back stack of search result screens. Hooking up your SearchView
to a searchable configuration uses SearchManager,
the system service which parses that
metadata element you’ve added to one of your
activities and creates a searchable info you can
pass to your SearchView. This launches our
searchable activity. But to extract the actual search
text, we look for action search and then extract the query
from the intent’s extra. You call this from
onCreate, and if you are using that
singleTop launch mode, call it from
onNewIntent, as well. So you have a
great-looking SearchView that directly searches to
the activity of our choice. What we haven’t talked about yet
are recent query suggestions, or custom suggestions,
which make things even easier for users
to find what they want. Check out the developer
site for more information. I can’t wait to see
what awesome experiences you come up with using
in-app search on your quest to build better apps. [MUSIC PLAYING]

Comments 46

  • Thanks, +Ian Lake, for this video. I'm just currently struggling with SearchView in my new app, and following the doc page on this topic I've come to some unsatisfactory dead-end.

    First, the doc page doesn't contain some details that you video does, so I can update my code to some degree (like MenuItemCompat, making the MainActivity a searcheable one and singleTop mode). Hope the doc pages will be updating faster…

    Second, my main problem was, and is, that according to SearchView doc page all you may do (with a Search Configuration) is launch another activity where you display a list of found items. But I believe the main pattern here would be do something about your main content within MainActivity, like scroll to the found item or marking visually the items that were found.

    And basically I see no option to gracefully step back to MainActivity from the Searchable activity to display the search results within the context of the main content.

  • Couldn't customize it to look and behave like a material design search view. So I just created my own search view from scratch. Now I see that there are already some good implementations https://github.com/EugeneHoran/Android-Material-SearchView . Thanks for the effort Google , but this native search view is not flexible enough.

  • +Ian Lake – there appears to be some missing information to get this to work. The SearchView appears in my menu, and it appears when clicked. However, the SearchActivity is not delivered the search intent when the Search button is selected. I've tried adding android.app.default_searchable to my main Activity (and also to the application block) in AndroidManifest.xml, but still not receiving search intents. I'm not sure it is required (anymore? ever?) as you do not mention it here.

    StackOverflow is filled with people having similar problems, and many non-working suggestions are marked as the correct solution.

    Can you provide a sample project on Github showing that this works, or possibly a followup video on how to troubleshoot common errors with regards to this functionality? I now remember why I opted to build my own Search functionality years ago instead of using this built in capability.

  • That SearchView looks nothing like the Material Design recommendation: https://www.google.com/design/spec/patterns/search.html#search-in-app-search

    You don't even touch the topic. I'm struggling to find out how to make my Search View look like the Play Store, which follows the Material Design.

  • 2 questions, where is the return value of onCreateOptionsMenu, and where to put searchable configuration?
    Thanks

  • My goal is to create a search activity where users of my social app can search for and "friend" existing existing users. I was considering using a SearchView but it may be more simple to just use a EditText view with something like a RecyclerView to display my results. Every time the user types a character, my Cloud Endpoints backend will execute an API method that searches the GAE datastore for users that match that criteria and swap the data in the RecyclerView. Do you think I should still use a SearchView? What added benefits would I receive? I guess what I am trying to say is – I am not convinced a SearchView is worth all that trouble in my social app situation.

  • Guys ..pls check the color of text and background color …combo is illegible

  • better than most answers on stackoverflow!Much clearer.

  • This episode is so great! Great job, so much better than the previous one 🙂

  • How do I make my SearchView look like the Material one? Mine looks terrible even though I'm using correct app theme.

  • @Tomislav Turcic

    <android.support.v7.widget.Toolbar
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="@dimen/triple_height_toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    add these themes it will look like above vidoe

  • just do it!!

  • My searchView in Lenovo phone, become search application, I don't know why

  • Hi Android Developers,

    I have a query and it is kind of urgent. I want to know how to make the toolbar option which contains the searchview work for searching places in google map. I know to use a button and then code for it, but in toolbar the searchview has the magnifying glass symbol , how do i integrate it with the google map and use geocode.
    This is the code I want to implement:
    private void doSearch() {
    EditText location_field = (EditText) findViewById(R.id.edtsearch);
    String location = location_field.getText().toString();
    List addressList = null;
    if (location != null || !location.equals(“”)) ;
    {
    Geocoder geocoder = new Geocoder(this);
    {
    try {
    addressList = geocoder.getFromLocationName(location, 1);
    } catch (IOException e) {
    e.printStackTrace();
    }
    Address address = addressList.get(0);
    LatLng latLng = new LatLng(address.getLatitude(), address.getLongitude());
    mMap.addMarker(new MarkerOptions().position(latLng).title(“Marker”));
    mMap.animateCamera(CameraUpdateFactory.newLatLng(latLng));
    mMap.moveCamera(CameraUpdateFactory.newLatLng(latLng));
    mMap.getUiSettings().isCompassEnabled();
    mMap.getUiSettings().isZoomControlsEnabled();
    }

  • Are you in any way related to Jared in Silicon Valley? By the way it's a very helpful tutorial. Thank you.

  • Would be great if android comes up with a easier to use widget than current searchview/widget.
    Its much easier to program an edittext/button combination to do a search than to implement this feature…

  • In the video you use the SearchView from the support library but the one in the official reference (urls in the description) use the default, outdated one. Are they still the recommended documentation for the searchview? Can I use the old one even though we are all using material design now?

  • thanks it work flawlessly 🙂

  • This video provides better information than the linked documentations page. The documentation page contains some misleading information, probably through edits it ended up with a recomended implementation that does nothing.
    https://developer.android.com/training/search/setup.html

  • Why is it so complex? A simple EditText with a "addTextChangedListener" is so easy and fast. Why do I need to modify the manifest, then hook up a new activity and handle the query in there? The widget should be implementable in a single activity.

  • Please I followed the tutorial on the android site for learning how to search let's say for pets name using the search menu just like we search our contacts on the phone for names. I tried searching for pets, the search button is now functional but it is doesn't search anything when I click it. Please I uploaded a link here of the whole app and how far I have gone.Please Could you help me check what I haven't done right that is not allowing d search button to search for the names. Meanwhile, everything is functional, the app doesn't crash at all.
    Here is the link:
    https://drive.google.com/file/d/0B_rCcU2ED5NUaWhlaEdEenFqdU0/view?usp=drivesdk

  • Please help . Many methods are deprecated on API26 . search item is not expanding . any idea?

  • I want to animate it as whatsApp search is expanded with animation

  • Sir Like EditText/PlainText how to setText To searchview ?? please help me

  • Hi Ian. I think that there is some bug. When I click search the icon is gone but the action is shown in "3 dots menu". After closing "3 dots menu" search action is gone forever. Setting app:showAsAction="always|collapseActionView" fixed the problem.

  • Hey , Nice Tutorail. I was looking for implementing find in page for my Webview to allow user to search for ceratin Text with Next and previous option if there are many text with same name. I searched whole google but couldn't find. Is it impossible or can you please provide Tutorial on this?

  • I am following your channel…
    It is very helpful for us… Thanks for sharing the knowlegde…
    Now checkout my channel:
    https://www.youtube.com/channel/UC6kMl0JiGiKZlH9v3FjDlHg?view_as=subscriber
    Give me the feedback so that i will improve my channel just like yours…. Best of luck

  • nice video brother but you dont write the java code and XML in one fully

  • very good tutorial, but the site documentation very poor

  • When I set "showAsAction" to "never" it still expands the SearchView when clicked on it.

  • nice video thx

  • 1:40 search view as a menu item
    3:10 searchable configuration

  • SearchView is prolly the worst widget Android ever offered. It is unnecessarily hard to understand and implement. Almost everything has to be manually programmed. The widget has no sense of its own. And why do we have to make changes in Manifest, why create a Searchable Configuration XML file….why o why? Pl give us a better Search framework and u can do it. U r not just paying enough attention to this rather essential feature.

  • This video saved me after one week debugging

  • is there a way to add a drop down list to the search-view (for example- to let the user limit the number of results, or choose a search radius) ?

  • Tried implementing searchview by following the android developer documentation, and that got me nowhere. Some of the necessary steps aren't mentioned in the doc. Thank god for this tutorial figured out what the documentation failed to mention. A clear and concise video .

  • It is best tutorial.

  • I tried adding search to 1 of the intermediate activity but it doesn't show the search box when the application runs

  • useful tutorial thanks..

  • Is possible to use the searchable configuration into Fragments?

  • can you take a minute and review your video? Review it from a beginer point of view. Guess what? you are not going to understand how it works…..

Leave a Reply

Your email address will not be published. Required fields are marked *