Cambiar el fondo dibujable del widget de vista de búsqueda

Estoy tratando de cambiar el dibujo que se encuentra en el widget de vista de búsqueda de la barra de acción de Android.

Actualmente se ve así:

pero necesito cambiar el fondo azul dibujable a rojo.

He intentado muchas cosas antes de lanzar mi propio widget de búsqueda, pero nada parece funcionar.

¿Alguien puede señalarme en la dirección correcta para cambiar esto?

Introducción

Desafortunadamente, no hay forma de establecer el SearchViewestilo de campo de texto usando temas, estilos y herencia en XML, como puede hacer con el fondo de los elementos en el menú desplegable de ActionBar . Esto se debe a que selectableItemBackground está catalogado como styleable en R.stylable, mientras que searchViewTextField(atributo tema que nos interesa) no lo es. Por lo tanto, no podemos acceder fácilmente desde los recursos XML (obtendrá un No resource found that matches the given name: attr 'android:searchViewTextField'error).

Establecer el fondo del campo de texto SearchView desde el código

Por lo tanto, la única forma de sustituir adecuadamente el fondo del SearchViewcampo de texto es entrar en sus componentes internos, obtener acceso a la vista que tiene un fondo establecido searchViewTextFieldy establecer el nuestro.

NOTA: La solución a continuación depende solo de la identificación ( android:id/search_plate) del elemento interno SearchView, por lo que es más independiente de la versión del SDK que el recorrido secundario (por ejemplo, searchView.getChildAt(0)para obtener la vista correcta interna SearchView), pero no es a prueba de balas. Especialmente si algún fabricante decide volver a implementar SearchViewelementos internos y el elemento con la identificación mencionada anteriormente no está presente, el código no funcionará.

En SDK, el fondo para el campo de texto SearchViewse declara a través de nueve parches , por lo que lo haremos de la misma manera. Puede encontrar imágenes png originales en el directorio drawable-mdpi del repositorio git de Android . Estamos interesados ​​en dos imágenes. Uno para el estado cuando el campo de texto está seleccionado (llamado textfield_search_selected_holo_light.9.png ) y otro para donde no está (llamado textfield_search_default_holo_light.9.png ).

Desafortunadamente, tendrá que crear copias locales de ambas imágenes, incluso si desea personalizar solo el estado enfocado . Esto se debe a textfield_search_default_holo_lightque no está presente en R.drawable . Por lo tanto, no se puede acceder fácilmente a través de él @android:drawable/textfield_search_default_holo_light, que podría usarse en el selector que se muestra a continuación, en lugar de hacer referencia al dibujo local.

NOTA: Estaba usando el tema Holo Light como base, pero puedes hacer lo mismo con Holo Dark . Parece que no hay una diferencia real en el estado seleccionado de 9 parches entre los temas claros y oscuros . Sin embargo, hay una diferencia en 9 parches para el estado predeterminado (ver Claro vs Oscuro ). Por lo tanto, probablemente no sea necesario hacer copias locales de 9 parches para el estado seleccionado , tanto para temas oscuros como claros (suponiendo que desee manejar ambos, y hacer que ambos se vean igual que en Holo Theme ). Simplemente haga una copia local y úsela enselector extraíble para ambos temas.

Ahora, deberá editar los nueve parches descargados según sus necesidades (es decir, cambiar el color azul a rojo). Puede echar un vistazo al archivo con la herramienta de dibujar 9 parches para verificar si está correctamente definido después de su edición.

He editado archivos usando GIMP con la herramienta de lápiz de un píxel (bastante fácil) pero probablemente usará la herramienta propia. Aquí está mi parche personalizado de 9 para el estado enfocado :

NOTA: Para simplificar, solo he usado imágenes para densidad mdpi . Tendrá que crear 9 parches para múltiples densidades de pantalla si desea el mejor resultado en cualquier dispositivo. Las imágenes para Holo SearchView se pueden encontrar en mdpi , hdpi y xhdpi dibujables .

Ahora, necesitaremos crear un selector dibujable, para que se muestre la imagen adecuada según el estado de la vista. Crear archivo res/drawable/texfield_searchview_holo_light.xmlcon el siguiente contenido:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"
        android:drawable="@drawable/textfield_search_selected_holo_light" />
    <item android:drawable="@drawable/textfield_search_default_holo_light" />
</selector>

Utilizaremos el dibujo creado anteriormente para establecer el fondo para la LinearLayoutvista que contiene el campo de texto dentro SearchView; su id es android:id/search_plate. Así que aquí está cómo hacer esto rápidamente en el código, al crear el menú de opciones:

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }       

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);

        // Getting SearchView from XML layout by id defined there - my_search_view in this case
        SearchView searchView = (SearchView) menu.findItem(R.id.my_search_view).getActionView();
        // Getting id for 'search_plate' - the id is part of generate R file,
        // so we have to get id on runtime.
        int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
        // Getting the 'search_plate' LinearLayout.
        View searchPlate = searchView.findViewById(searchPlateId);
        // Setting background of 'search_plate' to earlier defined drawable.            
        searchPlate.setBackgroundResource(R.drawable.textfield_searchview_holo_light);          

        return super.onCreateOptionsMenu(menu);
    }

}

Efecto final

Aquí está la captura de pantalla del resultado final:

Como llegué a esto

Creo que vale la pena mencionar cómo llegué a esto, para que este enfoque se pueda utilizar al personalizar otras vistas.

Verificando el diseño de la vista

He comprobado cómo se SearchViewve el diseño. En SearchView contructor se puede encontrar una línea que infla el diseño:

inflater.inflate(R.layout.search_view, this, true);

Ahora sabemos que el SearchViewdiseño está en el archivo llamado res/layout/search_view.xml. Mirando en search_view.xml podemos encontrar un LinearLayoutelemento interno (con id search_plate) que tiene android.widget.SearchView$SearchAutoCompletedentro (se parece al campo de texto de nuestra vista de búsqueda):

    <LinearLayout
        android:id="@+id/search_plate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:background="?android:attr/searchViewTextField">

Ahora, ahora que el fondo se establece en función del searchViewTextFieldatributo del tema actual .

Atributo de investigación (¿es fácilmente configurable?)

Para verificar cómo searchViewTextFieldse establece el atributo, investigamos res / values ​​/ themes.xml . Hay un grupo de atributos relacionados por SearchViewdefecto Theme:

<style name="Theme">
    <!-- (...other attributes present here...) -->

    <!-- SearchView attributes -->
    <item name="searchDropdownBackground">@android:drawable/spinner_dropdown_background</item>
    <item name="searchViewTextField">@drawable/textfield_searchview_holo_dark</item>
    <item name="searchViewTextFieldRight">@drawable/textfield_searchview_right_holo_dark</item>
    <item name="searchViewCloseIcon">@android:drawable/ic_clear</item>
    <item name="searchViewSearchIcon">@android:drawable/ic_search</item>
    <item name="searchViewGoIcon">@android:drawable/ic_go</item>
    <item name="searchViewVoiceIcon">@android:drawable/ic_voice_search</item>
    <item name="searchViewEditQuery">@android:drawable/ic_commit_search_api_holo_dark</item>
    <item name="searchViewEditQueryBackground">?attr/selectableItemBackground</item>

Vemos que para el tema predeterminado el valor es @drawable/textfield_searchview_holo_dark. El Theme.Lightvalor también se establece en ese archivo .

Ahora, sería genial si este atributo fuera accesible a través de R.styleable , pero desafortunadamente no lo es. A modo de comparación, ver otros temáticos atributos que están presentes tanto en themes.xml y R.attr como textAppearance o selectableItemBackground . Si searchViewTextFieldestuviera presente en R.attr(y R.stylable) podríamos simplemente usar nuestro selector dibujable al definir el tema para toda nuestra aplicación en XML. Por ejemplo:

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="AppTheme" parent="android:Theme.Light">
        <item name="android:searchViewTextField">@drawable/textfield_searchview_holo_light</item>
    </style>
</resources>

¿Qué se debe modificar?

Ahora sabemos que tendremos que acceder a search_platetravés del código. Sin embargo, todavía no sabemos cómo debería ser. En resumen, buscamos elementos dibujables utilizados como valores en los temas predeterminados: textfield_searchview_holo_dark.xml y textfield_searchview_holo_light.xml . Al observar el contenido, vemos que el elemento dibujable es el selectorque hace referencia a otros dos elementos dibujables (que resultan ser 9 parches más adelante) según el estado de visualización. Puede encontrar elementos dibujables agregados de 9 parches de (casi) todas las versiones de Android en androiddrawables.com

Personalización

Reconocemos la línea azul en uno de los 9 parches , por lo que creamos una copia local y cambiamos los colores según lo desee.

Es posible que las soluciones anteriores no funcionen si está utilizando la biblioteca appcompat. Es posible que deba modificar el código para que funcione para la biblioteca appcompat.

Aquí está la solución de trabajo para la biblioteca appcompat.

  @Override
  public boolean onCreateOptionsMenu(Menu menu)
  {

    getMenuInflater().inflate(R.menu.main_menu, menu); 

    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
    MenuItem searchMenuItem = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchMenuItem);
    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));

    SearchView.SearchAutoComplete searchAutoComplete = (SearchView.SearchAutoComplete)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    searchAutoComplete.setHintTextColor(Color.WHITE);
    searchAutoComplete.setTextColor(Color.WHITE);

    View searchplate = (View)searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
    searchplate.setBackgroundResource(R.drawable.texfield_searchview_holo_light);

    ImageView searchCloseIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
    searchCloseIcon.setImageResource(R.drawable.abc_ic_clear_normal);

    ImageView voiceIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_voice_btn);
    voiceIcon.setImageResource(R.drawable.abc_ic_voice_search);

    ImageView searchIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
    searchIcon.setImageResource(R.drawable.abc_ic_search);


    return super.onCreateOptionsMenu(menu);
}

Tu onCreateOptionsMenumétodo debe ser:

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.option, menu);
        SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
        int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
        ViewGroup v = (ViewGroup) searchView.findViewById(linlayId);
        v.setBackgroundResource(R.drawable.searchviewredversion);
        return super.onCreateOptionsMenu(menu);
    }

donde su elemento de búsqueda está menu_searchfuera de curso

y aquí está searchviewredversion(esta es la versión xhdpi): http://img836.imageshack.us/img836/5964/searchviewredversion.png

La solución anterior no funciona con ActionBarSherlock 4.2 y, por lo tanto, no es compatible con versiones anteriores de Android 2.x. Aquí hay un código de trabajo que configura el fondo de SearchView y el texto de sugerencia en ActionBarSherlock 4.2:

public static void styleSearchView(SearchView searchView, Context context) {
    View searchPlate = searchView.findViewById(R.id.abs__search_plate);
    searchPlate.setBackgroundResource(R.drawable.your_custom_drawable);
    AutoCompleteTextView searchText = (AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
    searchText.setHintTextColor(context.getResources().getColor(R.color.your_custom_color));
}

También me cansé de hacer esto y estoy usando v7. La aplicación se bloqueó cuando intenté tomar la searchPlatevía, getIdentifier()así que lo hice de esta manera:

View searchPlate = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);

También enfrenté el mismo problema. Utilicé la biblioteca appcompat v7 y definí un estilo personalizado. En la carpeta dibujable, coloque el archivo bottom_border.xml que se ve así:

<?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>

En la carpeta de valores 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>

Definí el archivo custommenu.xml para mostrar el menú:

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

Su actividad debe extender ActionBarActivity en lugar de Activity.

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

En archivo de manifiesto:

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

Para obtener más información, consulte aquí:
aquí http://www.jayway.com/2014/06/02/android-theming-the-actionbar/

Actualizar

Si está utilizando AndroidX, puede hacerlo así

    View searchPlate = svSearch. findViewById(androidx.appcompat.R.id.search_plate);
    if (searchPlate != null) {
        AutoCompleteTextView searchText = searchPlate.findViewById(androidx.appcompat.R.id.search_src_text);
        if (searchText != null){
            searchText.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources().getDimension(R.dimen.edittext_text_size));
            searchText.setMaxLines(1);
            searchText.setSingleLine(true);
            searchText.setTextColor(getResources().getColor(R.color.etTextColor));
            searchText.setHintTextColor(getResources().getColor(R.color.etHintColor));
            searchText.setBackground(null);
        }
    }

Primero, creemos un archivo XML llamado search_widget_background.xml, para usar como un elemento de dibujo, es decir, en un directorio de dibujo.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="@color/red" />

</shape>

Este dibujo se utilizará como fondo para nuestro widget de búsqueda. Establecí el color en rojo porque eso es lo que pediste, pero puedes configurarlo en cualquier color definido por la etiqueta @color. Incluso puede modificarlo aún más utilizando los atributos definidos para la etiqueta de forma (hacer esquinas redondeadas, hacer un fondo ovalado, etc.).

El siguiente paso es establecer el fondo de nuestro widget de búsqueda en este. Esto se puede lograr de la siguiente manera:

    public boolean onCreateOptionsMenu(Menu menu) {

        SearchView searchView = (SearchView)menu.findItem(R.id.my_search_view).getActionView();
        Drawable d = getResources().getDrawable(R.drawable.search_widget_background);
        searchView.setBackground(d);
...
    }

public boolean onCreateOptionsMenu(Menu menu) {
........

        // Set the search plate color
        int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
        View view = searchView.findViewById(linlayId);
        Drawable drawColor = getResources().getDrawable(R.drawable.searchcolor);
        view.setBackground( drawColor );
........
    }

y este es el archivo searchablecolor.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
      <shape >
          <solid android:color="#ffffff" />
      </shape>
  </item>

  <!-- main color -->
  <item android:bottom="1.5dp"
      android:left="1.5dp"
      android:right="1.5dp">
      <shape >
          <solid android:color="#2c4d8e" />
      </shape>
  </item>

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

Al final de esta publicación, expliqué con imágenes que esto se aplica para los formularios de xamarin. Pero creo que puedes entenderlo, porque está basado en el código fuente de la vista de búsqueda de Android

Cómo cambiar la imagen del botón cancelar de la barra de búsqueda en formularios xamarin

Si está inflando Searchview de esta manera "getMenuInflater (). Inflate (R.menu.search_menu, menu);". Luego puede personalizar esta vista de búsqueda a través de style.xml como se muestra a continuación.

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
      <item name="searchViewStyle">@style/SearchView.ActionBar</item>
</style>

<style name="SearchView.ActionBar" parent="Widget.AppCompat.SearchView.ActionBar">
      <item name="queryBackground">@drawable/drw_search_view_bg</item>
      <item name="searchHintIcon">@null</item>
      <item name="submitBackground">@null</item>
      <item name="closeIcon">@drawable/vd_cancel</item>
      <item name="searchIcon">@drawable/vd_search</item>
</style>

¡Estaba cavando mucho sobre eso y finalmente encontré esta solución y funciona para mí!
Puedes usar esto

Si usa appcompat intente esto:

ImageView searchIconView = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
searchIconView.setImageResource(R.drawable.yourIcon);

Si usa androidx intente esto:

ImageView searchIconView = (ImageView) searchView.findViewById(androidx.appcompat.R.id.search_button);
    searchIconView.setImageResource(R.drawable.yourIcon);

Cambiará el icono predeterminado de serchview.

¡Espero eso ayude!