How to style the cursor color of SearchView under AppCompat

Question

My SearchView is android.support.v7.widget.SearchView and AppTheme is showed below.

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/color_accent</item>
</style>

<style name="AppTheme" parent="AppBaseTheme">
</style>

The color of SearchView seems strange, its cursor and bottom line showed white and trans to the accent color quickly, how to deal with it? I want to make the cursor and bottom line stay white.

possible duplicate of [Changing the cursor color in SearchView without ActionBarSherlock](http://stackoverflow.com/questions/18705185/changing-the-cursor-color-in-searchview-without-actionbarsherlock) — Sufian, Apr 20 '15 at 10:30
[This answer](http://stackoverflow.com/a/19796417/1276636) did the trick for me. — Sufian, Apr 20 '15 at 10:32

score 75 · Answer 1 · edited Nov 28 '16 at 06:36

75

After alot of experimentation, I was finally able to change the cursor color by using the autoCompleteTextViewStyle attribute, along with a custom cursor Drawable. Modifying the code you provided in the example, you would do something like the following. First, you add the aforementioned attribute to your main theme as follows:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/color_accent</item>
    <item name="autoCompleteTextViewStyle">@style/cursorColor</item>
</style>

You then create the style for "cursorColor" which will reference the cursor Drawable that you will create (next step):

<style name="cursorColor" parent="Widget.AppCompat.AutoCompleteTextView">
        <item name="android:textCursorDrawable">@drawable/cursor</item>
</style>

The final thing to do is to to create the cursor drawable (cursor.xml) that will be used as the replacement cursor:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#FFFFFF" />
    <size android:width="1dp" />
</shape>

This is what the cursor looks like before and after applying the new theme, respectively...

Before

enter image description here

After

enter image description here

As a final note, you can always alter the width and color of the new cursor by modifying appropriate fields in your Drawable:

<!-- Change this to increase the width -->
<size android:width="1dp"/>
<!-- Change this to change the color -->
<solid android:color="#FFFFFF" />

edited Nov 28 '16 at 06:36

Bulwinkel

2,111
25
23

answered Feb 04 '15 at 00:23

Willis

5,308
3
32
61

6

this code has no effect @drawable/cursor is enough – Rahul Mar 13 '15 at 12:11
1

Note that this is the official solution recommended by Google as well - see https://code.google.com/p/android/issues/detail?id=182516. Thanks for this! – Sean Barbeau Sep 02 '15 at 16:23
8

instead of `@style/cursorColor` try to use `@style/cursorColor` – user3473445 Jul 08 '16 at 21:16
android:textCursorDrawable is for Api 12+. – wangqi060934 Jul 27 '16 at 09:28
1

This seems to have stopped working for me. Has anyone else had this problem? See https://github.com/OneBusAway/onebusaway-android/issues/718 for details. – Sean Barbeau Feb 27 '17 at 16:45
@Plinzen on Github pointed out that my problem was including `android:` with `autoCompleteTextViewStyle` - it should be `@style/cursorColor`, without the `android:` prefix. Also mentioned by @user3473445 above. – Sean Barbeau Apr 17 '18 at 15:46
Does this change also affect the cursor of EVERY other editText on the app? If it does, it's not a good solution... – acrespo May 18 '18 at 22:29
@acrespo seems it does from my personal experiment and that sucks... however, can't find a better solution for now :/ – Simon Ninon Sep 26 '18 at 21:48
How would I proceed if I wanted to change the color of the pointers that appear whenever I select some text? [Example](https://i.imgur.com/iAd3ewi.png) – Rezic Oct 09 '18 at 16:31
The is called a perfect solution. Great job. – Faisal Shaikh Dec 17 '18 at 15:46

score 30 · Answer 2 · answered Dec 10 '15 at 17:10

I solved this quite simply by adding a colorAccent specifically to my toolbar theme, which was different to the colorAccent on the rest of my app.

eg. For the app base, I have a certain accent color that I want throughout the app:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/color_accent</item>
</style>

And then for my toolbar, which contains the searchview, I have setup an android theme:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/toolBarBackgroundColor"
    android:theme="@style/ToolbarStyle"
    app:popupTheme="@style/ThemeOverlay.AppCompat" />

Within that toolbar theme, I use another color accent to specifically color the accented elements (which is only the cursor in my case) in the toolbar:

<style name="ToolbarStyle" parent="@style/ThemeOverlay.AppCompat.ActionBar">
    ...
    <item name="colorAccent">@color/cursorAccent</item>
</style>

this solution is not good since you cannot add theme to widgets, only to activities or application. Taken from Android documentation: https://developer.android.com/guide/topics/ui/themes.html — Nativ, Jul 21 '16 at 10:05
@Nativ Thanks for your reply. When they released AppCompat v21, Google specifically described how to theme the support toolbar in their blog post. It uses the same theme approach. http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html. That said, I acknowledge that the original question was asking about the SearchView specifically, and this answer is tailored to SearchView within Toolbar (Though it may work with a standalone SearchView, I haven't tried). The blog post suggests, however, that the "you cannot add theme to widgets" guideline is not always true. — tabjsina, Jul 21 '16 at 19:57
thank you for great explanation. Android could be so confusing sometimes — Nativ, Jul 22 '16 at 08:45

score 24 · Answer 3 · answered May 11 '15 at 07:33

24

If all you want to change is the color of the caret/cursor of the search-editText , you can use this :

<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>

answered May 11 '15 at 07:33

android developer

114,585
152
739
1,270

9

Not an efficient way. It effects a lot of UI element – Göksel Güren Mar 14 '16 at 20:25
1

@GökselGüren but you can add this theme to particular view. This solution is fine then. – PrzemekTom Feb 05 '20 at 17:05
@GökselGüren Use it only when and where you wish. You don't have to actually set it as the app's theme... It was just an example – android developer Feb 05 '20 at 17:25

score 11 · Answer 4 · edited May 21 '19 at 14:35

11

How I solved it.

My SearchView code:

<android.support.v7.widget.SearchView
                android:id="@+id/searchView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/WallSearchView"
                app:queryHint="@string/action_search"
                app:searchIcon="@drawable/ic_search" />

And my WallSearchView style is:

<style name="WallSearchView" parent="Widget.AppCompat.SearchView">
        ...
        <item name="iconifiedByDefault">false</item>
        <item name="colorControlActivated">#FFffffff</item>
    </style>

**note: its only for v21 and above.

edited May 21 '19 at 14:35

Rohan Pawar

1,875
22
40

answered Oct 27 '17 at 14:05

Anand Kumar

1,439
1
15
22

Your are using v7 or androidx libraries. – Anand Kumar Jul 29 '19 at 09:07
I'm using androidx – Heath Borders Jul 29 '19 at 14:56
Sorry Bro this answer works only with v7 support libraries, I have not tested with the new androidx libraries. – Anand Kumar Jul 31 '19 at 06:21
@HeathBorders FYI. – Anand Kumar Apr 27 '20 at 11:54
Unfortunately this doesn't work for the AndroidX version of SearchView (or I might be doing something wrong). – Bip901 Jan 19 '21 at 10:23

score 8 · Answer 5 · answered Nov 26 '18 at 17:37

This simple solution worked for me:

1 - Define a style in your Styles.xml file

<style name="WhiteCursorSearchView" parent="Widget.AppCompat.SearchView">
    <item name="colorControlActivated">#FFFFFF</item>
</style>

2- Apply that style to your SearchView

<android.support.v7.widget.SearchView
    android:id="@+id/search"
    android:theme="@style/WhiteCursorSearchView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:iconifiedByDefault="false" />

How to style the cursor color of SearchView under AppCompat

5 Answers5

Linked