Turning an EditText Into a SearchEditText
Have you ever tried to customize the appearance or behavior of aSearchView
? Probably yes. Some customizations are pretty easy to do, but others are not that straightforward. If you want to have full control, then writing a custom view to replace aSearchView
is one way to go. Writing such a view is not only educational but also fun!
Note: the custom view (from the hereafter SearchEditText
) we are going to write will not have all the options available by a SearchView
, but adding more options would not be difficult when you get the hang of it.
Things to Do
There are several things we need to do to transform an EditText
into aSearchEditText
. In a nutshell, we need to:
- Inherit from
AppCompatEditText
, - Add a Search icon to the left (or right) of
SearchEditText
that when clicked, passes the search query to the registered listener, - Add a Clear icon to the right (or left) of
SearchEditText
so that when clicked, clears the text ofSearchEditText
, - Set the
imeOptions
ofSearchEditText
toIME_ACTION_SEARCH
so that when the keyboard appears, instead of an enter button, there is a search button.
In the next section, I will show you the full source code of SearchEditText
, and in the remaining ones, I will…