Search code examples
androidandroid-actionbarandroid-support-librarysearchviewcaret

How to customize the color of the caret of the expanded-search-action-item?

Background

I've made a few adjustments to my tiny app, so that it would follow the material design guidelines better.

The problem

I have a search action item, and the action bar is blue, but when clicking the search action item, I can barely see the caret (where the text is being entered).

I would like to change it, maybe to white (like the text color).

What I've tried

I've tried looking at the code of the support library, searching for a function that will allow me to customize the caret's color, but I couldn't find a working solution.

I've tried to use "searchViewStyle" as one of the theme's items, and create a new style:

<style name="AppTheme.SearchViewStyle" parent="Widget.AppCompat.SearchView">
...

But none of what I've found seem fit for this.

The weird thing is that when using "Theme.AppCompat.Light" instead of "Theme.AppCompat.Light.DarkActionBar" , the caret's color has changed (to green).

The question

How do I change the color of the text caret of the search action item (AKA SearchView) ?

EDIT: I've found out that it's possible to set "colorControlActivated" for the toolbar, as such:

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="actionBarTheme">@style/AppTheme.ActionBarTheme</item>
.... 

<style name="AppTheme.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlActivated">#FFffffff</item>
</style>

Seems to work, but does it affect other things, except for the caret of the search item? If so, which ones? and is it possible to affect only the caret ?

Solution

  • Per official design guidelines, caret should be tinted (API>21) with the reference in android:colorControlActivated (colorControlActivated through support-v7). As you discovered it is automatically tinted like so.

    colorControlActivated is used by default in several widgets. As the name suggest, it will be the color of:

    • an activated CheckBox;
    • a focused EditText;
    • selected RadioButtons;

    and so on. I can't recall all places it is used in, but if you managed to apply it to the toolbar only, it shouldn't have any other application than the widgets you put in your Menu (the SearchView for example). It could (not sure) have some impact on contextual action bars.

    If you want to have full control over the caret, you could also provide your own drawable:

    <item name="android:textCursorDrawable">@drawable/my_drawable</item>

    This works for API>12.