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