Photo by Markus Winkler on Unsplash

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 of SearchEditText,
• Set the imeOptions of SearchEditText to IME_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…