Cambiar el fondo dibujable del widget searchview

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

Actualmente se ve así: enter image description here

pero necesito cambiar el fondo azul dibujable a un color rojo.

He intentado hacer muchas cosas sin rodar mi propio widget de búsqueda, pero parece que nada funciona.

¿Puede alguien señalarme en la dirección correcta para cambiar esto?

Introducción

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

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

Por lo tanto, la única forma de sustituir correctamente el fondo del campo de texto de SearchView es entrar en sus elementos internos, obtener acceso a ver que tiene un conjunto de trasfondos basado en searchViewTextField y establecer el nuestro.

NOTA: La siguiente solución depende solo del id ( android:id/search_plate ) del elemento dentro de SearchView , por lo que es más independiente de la versión SDK que el recorrido de niños (por ejemplo, usando searchView.getChildAt(0) para llegar a la vista correcta en SearchView ), pero no es a prueba de balas Especialmente si algún fabricante decide volver a implementar las partes internas de SearchView y el elemento con el ID mencionado anteriormente no está presente, el código no funcionará.

En SDK, el fondo para el campo de texto en SearchView se declara a través de nueve parches , por lo que lo haremos de la misma manera. Puedes encontrar imágenes png originales en el directorio drawable-mdpi del repository Android git . Estamos interesados ​​en dos imágenes. Uno para estado cuando se selecciona el campo de texto (llamado textfield_search_selected_holo_light.9.png ) y otro para donde no está (named 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 es porque textfield_search_default_holo_light no está presente en R.drawable . Por lo tanto, no es fácilmente accesible a través de @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 a dibujable local.

NOTA: Estaba usando el tema Holo Light como base, pero puedes hacer lo mismo con Holo Dark . Parece que no hay diferencia real en los parches de estado seleccionados 9 entre los temas claro y oscuro . Sin embargo, hay una diferencia en 9 parches para el estado predeterminado (consulte Luz vs Oscuridad ). Por lo tanto, probablemente no haya necesidad de hacer copias locales de 9 parches para estado seleccionado , tanto para temas oscuros como claros (suponiendo que quiera manejar ambos, y que ambos tengan el mismo aspecto que en Holo Theme ). Simplemente haga una copia local y úsela en el selector dibujable para ambos temas.

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

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

enter image description here

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

Ahora, necesitaremos crear un selector dibujable, para que se muestre la imagen adecuada según el estado de visualización. Crea el archivo res/drawable/texfield_searchview_holo_light.xml con el siguiente contenido:

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

Utilizaremos el LinearLayout creado anteriormente para establecer el fondo de la vista LinearLayout que contiene el campo de texto dentro de SearchView , su id es android:id/search_plate . Así que aquí está cómo hacer esto rápidamente en el código, al crear 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:

enter image description here

Cómo llegué a esto

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

Comprobando el diseño de la vista

Comprobé cómo se ve el diseño de SearchView . En SearchView contructor uno puede encontrar una línea que infla el diseño:

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

Ahora sabemos que el diseño de SearchView está en un archivo llamado res/layout/search_view.xml . Al buscar en search_view.xml , podemos encontrar un elemento LinearLayout interno (con id search_plate ) que tiene android.widget.SearchView$SearchAutoComplete dentro de él (se parece a nuestro campo de texto de la vista de búsqueda):

   

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

Atributo de investigación (¿se puede establecer fácilmente?)

Para verificar cómo se searchViewTextField atributo searchViewTextField , investigamos res / values ​​/ themes.xml . Hay un grupo de atributos relacionados con SearchView en el Theme predeterminado:

  

Vemos que para el tema predeterminado, el valor es @drawable/textfield_searchview_holo_dark . Para Theme.Light value 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. Para comparar, vea otros atributos de tema que están presentes en themes.xml y R.attr como textAppearance o seleccionableItemBackground . Si searchViewTextField estuviera 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:

    

¿Qué debería ser modificado?

Ahora sabemos que tendremos que acceder a search_plate través del código. Sin embargo, todavía no sabemos cómo debería verse. En resumen, buscamos los elementos dibujables utilizados como valores en los temas predeterminados: textfield_searchview_holo_dark.xml y textfield_searchview_holo_light.xml . Al mirar el contenido, vemos que el dibujable es un selector que hace referencia a otros dos objetos dibujables (que luego son 9 parches) en función del estado de la vista. Puede encontrar agregados de 9 parche de Drawables de (casi) todas las versiones de Android en androiddrawables.com

Personalizando

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 deseado.

Las soluciones anteriores pueden no funcionar si está utilizando la biblioteca appcompat. Es posible que deba modificar el código para que funcione en la biblioteca de 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); } 

Su método onCreateOptionsMenu 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 es menu_search fuera del curso

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

enter image description here

La solución anterior no funciona con ActionBarSherlock 4.2 y, por lo tanto, no es compatible con Android 2.x. Aquí está el 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)); } 

Me cansé de hacer esto también y estoy usando v7. La aplicación se bloqueó cuando intenté capturar la página de searchPlate través de getIdentifier() así que lo hice de esta manera:

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

También me enfrenté al mismo problema. Usé la biblioteca de appcompat v7 y definí el estilo personalizado para ella. En la carpeta dibujable, coloque el archivo bottom_border.xml que se ve así:

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

En la carpeta de valores styles_myactionbartheme.xml:

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

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

   

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

  

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

Primero, creemos un archivo XML llamado search_widget_background.xml, para usarlo como un archivo dibujable, es decir, debajo del directorio dibujable.

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

Este dibujo se usará como fondo para nuestro widget de búsqueda. Configuré el color en rojo porque eso es lo que pediste, pero puedes configurarlo en cualquier color definido por la etiqueta @color. Incluso puede modificarlo 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 a 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"?>                    

Expliqué al final de esta publicación con imágenes que se aplica a las formas xamarin. Pero creo que puedes entenderlo, porque está basado en el código fuente de búsqueda de Android

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