CODEWITHSUNDEEP
androidandroid-toolbarsearchview
CACuzcatlan
CACuzcatlan

Reputation: 5497

Is it possible to change the textcolor on an Android SearchView?

The SearchView element doesn't have any properties for changing the text color. The default text color is black and doesn't work on our dark background. Is there a way to change the color of the text without resorting to hacks?

I found this similar question related to changing the text size, but so far, it doesn't have any answers: How to set SearchView TextSize?

Upvotes: 145

Views: 111924

Answers (30)

Volkan
Volkan

Reputation: 1

My solution code:

SearchView.SearchAutoComplete searchAutoComplete =
searchView.findViewById(androidx.appcompat.R.id.search_src_text);

searchAutoComplete.setTextColor(Color.WHITE);

Upvotes: 0

Udula Damsara
Udula Damsara

Reputation: 1

This works for me. *Kotlin

   val searchEditText = searchView.findViewById<View>(androidx.appcompat.R.id.search_src_text) as EditText
        searchEditText.setTextColor(getColor(R.color.appBarItemColor))

Use androidx.appcompat.R.id.search_src_text if you've migrated your project to AndroidX. if not use android.support.v7.appcompat.R.id.search_src_text

Upvotes: 0

Daniel Valencia
Daniel Valencia

Reputation: 697

With Kotlin ad AndroidX, just try the following:

val id: Int = binding.searchView.context
        .resources
        .getIdentifier("android:id/search_src_text", null, null)
val editText: EditText = binding.searchView.findViewById(id)
editText.setTextColor(Color.BLUE)
editText.setHintTextColor(Color.BLACK)

Upvotes: 1

Ahmad Salman
Ahmad Salman

Reputation: 163

Kotlin way of changing text/hint color using extension

fun SearchView.changeColors(color: Int) {
    val editText = this.findViewById<EditText>(androidx.appcompat.R.id.search_src_text)
    editText.setTextColor(ContextCompat.getColor(context, color))
    editText.setHintTextColor(ContextCompat.getColor(context, color))
}

Upvotes: 1

akdotcom
akdotcom

Reputation: 4687

Add

<item name="android:editTextColor">@android:color/white</item>

to the parent theme and that should change the entered text. You can also use

<item name="android:textColorHint">@android:color/white</item>

to change the hint text color for the SearchView. (Note that you can replace the @android:color/white with whatever appropriate value you're hoping to use)

Upvotes: 144

ELTeleco
ELTeleco

Reputation: 88

This works for me, if you use androidx.appcompat.widget.SearchView apply androidx.appcompat.R.id.search_src_text to identify the searchview, no returns null in the textView

    TextView textView = (TextView) searchView.findViewById(androidx.appcompat.R.id.search_src_text);
    textView.setTextColor(Color.RED);
    textView.setHintTextColorstrong text(Color.RED);

Upvotes: 4

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363895

You can override the default color using the android:theme attribute in the View.

If you are using a Toolbar or MaterialToolbar:

<com.google.android.material.appbar.MaterialToolbar
    android:theme="@style/ThemeOverlay.Toobar"
    ...>

or:

<androidx.appcompat.widget.Toolbar
    android:theme="@style/ThemeOverlay.Toobar"
    ...>

where the Theme overlay with a Material Components Theme is:

<style name="ThemeOverlay.Toobar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- Text color -->
    <item name="android:editTextColor">@color/....</item>
    <!-- Hint text color -->
    <item name="android:textColorHint">@color/...</item>
</style>

with an AppCompat theme:

<style name="ThemeOverlay.Toobar" parent="ThemeOverlay.AppCompat.Light.*">
    <!-- Text color -->
    <item name="android:editTextColor">@color/....</item>
    <!-- Hint text color -->
    <item name="android:textColorHint">@color/...</item>
</style>

enter image description here

If you are using a SearchView in your layout you can do something similar:

   <androidx.appcompat.widget.SearchView
       android:theme="@style/ThemeOverlay.SearchView"

with

   <style name="ThemeOverlay.SearchView" parent="">
        <!-- Text color -->
        <item name="android:editTextColor">@color/...</item>
        <!-- Hint text color -->
        <item name="android:textColorHint">@color/...</item>
    </style>

enter image description here

Upvotes: 18

zankoav
zankoav

Reputation: 101

if you use - android.support.v7.widget.SearchView

SearchView searchView = (SearchView) item.getActionView();
EditText editText = (EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
editText.setTextColor(Color.WHITE);

in Kotlin

val searchView = SearchView(this)
val editText = searchView.findViewById<EditText>(androidx.appcompat.R.id.search_src_text)
editText.setTextColor(Color.WHITE)

You should rather start using androidx support libraries now

Upvotes: 10

Ali Al Fayed
Ali Al Fayed

Reputation: 514

For Kotlin Language

    searchView = view.findViewById(R.id.searchView_Contacts)
    // change color
    val id = searchView.context.resources
        .getIdentifier("android:id/search_src_text", null, null)

    val textView = searchView.findViewById<View>(id) as TextView

    textView.setTextColor(Color.WHITE)

Upvotes: 0

user2333
user2333

Reputation: 11

change searchView style in toolbar with androidx.

firstly,set search view style in your toolbar Style (change parent them with your own app base them):

     <!-- toolbar style -->
      <style name="ToolbarStyle" parent="Theme.AppCompat.Light.NoActionBar">     
          <!-- search view about -->
          <item name="android:editTextColor">@color/colorWhitePrimaryText</item>
          <item name="android:textColorHint">@color/colorWhiteSecondaryText</item>
          <item name="android:textCursorDrawable">@drawable/drawable_cursor_white</item>
          <item name="closeIcon">@mipmap/ic_close</item>
          <item name="searchHintIcon">@mipmap/ic_search_white</item>
          <item name="searchIcon">@mipmap/ic_search_white</item>
          <item name="android:longClickable">false</item>
          <item name="android:queryHint">@string/toolbar_search</item>
      </style>

then, use it in your toolbar layout:

android:theme="@style/ToolbarStyle"

with this, you can change most style of searchView except for query hint.

finally set query hint at your toolbar menu's options:

toolbar.setOnMenuItemClickListener(item -> {
        switch (item.getItemId()){
            case R.id.toolbar_search:
                SearchView searchView = (SearchView) item.getActionView();
                searchView.setQueryHint("default query");
                searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
                    @Override
                    public boolean onQueryTextSubmit(String query) {
                        return false;
                    }

                    @Override
                    public boolean onQueryTextChange(String newText) {
                        return false;
                    }
                });
                return true;
                default:
                    return false;
        }

Upvotes: 1

CoolMind
CoolMind

Reputation: 28793

Thanks to @CzarMatt I added AndroidX support.

For me the following works. I used a code from a link: Change text color of search hint in actionbar using support library.

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

    EditText txtSearch = ((EditText)searchView.findViewById(androidx.appcompat.R.id.search_src_text));
    txtSearch.setHint(getResources().getString(R.string.search_hint));
    txtSearch.setHintTextColor(Color.LTGRAY);
    txtSearch.setTextColor(Color.WHITE);

Changing action bar searchview hint text color advices another solution. It works but sets only hint text and color.

    searchView.setQueryHint(Html.fromHtml("<font color = #ffffff>" + getResources().getString(R.string.search_hint) + "</font>"));

Upvotes: 36

Suneet Srivastava
Suneet Srivastava

Reputation: 571

What worked for me 

((EditText)searchView.findViewById(R.id.search_src_text)).setTextColor(getResources().getColor(R.color.text));

Upvotes: 0

Hamza Awwad
Hamza Awwad

Reputation: 163

it works with me

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    MenuItem searchItem = menu.findItem(R.id.action_search);
    EditText searchEditText = (EditText) searchView.getActionView().findViewById(android.support.v7.appcompat.R.id.search_src_text);
    searchEditText.setTextColor(getResources().getColor(R.color.white));
    searchEditText.setHintTextColor(getResources().getColor(R.color.white));
    return super.onPrepareOptionsMenu(menu);
}

Upvotes: 0

Fabio Guerra
Fabio Guerra

Reputation: 722

Change color of typed text:

((EditText)((SearchView)findViewById(R.id.searchView)).findViewById(((SearchView)findViewById(R.id.searchView)).getContext().getResources().getIdentifier("android:id/search_src_text", null, null))).setTextColor(Color.WHITE);

Change color of hint text:

((EditText)((SearchView)findViewById(R.id.searchView)).findViewById(((SearchView)findViewById(R.id.searchView)).getContext().getResources().getIdentifier("android:id/search_src_text", null, null))).setHintTextColor(Color.LTGRAY);

Upvotes: 3

DynamicMind
DynamicMind

Reputation: 4258

Yes it is possible using following method.

public static EditText setHintEditText(EditText argEditText, String argHintMessage, boolean argIsRequire) {
    try {
        if (argIsRequire) {
            argHintMessage = "   " + argHintMessage;
            //String text = "<font color=#8c8c8c>"+argHintMessage+"</font> <font color=#cc0029>*</font>";
            String text = "<font color=#8c8c8c>" + argHintMessage + "</font>";
            argEditText.setHint(Html.fromHtml(text));
        } else {
            argEditText.setHint(argHintMessage);
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return argEditText;
}

Calling of this method look like this..

metLoginUserName=(EditText)this.findViewById(R.id.etLoginUserName);
    metLoginPassword=(EditText)this.findViewById(R.id.etLoginPassword);

    /**Set the hint in username and password edittext*/
    metLoginUserName=HotSpotStaticMethod.setHintEditText(metLoginUserName, getString(R.string.hint_username),true);
    metLoginPassword=HotSpotStaticMethod.setHintEditText(metLoginPassword, getString(R.string.hint_password),true);

using it i have successfully add red color * mark in hint using this method. You should change this method according to your requirement. I hope its helpful to you ....:)

Upvotes: 4

Qais
Qais

Reputation: 1

This Way :) 

View searchPlate = searchView.findViewById(searchPlateId);
if (searchPlate!=null) {
    searchPlate.setBackgroundColor(Color.DKGRAY);
    int searchTextId = searchPlate.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
    TextView searchText = (TextView) searchPlate.findViewById(searchTextId);
    if (searchText != null) {
        searchText.setTextColor(Color.WHITE);
        searchText.setHintTextColor(Color.WHITE);
    }
}
return ;
}

Upvotes: -2

Sharad
Sharad

Reputation: 607

Most cleanest way is:

Toolbar uses theme ThemeOverlay.AppCompat.Dark.Actionbar.

Now make child of it like:

toolbarStyle parent "ThemeOverlay.AppCompat.Dark.Actionbar"

add this item in that style

item name "android:editTextColor">yourcolor

Done.

One more very important thing is, in toolbar put the layout_height ="?attr/actionbarSize". By default it is wrap_content.For me text was not even visible in searchview it fixed that problem.

Upvotes: 4

Arbitur
Arbitur

Reputation: 39081

Create a Style for your Toolbar

<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="android:editTextColor">@color/some_color</item>
</style>

And set it as the theme for the Toolbar

<android.support.v7.widget.Toolbar
    android:theme="@style/AppTheme.Toolbar"
    ...

Upvotes: 8

Mohamed
Mohamed

Reputation: 1271

Wow. A lot of answer. It gets color value from your primary color.

Change it, and its done!

@Override
public void onResume() {
    super.onResume();
    getActivity().setTheme(R.style.YourTheme_Searching);
}

Styles;

<style name="YourTheme.Searching" parent="YourTheme">
    <item name="android:textColorPrimary">@android:color/white</item>
</style>

Upvotes: 1

Krishna Mohan Singh
Krishna Mohan Singh

Reputation: 327

this is working for me.

final SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);

searchView.setOnQueryTextListener(this);   
searchEditText = (EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchEditText.setTextColor(getResources().getColor(R.color.white));
searchEditText.setHintTextColor(getResources().getColor(R.color.white));

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) 
{
    searchEditText.setBackgroundColor(getResources().getColor(R.color.c_trasnparent));
    searchEditText.setGravity(Gravity.CENTER);
    searchEditText.setCompoundDrawables(null,null,R.drawable.ic_cross,null);
}

Upvotes: 3

oldergod
oldergod

Reputation: 15010

You can do so by setting the editTextColor attribute in the style.

<style name="SearchViewStyle" parent="Some.Relevant.Parent">
    <item name="android:editTextColor">@color/some_color</item>
</style>

and you apply this style to Toolbar or the SearchView in the layout.

<android.support.v7.widget.Toolbar
    android:theme="@style/SearchViewStyle">

    <android.support.v7.widget.SearchView />

</android.support.v7.widget.Toolbar>

Upvotes: 16

Juan Jos&#233; Melero G&#243;mez
Juan Jos&#233; Melero G&#243;mez

Reputation: 2789

Casting the SearchView to TextView allows you to use TextView's methods to change its colour:

((TextView) searchView).setTextColor(Color.WHITE);
((TextView) searchView).setHintTextColor(Color.WHITE);

Upvotes: -3

Dhriti
Dhriti

Reputation: 31

By using this I was able to change the typed color text in search view

AutoCompleteTextView typed_text = (AutoCompleteTextView) inputSearch.findViewById(inputSearch.getContext().getResources().getIdentifier("android:id/search_src_text", null, null));
typed_text.setTextColor(Color.WHITE);

Upvotes: 1

user2331095
user2331095

Reputation: 6707

This works for me.

SearchView searchView = (SearchView) findViewById(R.id.search);
EditText searchEditText = (EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchEditText.setTextColor(getResources().getColor(R.color.white));
searchEditText.setHintTextColor(getResources().getColor(R.color.white));

Upvotes: 75

Srinivasan
Srinivasan

Reputation: 4661

Yes we can,

SearchView searchView = (SearchView) findViewById(R.id.sv_symbol);

To apply the white color for the SerachView Text,

int id = searchView.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
TextView textView = (TextView) searchView.findViewById(id);
textView.setTextColor(Color.WHITE);

Happy coding !!!!

Upvotes: 3

straya
straya

Reputation: 5059

for appcompat-v7 Toolbar with searchView (provided via MenuItemCompat):

Setting the Toolbar theme to @style/ThemeOverlay.AppCompat.Light will yield dark color (black) for the hint text and for the entered text, but won't affect the cursor* color. Accordingly, setting the Toolbar theme to @style/ThemeOverlay.AppCompat.Dark will yield light color (white) for the hint text and the entered text, the cursor* will be white anyway.

Customising the above themes:

android:textColorPrimary --> color of the entered text

editTextColor --> color of the entered text (will override the affect of android:textColorPrimary if set)

android:textColorHint --> color of the hint

*note: Am yet to determine how the Cursor color can be controlled (without using the reflection solution).

Upvotes: 1

LukeWaggoner
LukeWaggoner

Reputation: 8909

If you're using the android.support.v7.widget.SearchView, it's possible without having to use reflection.

Here's how I'm doing it in my app:

EditText text = (EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
ImageView searchCloseIcon = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
View searchPlate = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);

if (searchPlate != null) {
    searchPlate.setBackgroundResource(R.drawable.search_background);
}

if (text != null){
    text.setTextColor(resources.getColor(R.color.white));
    text.setHintTextColor(getResources().getColor(R.color.white));

    SpannableStringBuilder magHint = new SpannableStringBuilder("  ");
    magHint.append(resources.getString(R.string.search));

    Drawable searchIcon = getResources().getDrawable(R.drawable.ic_action_view_search);
    int textSize = (int) (text.getTextSize() * 1.5);
    searchIcon.setBounds(0, 0, textSize, textSize);
    magHint.setSpan(new ImageSpan(searchIcon), 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

    // Set the new hint text
    text.setHint(magHint);

}

if (searchCloseIcon != null){
    searchCloseIcon.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_close));
}

They don't expose the ids publicly for the non appcompat SearchView, but they do for AppCompat if you know where to look. :)

Upvotes: 6

leafartist
leafartist

Reputation: 623

I found a solution from a blog post. See here.

Basically you style searchViewAutoCompleteTextView and have android:actionBarWidgetTheme inherit the style.

Upvotes: 0

Suhas Patil
Suhas Patil

Reputation: 131

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/

Upvotes: 1

Ferran Maylinch
Ferran Maylinch

Reputation: 11529

I wanted to do something similar. I finally had to find the TextView among the SearchView children:

for (TextView textView : findChildrenByClass(searchView, TextView.class)) {
    textView.setTextColor(Color.WHITE);
}

If you want the util method:

public static <V extends View> Collection<V> findChildrenByClass(ViewGroup viewGroup, Class<V> clazz) {

    return gatherChildrenByClass(viewGroup, clazz, new ArrayList<V>());
}

private static <V extends View> Collection<V> gatherChildrenByClass(ViewGroup viewGroup, Class<V> clazz, Collection<V> childrenFound) {

    for (int i = 0; i < viewGroup.getChildCount(); i++)
    {
        final View child = viewGroup.getChildAt(i);
        if (clazz.isAssignableFrom(child.getClass())) {
            childrenFound.add((V)child);
        }
        if (child instanceof ViewGroup) {
            gatherChildrenByClass((ViewGroup) child, clazz, childrenFound);
        }
    }

    return childrenFound;
}

Upvotes: 27

Related Questions