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);
}

Did you try using SearchableInfo? – Aman Gautam Aug 15 '13 at 19:07 — Aman Gautam, Aug 15 '13 at 19:07

score 42 · Answer 1 · answered Oct 15 '13 at 21:01

42

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

answered Oct 15 '13 at 21:01

camanjj

503
7
9

4

Using `android.support.v7.appcompat.R.id.search_src_text` works versus using `R.id.search_src_text`: http://stackoverflow.com/a/18813109/950427 – Jared Burrows May 23 '15 at 18:54
1

@Jared Burrows your addition was helpful! – Matan Dahan Oct 25 '16 at 06:32

score 9 · Answer 2 · answered Mar 11 '14 at 04:09

9

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.

answered Mar 11 '14 at 04:09

jfcartier

1,095
12
20

hey JfCartier, hopefully you could respond, the thing is, the last child im getting (autocomplete..) it's showing up as an ....SearchView$SearchAutoComplete type... which cannot be cast to normal ...SearchView.SearchAutoComplete... (what do those dollar signs mean? – Sebastiaan van Dorst Jan 23 '15 at 13:04
The dollar sign means that it's an inner class, so it is really SearchView.SearchAutoComplete. What error are you getting? – jfcartier Jan 23 '15 at 21:15
well it just wont cast to a search autocomplete.. unable to cast etc...! as if it's another object! – Sebastiaan van Dorst Jan 26 '15 at 23:27
it may be a problem of android.widget.SearchView vs android.support.v7.widget.SearchView. Make sure to be consistent in the code where you cast and in the menu XML file. – jfcartier Jan 27 '15 at 04:05
1

A more reliable method is just to do findById(R.id.search_src_text). AppCompat's SearchView can have any arbitrary particular layout, but the text field must be identified by R.id.search_src_text. – David Liu Mar 12 '15 at 17:52
I think this is a bad approach to use getChildAt(..). Not safety and not a good style. The way with using findById(..) is better – smbd uknow Oct 14 '15 at 08:12
Not safe for future updates! Good hack but not suggested to get the indexes and assume that they will always be positioned in the same way. – sud007 May 09 '17 at 10:10
sud007 - I completely agree – jfcartier May 10 '17 at 14:33

score 9 · Answer 3 · answered Jun 24 '16 at 18:04

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

score 3 · Answer 4 · answered Sep 22 '14 at 11:29

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/

georgehardcore · Answer 5 · 2016-06-09T08:05:32.850

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

This is one awesome way to achieve the SearchView theme. Just create a style and Apply it to the Toolbar! Worked like a charm! — sud007, May 09 '17 at 10:09

score 1 · Answer 6 · answered Mar 03 '21 at 17:52

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

score 0 · Answer 7 · answered Feb 20 '17 at 09:51

Another Solution:

 searchView_SA = (SearchView) findViewById(R.id.searcvViewSA);
 EditText searchEditText = (EditText)searchView_SA.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    searchEditText.setTextColor(getResources().getColor(R.color.black));
    searchEditText.setHintTextColor(getResources().getColor(R.color.black));

score 0 · Answer 8 · edited Feb 17 '21 at 16:49

Check this out: Link

This worked great for me:

Android.Widget.SearchView searchView = (Android.Widget.SearchView)FindViewById(Resource.Id.TxtSearchMaterial);
LinearLayout linearLayout1 = (LinearLayout)searchView.GetChildAt(0);
LinearLayout linearLayout2 = (LinearLayout)linearLayout1.GetChildAt(2);
LinearLayout linearLayout3 = (LinearLayout)linearLayout2.GetChildAt(1);
AutoCompleteTextView autoComplete = (AutoCompleteTextView)linearLayout3.GetChildAt(0);
autoComplete.SetTextColor(Color.White);

Change appcompat's SearchView text and hint color

8 Answers8

I've created kotlin extension functions

Linked