Styling the ActionBar SearchView

Community and public speaking lover. When not coding, you'll find me running through Regent's canal in London, cycling to Windsor or cooking at home with my lovely wife.

By now you should be into Holo. If you are not, there’s still hope, but don’t say we didn’t warn you. Now that we are all on the same page, delivering the most holofied style application is our perogative and we want to give the user the best Android experience possible. But sometimes creating a Holo theme to the letter is not altogether simple simple.

Most of the views are very easy to customize but we can occasionally find that some UI elements don’t play well with the theme. See the below example of the search view.

Initial image

So, you want to style the SearchView?

Initial image

As of my writing this, it is not yet possible to style the SearchView from the xml. Assuming you’ve followed all the steps from the guidelines your options menu xml wil look like this:

We can set the icon which appears in the ActionBar via xml and it would be super nice to continue workign in xml?

No, that would be just too easy.

Using reflections ... yes, reflections

We can figure out the id of the resources and the declared fields we want to have access to from the Android source code of the SearchView.

This is how the magic works, if we override onCreateOptionsMenu we have full access to the SearchView and by that, we can modify the attributes we want.

Initial image

What just happened?

By doing this we have just changed the background resource of the EditText on the SearchView. We also changed the EditText text colour and, to give a context to everything, we made the action button of the keyboard to show a nice search icon.
Note that this won't work if you are using ActionBarSherlock, since the searchView doesn't have the same id:

We could continue customizing all the items following this pattern, this is what we'll do for now:

Initial image

Same as before, if you are using ActionBarSherlock there are some different id's.

Pulling it all together

Initial image

Using reflection we can now access all the declared fields inside the SearchView. If you fancy, fork the repo and use it at your own risk!

About Novoda

We plan, design, and develop the world’s most desirable Android products. Our team’s expertise helps brands like Sony, Motorola, Tesco, Channel4, BBC, and News Corp build fully customized Android devices or simply make their mobile experiences the best on the market. Since 2008, our full in-house teams work from London, Liverpool, Berlin, Barcelona, and NYC.

Let’s get in contact