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.

Answer 1

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

After

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

Answer 2

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>