How to style the cursor color of SearchView under AppCompat

问题

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.

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

回答2:

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>

回答3:

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>

回答4:

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

回答5:

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.

来源：https://stackoverflow.com/questions/27730253/how-to-style-the-cursor-color-of-searchview-under-appcompat

标签

android

android-appcompat

android-styles