style - Android ActionBar Personaliza la vista de búsqueda

android searchview

Question

--- RESOLVIÓ LOS PROBLEMAS - AGREGÓ LAS RESPUESTAS EN TEXTO DE EDICIÓN ---

Estoy usando el ActionBar Sherlock en mi aplicación de Android. Allí quiero mostrar un SearchView . Funciona bien hasta ahora, pero me doy cuenta de que estoy haciendo algo mal al intentar personalizarlo.

Lo creo de esta manera:

searchView.setQueryHint("Search: ");
searchView.setOnQueryTextListener(this);
searchView.setOnCloseListener(...);

searchMenuItem = menu.add("Search place");
searchMenuItem.setIcon(R.drawable.ic_action_search)
              .setActionView(searchView)
              .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM |  MenuItem.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW);

Quiero hacer dos cosas:

1. Cambie el color del texto "Buscar" que se muestra en el campo de texto que aparece. Parece que lo cambié con el estilo de texto general en mi tema, pero espero poder establecer un color separado de alguna manera.

2. Al abrir esta vista de búsqueda, aparece en el lado izquierdo de la barra de acción. Pero lo necesito en el lado derecho. El icono (la lupa) en realidad está en el lado derecho de la barra, pero al presionarlo se abre el campo Editar campo de texto en el lado izquierdo. Intenté usar LayoutParams pero me falta algo esencial al intentar agregarlo a la barra de acción mediante el uso de LayoutParams.

Así que espero que alguien pueda ayudarme con eso.

Muchas gracias, Tobias.

---- EDITAR ----

Bien, una cosa ya está resuelta con esto. La adición de la barra de acción por XML hace que el TextEdit a la derecha.

getSupportMenuInflater().inflate(R.menu.activity_main, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) searchItem.getActionView();
Log.e(TAG, "searchView: " + searchView);

Y en mi menu.xml

<item android:id="@+id/action_search"
 android:title="Search"
 android:icon="@drawable/ic_action_search"          
 android:showAsAction="always"
 android:actionViewClass="com.actionbarsherlock.widget.SearchView" />

Así que al menos un misterio se resolvió (por qué esto hizo una diferencia). Pero el XML recién creado ya no se cierra cuando se llama

searchMenuItem.collapseActionView();

Así que todavía hay algo malo en ello.

--- EDITAR 2 ---

Sólo para hacerle saber. Encontré la solución para el color del texto. Se puede lograr utilizando el AutocompletarTextView de SearchView:

AutoCompleteTextView searchText = (AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
searchText.setHintTextColor(getResources().getColor(R.color.white));
searchText.setTextColor(getResources().getColor(R.color.white));    

Entonces, el último problema que tengo es que SearchView ya no se cierra cuando se envía un texto. Así que collapseActionView () etc. no funciona. ¿Algunas ideas?

--- EDITAR 3 ---

Está bien, he encontrado una solución. No sé si esta es la forma correcta de hacerlo, pero al usar

((SearchView) searchMenuItem.getActionView()).setIconified(true);

cierra el EditText

Tengo que hacerlo dos veces porque la primera vez es solo "eliminar" mi texto de entrada y muestra la "sugerencia", mientras que el segundo uso es "cerrar" el Texto de edición de la sugerencia y colapsa el viewView a la lupa. Estilo torpe pero funciona. :-)

Answer 1

FYI ahora con ActionBar es compatible con v7 appcompat la forma de cambiar el color de sugerencia de consulta, color de texto, tamaño de texto:

import android.support.v4.view.MenuItemCompat;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.SearchView.SearchAutoComplete;

...

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_home, menu);
    MenuItem searchItem = menu.findItem(R.id.item_search);
    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    mSearchView.setOnQueryTextListener(this);
    mSearchView.setQueryHint(getString(R.string.text));
    SearchAutoComplete searchAutoComplete = (SearchAutoComplete) mSearchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    searchAutoComplete.setHintTextColor(mRes.getColor(android.R.color.white));
    searchAutoComplete.setTextSize(14);

    return super.onCreateOptionsMenu(menu);
}

Answer 2

Hice la esquina redondeada para editar texto como este.

int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
        View searchPlate = searchView.findViewById(searchPlateId);
        searchPlate.setBackgroundResource(R.drawable.bg_white_rounded);

        int searchSrcTextId = getResources().getIdentifier("android:id/search_src_text", null, null);
        EditText searchEditText = (EditText) searchView.findViewById(searchSrcTextId);
        searchEditText.setTextColor(Color.BLACK);
        searchEditText.setHintTextColor(Color.LTGRAY);

        int closeButtonId = searchView.getContext().getResources().getIdentifier("android:id/search_close_btn", null, null);
        ImageView closeButtonImage = (ImageView) searchView.findViewById(closeButtonId);
        closeButtonImage.setColorFilter(ContextCompat.getColor(MainActivity.this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN);

bg_white_background.xml:

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

<SearchView
                android:id="@+id/searchView"
                android:layout_width="match_parent"
                android:queryHint="Serach"
                android:layout_height="match_parent"></SearchView>

Answer 3

Hice una clase SearchViewFormatter para formatear fácilmente el widget nativo de SearchView para Android. Un ejemplo:

new SearchViewFormatter()
            .setSearchBackGroundResource(R.drawable.my_bg)
            .setSearchIconResource(R.drawable.my_ic, true, false) //true to icon inside edittext, false to outside
            .setSearchVoiceIconResource(R.drawable.my_ic)
            .setSearchTextColorResource(R.color.my_color)
            .setSearchHintColorResource(R.color.my_color)
            .setSearchCloseIconResource(R.drawable.my_ic)
            .setInputType(InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS)
            .format(mSearchView);

Answer 4

Para resolver tu pregunta número 2

Cambia esta línea:

.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM |  MenuItem.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW);

A:

.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);

use solo el parámetro SHOW_AS_ACTION_IF_ROOM en el método setShowAsAction()