Android – Theming ActionBar and the SearchView within it

Notice!

The contents of this post may not apply if you are using a later version of the support library. The support library has since this posts creation changed how it themes components being shown on lollipop.
Additional information can be found here: Android developers blog

Start

In my latest project I had to theme the ActionBar. This always includes some kind of cursing and frustration for me. Even with my learnings from previous projects I still seem to find new things about this that give me headache.

Previously when I have based my themes on the Holo theme I have used an online generator such as Android Holo Colors Generator. On that page you’ll also find information about the available Android Studio plugin. The same plugin can be found from within Android Studio in the plugin manager.

This time around the generator did not suffice since it couldn’t generate styles for the SearchView.

Below you’ll see the theme I’m aiming for:
intended result

Hands-on

My first instinct was to base my theme on Holo.Light.DarkActionBar. That way I know the widgets in the ActionBar will attain their light version i.e. light text and accents, which is what I want.

The background color was the first obvious feature I needed to change. To achieve this I need to set an ActionBar theme.

If I chose Widget.AppCompat.ActionBar.Solid I got a dark title, which I neither expected nor wanted. To solve this I resorted to using the Widget.AppCompat.Light.ActionBar.Solid.Inverse instead. This works and even though I could have solved it by styling the title I still prefer this approach.

At this point the theme looks like the following:

 

first_result

Not there yet…

As seen in the screenshot above the popup menu still follows the Holo dark theme and we want it to be following the light version. One way to solve this is by adding a ActionBar widget theme. Since the popup is considered a widget applying a custom style here will alter its appearance.

With that applied the theme now looks like this:

 

Finally!

Now the ActionBar is themed properly and I’m happy again :)
Below you’ll find the full theme and the final look. Notice that the the text is selected which is why the text background is dark.

 

actionbar_finished

Conclusions

Theming in Android is not as easy as I would have wanted. Doing something simple as setting an accent color should be a lot simpler. But why they hide attributes of a standard component such as the SearchView alludes me.

This Post Has 31 Comments

  1. How about if you’re not using AppCompat? Is it still posiible to achieve something similar?

    1. That depends on what you mean by similar. If you mean the same look I’d say yes, but if you mean by XML then the answer is no.
      As described in my post you will have to use java reflections to theme these parts of the standard ActionBar.

      It works by fetching the views you want to theme by reflections. For reference I googled one such solution which you can see here: http://novoda.com/blog/styling-actionbar-searchview

      1. Thanks, it’s very interesting post, but I have question:

        what to do when I use custom view in actionbar? My imagebutton’s click works fine if I not apply your style for searchview, but if I do – exceptions comes

        06-17 15:57:07.382: Could not find a method back_onClick(View) in the activity class android.view.ContextThemeWrapper for onClick handler on view class android.widget.ImageButton with id ‘menu_back’

        1. Without seeing your implementation there is only one thing that comes to mind that could be the reason.

          When using the appcompat library you need to specify your xml differently for menu resource files. For reference see: .

          If you look closely you’ll see that they don’t use the android namespace where it is normally used instead they use the yourapp namespace. I think this can be the problem you have.

          Edit:
          It can also be that you extract your custom view the incorrect way. You have to get your ActionView by the following way: MenuItemCompat.getActionView(yourMenuItem);

  2. Thanks, it’s very interesting post, but I have question:

    what to do when I use custom view in actionbar? My imagebutton’s click works fine if I not apply your style for searchview, but if I do – exceptions comes

    06-17 15:57:07.382: Could not find a method back_onClick(View) in the activity class android.view.ContextThemeWrapper for onClick handler on view class android.widget.ImageButton with id ‘menu_back’

    1. I’d need to see more than the exception to fully understand that.
      Do you set the callback in xml or in code? What I suspect is that you did it in the xml.

  3. I got this error android:actionBarWidgetTheme requires API level 14(current min is 11).Any Solution

  4. Great post thanks. Did you have any trouble where the text in the search view edit text now seems to be positioned further up from the edit text line. It makes it look a little off. Any ideas?

    1. I don’t think so. I’d need to see it to draw conclusions. But maybe you accidentally used png from the incorrect resolution. I.e. xhdpi in the hdpi folder? Just an idea that came to mind.

  5. You help me a lot, thank you!

  6. It’s working for me also.

  7. Hello!
    In a project we need to use a medium font, however android doesnt support it. So we use some hack. And its work.
    But now, I want to use your idea, and when I include your mechanics in my solution, I have an error: “Error inflating class android.widget.SearchView$SearchAutoComplete”, in this part of code:
    “view = LayoutInflater.CreateView(name, null, attrs);”.
    Andreas, can you help me with my problem?

    1. From the limited information I have no good answer. It also looks like you are not using the java Android SDK and then it can be issues at even more places.

      If it were regular java code I would look at were you are inflating it and what the exception says.

  8. Thanks for the great write up. You saved me several hours.

  9. Nice work mate , what about Hint Color ?

    1. Thanks :)
      That is not something I needed(from the project that made me create this article) but could have added when I think about it.

      Either way it should be set quite easily with the following attribute:
      android:textColorHint

      in:
      AutoCompleteTextView

      I hope it works and if it does please let me know :)

  10. @color/background

    The background should be image or xml?

    If image, what shouid be its dimensions? Otherwise, how could create the xml?

    Thanks in advance.

  11. I came across your post when looking for a solution for AppCompat v21, as the searchView* attributes no longer exist. Didn’t find anything so I documented the changes on my blog which might be useful to people reading this: https://philio.me/styling-the-searchview-with-appcompat-v21/

    Also, someone mentioned in the comments that android:actionBarWidgetTheme requires API 14. The correct way to access attributes from the AppCompat libraries is to remove the android prefix, the ‘actionBarWidgetTheme’ and equivalents in AppCompat v21 are available in API 7 upwards.

  12. I am new to android, I want to design an action bar as you did, could you possibly give us the steps in order to get it work.
    I have coppied the xml code and pasted it in style but it gives me dozen of errors

    thanks in advance

  13. can we apply this on lower version of android such as API lower than 10, will it support or not ?

  14. How can i change the color of left arrow programatically which is located to the extreme left of action bar, left to the app icon when searchview is opened?

  15. I’m trying to use this solution, but I receive these kind of errors:

    Error:(21, 21) No resource found that matches the given name: attr ‘searchViewAutoCompleteTextView’.
    Error:(19, 21) No resource found that matches the given name: attr ‘searchViewCloseIcon’.
    Error:(18, 21) No resource found that matches the given name: attr ‘searchViewSearchIcon’.
    Error:(20, 21) No resource found that matches the given name: attr ‘searchViewTextField’.

    Any suggestion?
    Thanks.

  16. HI, I have the same proglem and solved it by change
    @style/AutoCompleteTextView
    to
    @style/AutoCompleteTextView

  17. HI, I have the same proglem and solved it by change
    \@style/AutoCompleteTextView\
    to
    \@style/AutoCompleteTextView\

  18. For people facing Error:(21, 21) No resource found that matches the given name: attr ‘searchViewAutoCompleteTextView’.
    The problem happens because you’re using Appcompat v7-21 wish works differently regarding theming. I suggest everybody stick with version 20 of appcompat since version 21 is not yet complete regarding theming of search view.

    1. Thanks for this reply :)
      I’ve had no time and/or opportunity to test this on newer versions my self.

  19. Hey there! If anyone else stumbles upon this and lose his mind, because it does not work, make sure you are not using the Holo.Light.DarkActionBar theme. I was almost going crazy, but finally I changed it to normal Holo.Light and styled the ActionBar like I wanted.

  20. How do you set it now on the newest version of the support library (22.2.1) ?
    I can’t find a way to set the color of the caret of the SearchView EditText.

Leave a Reply

Close Menu