Change appcompat's SearchView text and hint color

Question

Does anybody know how to change the text color of the appcompat SearchView? I've spent 2 hours and tried several suggestions from SO and none works.

Here is my code:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:espacios="http://schemas.android.com/apk/res-auto" >

    <item
        android:id="@+id/layer_switcher_button"
        android:icon="@drawable/b_categorias"
        android:title="@string/menu_layer_switcher_title"
        espacios:showAsAction="ifRoom|collapseActionView"/>
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/b_buscar"
        android:title="@string/menu_search_title"
        espacios:actionViewClass="android.support.v7.widget.SearchView"
        espacios:showAsAction="ifRoom|collapseActionView"/>

</menu>

And in my activity I have this:

public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);

    menuItem layerSwitcher = menu.findItem(R.id.layer_switcher_button);
    layerSwitcher.setOnMenuItemClickListener(new OnMenuItemClickListener() {

        @Override
        public boolean onMenuItemClick(MenuItem item) {
        onLayerSwitcherButtonClicked();
            return false;
        }
    });

    MenuItem searchItem = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);

    LinearLayout ll = (LinearLayout) searchView.getChildAt(0);
    TextView textView = (TextView) ll.getChildAt(0);

    textView.setTextColor(R.color.white);
}

Answer 1

SearchView searchView = new SearchView(getContext()); SearchView.SearchAutoComplete theTextArea = (SearchView.SearchAutoComplete)searchView.findViewById(R.id.search_src_text); theTextArea.setTextColor(Color.WHITE);//or any color that you want 

Answer 2

A SearchView object extends from LinearLayout, so it holds other views. The trick is to find the view holding the hint text and change the colour programmatically. By traversing the view hierarchy, you can find the widget containing the hint text:

// get your SearchView with its id
SearchView searchView = (SearchView) menu.findItem(R.id.search).getActionView();
// traverse the view to the widget containing the hint text
LinearLayout ll = (LinearLayout)searchView.getChildAt(0);
LinearLayout ll2 = (LinearLayout)ll.getChildAt(2);
LinearLayout ll3 = (LinearLayout)ll2.getChildAt(1);
SearchView.SearchAutoComplete autoComplete = (SearchView.SearchAutoComplete)ll3.getChildAt(0);
// set the hint text color
autoComplete.setHintTextColor(getResources().getColor(Color.WHITE));
// set the text color
autoComplete.setTextColor(Color.BLUE);

This method works with any theme. Also, you can change the look of other widgets in the SearchView hierarchy, such as the EditText holding the search query.

Answer 3

None of the answers worked for me. What eventually worked was setting a theme on the Toolbar and specifying the textColorHint there.

Theme (in styles.xml):

 <style name="ToolbarTheme">
    <item name="android:textColorHint">@color/white_opacity_60</item>
</style>

Toolbar (in any layout):

<android.support.v7.widget.Toolbar 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ToolbarTheme" />

This works because a when you set a theme to a ViewGroup, its attributes also get applied to all child Views of the ViewGroup. This is one of the differences between a theme and a style :)

Answer 4

It is possible to customize searchview by using appcompat v7 library.I used appcompat v7 library and defined custom style for it. In drawable folder put bottom_border.xml file which looks like this:

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <item>
  <shape >
      <solid android:color="@color/blue_color" />
  </shape>
  </item>
 <item android:bottom="0.8dp"
  android:left="0.8dp"
  android:right="0.8dp">
  <shape >
      <solid android:color="@color/background_color" />
  </shape>
 </item>

 <!-- draw another block to cut-off the left and right bars -->
 <item android:bottom="2.0dp">
  <shape >
      <solid android:color="@color/main_accent" />
  </shape>
  </item>
 </layer-list>

In values folder styles_myactionbartheme.xml:

  <?xml version="1.0" encoding="utf-8"?>
  <resources>
  <style name="AppnewTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowBackground">@color/background</item>
    <item name="android:actionBarStyle">@style/ActionBar</item>
    <item name="android:actionBarWidgetTheme">@style/ActionBarWidget</item>
  </style> 
  <!-- Actionbar Theme -->
  <style name="ActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@color/main_accent</item>
    <!-- <item name="android:icon">@drawable/abc_ic_ab_back_holo_light</item> -->
  </style> 
  <style name="ActionBarWidget" parent="Theme.AppCompat.Light">
    <!-- SearchView customization-->
     <!-- Changing the small search icon when the view is expanded -->
    <!-- <item name="searchViewSearchIcon">@drawable/ic_action_search</item> -->
     <!-- Changing the cross icon to erase typed text -->
  <!--   <item name="searchViewCloseIcon">@drawable/ic_action_remove</item> -->
     <!-- Styling the background of the text field, i.e. blue bracket -->
    <item name="searchViewTextField">@drawable/bottom_border</item>
     <!-- Styling the text view that displays the typed text query -->
    <item name="searchViewAutoCompleteTextView">@style/AutoCompleteTextView</item>        
  </style>

 <style name="AutoCompleteTextView" parent="Widget.AppCompat.Light.AutoCompleteTextView">
    <item name="android:textColor">@color/text_color</item>
  <!--   <item name="android:textCursorDrawable">@null</item> -->
    <!-- <item name="android:textColorHighlight">@color/search_view_selected_text</item> -->
 </style>
 </resources>

I defined custommenu.xml file for displaying menu:

  <menu xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:com.example.actionbartheme="http://schemas.android.com/apk/res-auto" >  

  <item android:id="@+id/search"
      android:title="@string/search_title"
      android:icon="@drawable/search_buttonn"
      com.example.actionbartheme:showAsAction="ifRoom|collapseActionView"
      com.example.actionbartheme:actionViewClass="android.support.v7.widget.SearchView"/>        
  </menu>

Your activity should extend ActionBarActivity instead of Activity. Here is onCreateOptionsMenu method.

  @Override
  public boolean onCreateOptionsMenu(Menu menu) 
  {
      // Inflate the menu; this adds items to the action bar if it is present.
      MenuInflater inflater = getMenuInflater();
      inflater.inflate(R.menu.custommenu, menu);
  }

In manifest file:

  <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppnewTheme" >

For more information see this url:
Here http://www.jayway.com/2014/06/02/android-theming-the-actionbar/

Answer 5

I've created kotlin extension functions

Hint color:

fun SearchView.setHintTextColor(@ColorInt color: Int) {
    findViewById<EditText>(R.id.search_src_text).setHintTextColor(color)
}

Query color:

fun SearchView.setTextColor(@ColorInt color: Int) {
    findViewById<EditText>(R.id.search_src_text).setTextColor(color)
}

Answer 6

Change style of SearchView in Appcompat v21

1) Create a seachable configuration file. This file is traditionally named searchable.xml and must be saved in the res/xml/ project directory.

<?xml version="1.0" encoding="utf-8"?>
<searchable xmlns:android="http://schemas.android.com/apk/res/android"
    android:label="@string/app_label"
    android:hint="@string/search_hint" >
</searchable>

2) Add metadata and attribute to your activity and action to intent-filter in AndroidManifest.xml

<activity
        android:name=".activity.YourActivity"
        android:screenOrientation="portrait"
        android:theme="@style/Theme.App.Base">
        <meta-data android:name="android.app.searchable"
                   android:resource="@xml/searchable"/>
        <intent-filter>
            <action android:name="android.intent.action.SEARCH" />
            <category android:name="android.intent.category.DEFAULT"/>
        </intent-filter>
    </activity>

3) Create styles for indicator, icons, hint and text colors.

<style name="ActionBarThemeOverlay" parent="">
        <item name="android:textColorPrimary">@color/action_bar_text</item>
        <item name="colorControlNormal">@color/action_bar_text</item>
        <item name="colorControlHighlight">@color/body_text_2</item>
    </style>

<style name="Widget.App.SearchView" parent="Widget.AppCompat.Light.SearchView">
    <item name="closeIcon">@drawable/ic_action_cancel</item>
    <item name="voiceIcon">@drawable/ic_action_voice</item>
</style>

4) Add Widget.App.Search to BaseAppTheme added in AndroidManifest as activity style

 <style name="Theme.App.Base" parent="Theme">
    name="searchViewStyle">@style/Widget.App.SearchView</item>
</style>

Add ActionBarThemeOverlay to your toolbar initalization

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_actionbar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/toolbar_height"
    android:background="@color/color_primary"
    app:theme="@style/ActionBarThemeOverlay"
    app:popupTheme="@style/ActionBarPopupThemeOverlay"
    app:subtitleTextAppearance="@style/Theme.ActionBar.SubtitleTextStyle"
    app:titleTextAppearance="@style/Theme.ActionBar.TitleTextStyle"/>