Actualmente estoy en el proceso de aprendizaje de cómo convertir mi aplicación para el diseño de Materiales y estoy un poco pegado a la derecha ahora. Tengo la Barra de herramientas añadido y he hecho mi navegación cajón de la superposición de todos los contenidos.

Ahora estoy tratando de crear un ampliable de búsqueda que se ve como la de la material directrices:
La creación de un SearchView que se ve como el material de las directrices de diseño

Esto es lo que tengo ahora mismo y no puedo entender cómo hacer que sea como el de arriba:

La creación de un SearchView que se ve como el material de las directrices de diseño

Este es mi menú xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@android:drawable/ic_menu_search"
        android:title="Search"
        app:showAsAction="always"
        app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

Que funciona, me da un elemento de menú que se expande a la SearchView y puedo filtrar mi lista de multa. No se parece en nada a la 1ª foto, aunque.

Traté de usar MenuItemCompat.setOnActionExpandListener() en R.id.action_search así que podría cambiar el icono de la casa para una flecha de atrás, pero que no parece funcionar. Nada se disparó en el oyente. Incluso si eso funcionaba todavía no estaría muy cerca de la 1 de la imagen.

¿Cómo puedo crear un SearchView en el nuevo appcompat de la barra de herramientas que se ve como el material directrices?

InformationsquelleAutor Mike | 2014-12-18

8 Comentarios

  1. 152

    Es en realidad bastante fácil de hacer esto, si usted está utilizando android.support.v7 biblioteca.

    Paso 1

    Declarar un elemento de menú

    <item android:id="@+id/action_search"
        android:title="Search"
        android:icon="@drawable/abc_ic_search_api_mtrl_alpha"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="android.support.v7.widget.SearchView" />

    Paso 2

    Extender AppCompatActivity y en el onCreateOptionsMenu instalación de la SearchView.

    import android.support.v7.widget.SearchView;
    
    ...
    
    public class YourActivity extends AppCompatActivity {
    
        ...
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.menu_home, menu);
            //Retrieve the SearchView and plug it into SearchManager
            final SearchView searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.action_search));
            SearchManager searchManager = (SearchManager) getSystemService(SEARCH_SERVICE);
            searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
            return true;
        }
    
        ... 
    
    }

    Resultado

    La creación de un SearchView que se ve como el material de las directrices de diseño

    La creación de un SearchView que se ve como el material de las directrices de diseño

    • Yo había upvoted, pero que emulador estás usando? Lo he probado pero no estoy recibiendo los navigate-back botón, pero en lugar de un icono de búsqueda, y su distancia desde el borde izquierdo de la pantalla no es la misma que entre el X icono y el borde derecho de la pantalla (no tengo la acción de desbordamiento). Publicado a la pregunta aquí, se puede mirar en él?
    • Yo uso un dispositivo real, ejecutando API-18. Pero funciona bien en Emuladores API-15 y API-22 hasta el momento.
    • no es una búsqueda de material. es sólo la costumbre antigua de búsqueda en la barra de acción
    • Bueno, pero ¿cómo hacer que la búsqueda de la barra siempre visible sin necesidad de hacer clic en el icono de Búsqueda?
    • Me respondió mi propia sub-pregunta, para hacerla siempre visible, sin la necesidad de hacer clic en el botón de búsqueda, agregue la línea searchView.setIconifiedByDefault(false); a la onCreateOptionsMenu función.
    • otro dato útil – si desea que la vista de búsqueda para ampliarse inicialmente asegúrese de que usted tiene app:showAsAction="always" y NO app:showAsAction="ifRoom|collapseActionView"
    • ¿Cómo puedo configurar el fondo en blanco cuando su búsqueda?
    • La barra de herramientas es sólo una vista normal. Usted puede establecer el color de fondo usando myToolbar.setBackgroundColor(Color.WHITE);
    • Como en; donde debo llamar? searchView.setOnClickListener(new OnClickListener() ; no se llama
    • Además, el uso de este método, incluso cuando la barra de búsquedas se expande el OverflowIcon es todavía visible (es decir, 3 puntos). Sin embargo, algunas aplicaciones, manejar de búsqueda, ampliando completamente y cambiar el fondo blanco. Como GMail
    • Su trabajo lrky
    • Maldito Google tiene una documentación más completa, pero en ninguna parte se menciona la app:actionViewClass atributo a ser mencionados en el Menu.xml. Tan malo! Gracias por la Respuesta, que funcionó!
    • cómo puedo agregar un addTextChangedListener en este searchview ?
    • Hola chicos tengo mi solución, puede utilizar setOnQueryTextListener y dar definición a sobreescribir métodos decir onQueryTextChange y onQueryTextSubmit.
    • Gran respuesta, pero MenuItemCompat.getActionView(…) está en desuso. Trate de usar MenuItem = buscar menú.findItem(R. id.la búsqueda); SearchView searchView = (SearchView) de búsqueda.getActionView(); lugar

  2. 83

    Después de una semana de desconcertante a través de este. Creo que he descubierto.

    Ahora estoy usando solo un EditText en el interior de la Barra de herramientas. Esto fue sugerido a mí por oj88 en reddit.

    Ahora tengo este:

    La creación de un SearchView que se ve como el material de las directrices de diseño

    En primer lugar dentro de onCreate() de mi actividad he añadido el EditText con una vista de imagen en el lado derecho de la Barra de herramientas como esta:

        //Setup search container view
    searchContainer = new LinearLayout(this);
    Toolbar.LayoutParams containerParams = new Toolbar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    containerParams.gravity = Gravity.CENTER_VERTICAL;
    searchContainer.setLayoutParams(containerParams);
    //Setup search view
    toolbarSearchView = new EditText(this);
    //Set width /height /gravity
    int[] textSizeAttr = new int[]{android.R.attr.actionBarSize};
    int indexOfAttrTextSize = 0;
    TypedArray a = obtainStyledAttributes(new TypedValue().data, textSizeAttr);
    int actionBarHeight = a.getDimensionPixelSize(indexOfAttrTextSize, -1);
    a.recycle();
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, actionBarHeight);
    params.gravity = Gravity.CENTER_VERTICAL;
    params.weight = 1;
    toolbarSearchView.setLayoutParams(params);
    //Setup display
    toolbarSearchView.setBackgroundColor(Color.TRANSPARENT);
    toolbarSearchView.setPadding(2, 0, 0, 0);
    toolbarSearchView.setTextColor(Color.WHITE);
    toolbarSearchView.setGravity(Gravity.CENTER_VERTICAL);
    toolbarSearchView.setSingleLine(true);
    toolbarSearchView.setImeActionLabel("Search", EditorInfo.IME_ACTION_UNSPECIFIED);
    toolbarSearchView.setHint("Search");
    toolbarSearchView.setHintTextColor(Color.parseColor("#b3ffffff"));
    try {
    //Set cursor colour to white
    //https://stackoverflow.com/a/26544231/1692770
    //https://github.com/android/platform_frameworks_base/blob/kitkat-release/core/java/android/widget/TextView.java#L562-564
    Field f = TextView.class.getDeclaredField("mCursorDrawableRes");
    f.setAccessible(true);
    f.set(toolbarSearchView, R.drawable.edittext_whitecursor);
    } catch (Exception ignored) {
    }
    //Search text changed listener
    toolbarSearchView.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    }
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
    Fragment mainFragment = getFragmentManager().findFragmentById(R.id.container);
    if (mainFragment != null && mainFragment instanceof MainListFragment) {
    ((MainListFragment) mainFragment).search(s.toString());
    }
    }
    @Override
    public void afterTextChanged(Editable s) {
    //https://stackoverflow.com/a/6438918/1692770
    if (s.toString().length() <= 0) {
    toolbarSearchView.setHintTextColor(Color.parseColor("#b3ffffff"));
    }
    }
    });
    ((LinearLayout) searchContainer).addView(toolbarSearchView);
    //Setup the clear button
    searchClearButton = new ImageView(this);
    Resources r = getResources();
    int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, r.getDisplayMetrics());
    LinearLayout.LayoutParams clearParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    clearParams.gravity = Gravity.CENTER;
    searchClearButton.setLayoutParams(clearParams);
    searchClearButton.setImageResource(R.drawable.ic_close_white_24dp); //TODO: Get this image from here: https://github.com/google/material-design-icons
    searchClearButton.setPadding(px, 0, px, 0);
    searchClearButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    toolbarSearchView.setText("");
    }
    });
    ((LinearLayout) searchContainer).addView(searchClearButton);
    //Add search view to toolbar and hide it
    searchContainer.setVisibility(View.GONE);
    toolbar.addView(searchContainer);

    Esto funcionó, pero luego me encontré con un problema donde onOptionsItemSelected() no estaba siendo llamado cuando me tocó el botón de inicio. Así que yo no era capaz de cancelar la búsqueda pulsando el botón de inicio. He intentado un par de maneras diferentes de registrar el oyente haga clic en el botón de inicio pero no de trabajo.

    Finalmente me enteré de que la ActionBarDrawerToggle yo tenía estaba interfiriendo con las cosas, así que me lo quitaron. Esta escucha, a continuación, comenzó a trabajar:

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    //toolbarHomeButtonAnimating is a boolean that is initialized as false. It's used to stop the user pressing the home button while it is animating and breaking things.
    if (!toolbarHomeButtonAnimating) {
    //Here you'll want to check if you have a search query set, if you don't then hide the search box.
    //My main fragment handles this stuff, so I call its methods.
    FragmentManager fragmentManager = getFragmentManager();
    final Fragment fragment = fragmentManager.findFragmentById(R.id.container);
    if (fragment != null && fragment instanceof MainListFragment) {
    if (((MainListFragment) fragment).hasSearchQuery() || searchContainer.getVisibility() == View.VISIBLE) {
    displaySearchView(false);
    return;
    }
    }
    }
    if (mDrawerLayout.isDrawerOpen(findViewById(R.id.navigation_drawer)))
    mDrawerLayout.closeDrawer(findViewById(R.id.navigation_drawer));
    else
    mDrawerLayout.openDrawer(findViewById(R.id.navigation_drawer));
    }
    });

    Así que ahora puedo cancelar la búsqueda con el botón de inicio, pero no puede presionar el botón de nuevo para cancelar todavía. Así que he añadido esto a onBackPressed():

        FragmentManager fragmentManager = getFragmentManager();
    final Fragment mainFragment = fragmentManager.findFragmentById(R.id.container);
    if (mainFragment != null && mainFragment instanceof MainListFragment) {
    if (((MainListFragment) mainFragment).hasSearchQuery() || searchContainer.getVisibility() == View.VISIBLE) {
    displaySearchView(false);
    return;
    }
    }

    He creado este método para cambiar la visibilidad de los EditText y un elemento de menú:

    public void displaySearchView(boolean visible) {
    if (visible) {
    //Stops user from being able to open drawer while searching
    mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
    //Hide search button, display EditText
    menu.findItem(R.id.action_search).setVisible(false);
    searchContainer.setVisibility(View.VISIBLE);
    //Animate the home icon to the back arrow
    toggleActionBarIcon(ActionDrawableState.ARROW, mDrawerToggle, true);
    //Shift focus to the search EditText
    toolbarSearchView.requestFocus();
    //Pop up the soft keyboard
    new Handler().postDelayed(new Runnable() {
    public void run() {
    toolbarSearchView.dispatchTouchEvent(MotionEvent.obtain(SystemClock.uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN, 0, 0, 0));
    toolbarSearchView.dispatchTouchEvent(MotionEvent.obtain(SystemClock.uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_UP, 0, 0, 0));
    }
    }, 200);
    } else {
    //Allows user to open drawer again
    mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
    //Hide the EditText and put the search button back on the Toolbar.
    //This sometimes fails when it isn't postDelayed(), don't know why.
    toolbarSearchView.postDelayed(new Runnable() {
    @Override
    public void run() {
    toolbarSearchView.setText("");
    searchContainer.setVisibility(View.GONE);
    menu.findItem(R.id.action_search).setVisible(true);
    }
    }, 200);
    //Turn the home button back into a drawer icon
    toggleActionBarIcon(ActionDrawableState.BURGER, mDrawerToggle, true);
    //Hide the keyboard because the search box has been hidden
    InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
    imm.hideSoftInputFromWindow(toolbarSearchView.getWindowToken(), 0);
    }
    }

    Necesitaba una forma de cambiar el botón de inicio en la barra de herramientas entre el icono de cajón y el botón atrás. Finalmente he encontrado el siguiente método en este MODO de respuesta. Aunque la he modificado ligeramente para más sentido para mí:

    private enum ActionDrawableState {
    BURGER, ARROW
    }
    /**
    * Modified version of this, https://stackoverflow.com/a/26836272/1692770<br>
    * I flipped the start offset around for the animations because it seemed like it was the wrong way around to me.<br>
    * I also added a listener to the animation so I can find out when the home button has finished rotating.
    */
    private void toggleActionBarIcon(final ActionDrawableState state, final ActionBarDrawerToggle toggle, boolean animate) {
    if (animate) {
    float start = state == ActionDrawableState.BURGER ? 1.0f : 0f;
    float end = Math.abs(start - 1);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
    ValueAnimator offsetAnimator = ValueAnimator.ofFloat(start, end);
    offsetAnimator.setDuration(300);
    offsetAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    offsetAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
    float offset = (Float) animation.getAnimatedValue();
    toggle.onDrawerSlide(null, offset);
    }
    });
    offsetAnimator.addListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {
    }
    @Override
    public void onAnimationEnd(Animator animation) {
    toolbarHomeButtonAnimating = false;
    }
    @Override
    public void onAnimationCancel(Animator animation) {
    }
    @Override
    public void onAnimationRepeat(Animator animation) {
    }
    });
    toolbarHomeButtonAnimating = true;
    offsetAnimator.start();
    }
    } else {
    if (state == ActionDrawableState.BURGER) {
    toggle.onDrawerClosed(null);
    } else {
    toggle.onDrawerOpened(null);
    }
    }
    }

    Esto funciona, he conseguido un par de bugs que he encontrado a lo largo del camino. Yo no creo que sea 100% pero funciona bastante bien para mí.

    EDIT: Si desea agregar la vista de búsqueda en XML en lugar de Java ello:

    toolbar.xml:

    <android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    contentInsetLeft="72dp"
    contentInsetStart="72dp"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    app:contentInsetLeft="72dp"
    app:contentInsetStart="72dp"
    app:popupTheme="@style/ActionBarPopupThemeOverlay"
    app:theme="@style/ActionBarThemeOverlay">
    <LinearLayout
    android:id="@+id/search_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal">
    <EditText
    android:id="@+id/search_view"
    android:layout_width="0dp"
    android:layout_height="?attr/actionBarSize"
    android:layout_weight="1"
    android:background="@android:color/transparent"
    android:gravity="center_vertical"
    android:hint="Search"
    android:imeOptions="actionSearch"
    android:inputType="text"
    android:maxLines="1"
    android:paddingLeft="2dp"
    android:singleLine="true"
    android:textColor="#ffffff"
    android:textColorHint="#b3ffffff" />
    <ImageView
    android:id="@+id/search_clear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:src="@drawable/ic_close_white_24dp" />
    </LinearLayout>
    </android.support.v7.widget.Toolbar>

    onCreate() de la Actividad:

        searchContainer = findViewById(R.id.search_container);
    toolbarSearchView = (EditText) findViewById(R.id.search_view);
    searchClearButton = (ImageView) findViewById(R.id.search_clear);
    //Setup search container view
    try {
    //Set cursor colour to white
    //https://stackoverflow.com/a/26544231/1692770
    //https://github.com/android/platform_frameworks_base/blob/kitkat-release/core/java/android/widget/TextView.java#L562-564
    Field f = TextView.class.getDeclaredField("mCursorDrawableRes");
    f.setAccessible(true);
    f.set(toolbarSearchView, R.drawable.edittext_whitecursor);
    } catch (Exception ignored) {
    }
    //Search text changed listener
    toolbarSearchView.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    }
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
    Fragment mainFragment = getFragmentManager().findFragmentById(R.id.container);
    if (mainFragment != null && mainFragment instanceof MainListFragment) {
    ((MainListFragment) mainFragment).search(s.toString());
    }
    }
    @Override
    public void afterTextChanged(Editable s) {
    }
    });
    //Clear search text when clear button is tapped
    searchClearButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    toolbarSearchView.setText("");
    }
    });
    //Hide the search view
    searchContainer.setVisibility(View.GONE);
    • Funciona muy bien, se ve genial, gracias! Sin embargo, en lugar de crear los diseños en código, he creado el LinearLayout con el EditText y el ImageView en xml y sólo se infla en onCreate.
    • Sí, traté de hacerlo en XML, pero yo pensé que estaba haciendo algo mal como Android Studio no me dan de autocompletar en el layout XML.
    • Puede usted por favor la actualización de esta respuesta con los respectivos XML de diseño de diseño requiere para esto? que pueden ayudar a otros muy bien.
    • He actualizado la respuesta con el XML de diseño para esto, también he añadido el código necesario en el onCreate para que funcione. El resto debe permanecer igual.
    • Puede usted por favor, actualice su respuesta y poner a su completa github el código fuente?
    • por favor enviar el proyecto completo en github
    • su github el código de ayuda.

  3. 19

    La primera captura de pantalla en tu pregunta no es un público widget. El apoyo SearchView (android.apoyo.v7.widget.SearchView) imita a Android 5.0 Lollipop SearchView (android.widget.SearchView). La segunda captura de pantalla es utilizado por otros material diseñado aplicaciones como Google Play.

    La SearchView en su primera captura de pantalla que se utiliza en la Unidad, YouTube y otras aplicaciones de código cerrado de Google Apps. Afortunadamente, también es utilizado en la Android 5.0 Marcador. Usted puede tratar de backport de la vista, pero se usa algunos 5.0 Api.

    Las clases que usted querrá mirar son:

    SearchEditTextLayout, AnimUtils, y DialtactsActivity a entender cómo se utiliza la Vista. Usted también necesitará recursos de ContactsCommon.

    La mejor de las suertes.

    • Gracias por mirar en que, tenía la esperanza de que hay algo que ya está ahí que podría hacerlo. Por ahora sólo he usado un EditText con un fondo transparente y parece bien para lo que yo necesito.
    • Esta respuesta es muy inquietante para mí. ¿Por qué utiliza google privado widget que sucede para que coincida con su propio material de la guía de diseño y, a continuación, publicar una mierda widget para nosotros que no? Y cada uno de los desarrolladores ahora está ahí fuera luchando con esta por su cuenta? Qué posible razón para esto?
  4. 18

    Aquí está mi intento de hacer esto:

    Paso 1: Crear un estilo con el nombre SearchViewStyle

    <style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
    <!-- Gets rid of the search icon -->
    <item name="searchIcon">@drawable/search</item>
    <!-- Gets rid of the "underline" in the text -->
    <item name="queryBackground">@null</item>
    <!-- Gets rid of the search icon when the SearchView is expanded -->
    <item name="searchHintIcon">@null</item>
    <!-- The hint text that appears when the user has not typed anything -->
    <item name="queryHint">@string/search_hint</item>
    </style>

    Paso 2: Crear un diseño denominado simple_search_view_item.xml

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.SearchView
    android:layout_gravity="end"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    style="@style/SearchViewStyle"
    xmlns:android="http://schemas.android.com/apk/res/android" />  

    Paso 3: Crear un elemento de menú para esta búsqueda vista

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
    app:actionLayout="@layout/simple_search_view_item"
    android:title="@string/search"
    android:icon="@drawable/search"
    app:showAsAction="always" />
    </menu>  

    Paso 4: Inflar el menú

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu_searchable_activity, menu);
    return true;
    }  

    Resultado:

    La creación de un SearchView que se ve como el material de las directrices de diseño

    La única cosa que yo no era capaz de hacer era hacer es llenar todo el ancho de la Toolbar. Si alguien me podría ayudar a hacer que, a continuación, que sería de oro.

    • I wasn't able to do was to make it fill the entire width, que la biblioteca de soporte de la versión estás usando? Pruebe a establecer app:contentInsetStartWithNavigation="0dp" de la Barra de herramientas.
    • pruebe la solución dada por Magnesh. Si todavía no está resuelto, a continuación, intente agregar a continuación de las líneas en la barra de herramientas. aplicación:contentInsetStartWithNavigation=»0dp» de la aplicación:contentInsetLeft=»0dp» de la aplicación:contentInsetStart=»0dp» de la aplicación:paddingStart=»0dp» android:layout_marginLeft=»0dp» android:layout_marginStart=»0dp»
    • Las buenas obras .Cómo fue la última actualización?
    • Gracias por poner la explicación de cada línea en SearchViewStyle!
    • Niño Para todo el ancho, se puede hacer algo como esto: («stackoverflow.com/questions/27946569/…)
  5. 10

    Para lograr el aspecto deseado de SearchView, puede utilizar los estilos.

    Primer lugar, usted necesita para crear style para su SearchView, que debería ser algo como esto:

    <style name="CustomSearchView" parent="Widget.AppCompat.SearchView">
    <item name="searchIcon">@null</item>
    <item name="queryBackground">@null</item>
    </style>

    Toda la lista de atributos que se pueden encontrar en este artículo, en virtud de la «SearchView» sección.

    En segundo lugar, usted necesita para crear un style para su Toolbar, que se utiliza como ActionBar:

    <style name="ToolbarSearchView" parent="Base.ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="searchViewStyle">@style/CustomSearchView</item>
    </style>

    Y, finalmente, usted necesita para actualizar el tema de la Barra de herramientas atributo de esta manera:

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:theme="@style/ToolbarSearchView" />

    Resultado:

    La creación de un SearchView que se ve como el material de las directrices de diseño

    NOTA: Usted necesita cambiar su Toolbar tema atributo directamente. Si usted acaba de actualizar su tema principal searchViewStyle atributo no afecta su Toolbar.

    • Hey ¿que añadir los navigate-back (flecha atrás) y cancel (x) iconos de ti mismo, o que se agregan automáticamente?
    • se añaden automáticamente
    • Aparecen sólo cuando usted comienza a escribir te consulta de búsqueda en el SearchView o están ahí, incluso cuando no han escrito nada y la búsqueda sugerencia es visible? Me pregunto porque el mío no aparecen hasta que empiezo a escribir la consulta. Por lo que esta información será muy útil para mí
    • se muestra siempre, clear se muestra sólo después de escrito algunas de las consultas de búsqueda.
  6. 5

    Otra manera que usted puede conseguir el efecto deseado es el uso de esta Material de Vista de Búsqueda de la biblioteca. Controla el historial de búsqueda de forma automática y es posible proporcionar sugerencias de búsqueda en la vista.

    Ejemplo: (que Se muestra en portugués, pero también funciona en inglés y en italiano).

    La creación de un SearchView que se ve como el material de las directrices de diseño

    Instalación

    Antes de utilizar este lib, usted tiene que implementar una clase denominada MsvAuthority dentro de la br.com.mauker paquete en el módulo app, y debe tener un public static String variable llamada CONTENT_AUTHORITY. Darle el valor que desee y no olvides para agregar el mismo nombre en el archivo de manifiesto. El lib utilizar este archivo para configurar el Proveedor de Contenidos de la autoridad.

    Ejemplo:

    MsvAuthority.java

    package br.com.mauker;
    public class MsvAuthority {
    public static final String CONTENT_AUTHORITY = "br.com.mauker.materialsearchview.searchhistorydatabase";
    }

    AndroidManifest.xml

    <?xml version="1.0" encoding="utf-8"?>
    <manifest ...>
    <application ... >
    <provider
    android:name="br.com.mauker.materialsearchview.db.HistoryProvider"
    android:authorities="br.com.mauker.materialsearchview.searchhistorydatabase"
    android:exported="false"
    android:protectionLevel="signature"
    android:syncable="true"/>
    </application>
    </manifest>

    Uso

    A utilizar, agregar la dependencia:

    compile 'br.com.mauker.materialsearchview:materialsearchview:1.2.0'

    Y, a continuación, en su Activity archivo de diseño, agregue el siguiente:

    <br.com.mauker.materialsearchview.MaterialSearchView
    android:id="@+id/search_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

    Después de eso, usted sólo tiene que conseguir el MaterialSearchView de referencia mediante el uso de getViewById(), y abrirla o cerrarla con MaterialSearchView#openSearch() y MaterialSearchView#closeSearch().

    P. S.: Es posible abrir y cerrar la vista no sólo de la Toolbar. Usted puede utilizar el openSearch() método de básicamente cualquier Button, tales como un Flotante Botón de Acción.

    //Inside onCreate()
    MaterialSearchView searchView = (MaterialSearchView) findViewById(R.id.search_view);
    Button bt = (Button) findViewById(R.id.button);
    bt.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    searchView.openSearch();
    }
    });

    También puede cerrar la vista con el botón atrás, haciendo la siguiente:

    @Override
    public void onBackPressed() {
    if (searchView.isOpen()) {
    //Close the search on the back button press.
    searchView.closeSearch();
    } else {
    super.onBackPressed();
    }
    }

    Para obtener más información sobre cómo utilizar la lib, compruebe la página de github.

    • Excelente biblioteca, y una gran idea abstracta de apertura/cierre de método, de modo que un MenuItem no es necesario para abrir/cerrar, pienso usar esto en mi aplicación con un FloatingActionButton con un icono de búsqueda, por lo que será un gran trabajo.
    • ¿Por qué no hay parámetros para cadenas como ‘la Búsqueda’? Parece que la biblioteca de los límites de la gente ya sea en inglés o portugués versiones de la cadena :/
    • Pero es posible cambiar la Cadena de sugerencias mediante el uso de estilos como se indica en el archivo LÉAME. Como para la entrada de voz sugerencia, que va a ser lanzado a finales de: github.com/Mauker1/MaterialSearchView/issues/23
    • Comprobación de la última actualización, ahora es posible cambiar las cadenas.
    • Downvoter, atención a explicar por qué esto es malo?
    • alguna idea de cómo configurar android:imeOptions=»actionSearch» para el EditText de su componente? (Quiero mostrar un botón «buscar» en el teclado)
    • de hecho, he visto en su lib ya está ahí (android:imeOptions=»actionSearch|flagNoExtractUi»), pero mi teclado no mostrar una lupa o una búsqueda específica botón (sólo un botón enter) Es específico al fabricante o tengo que agregar algo más?
    • ¿Cuál es tu teléfono? @estoke (también puede abrir un tema en el github del proyecto para que podamos discutir esto más)

  7. 2

    Lo siguiente será crear un SearchView idéntica a la de Gmail y agregarlo a la Barra de herramientas. Usted sólo tendrá que implementar su propio «ViewUtil.convertDpToPixel» método.

    private SearchView createMaterialSearchView(Toolbar toolbar, String hintText) {
    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setDisplayShowCustomEnabled(true);
    actionBar.setDisplayShowTitleEnabled(false);
    SearchView searchView = new SearchView(this);
    searchView.setIconifiedByDefault(false);
    searchView.setMaxWidth(Integer.MAX_VALUE);
    searchView.setMinimumHeight(Integer.MAX_VALUE);
    searchView.setQueryHint(hintText);
    int rightMarginFrame = 0;
    View frame = searchView.findViewById(getResources().getIdentifier("android:id/search_edit_frame", null, null));
    if (frame != null) {
    LinearLayout.LayoutParams frameParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    rightMarginFrame = ((LinearLayout.LayoutParams) frame.getLayoutParams()).rightMargin;
    frameParams.setMargins(0, 0, 0, 0);
    frame.setLayoutParams(frameParams);
    }
    View plate = searchView.findViewById(getResources().getIdentifier("android:id/search_plate", null, null));
    if (plate != null) {
    plate.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    plate.setPadding(0, 0, rightMarginFrame, 0);
    plate.setBackgroundColor(Color.TRANSPARENT);
    }
    int autoCompleteId = getResources().getIdentifier("android:id/search_src_text", null, null);
    if (searchView.findViewById(autoCompleteId) != null) {
    EditText autoComplete = (EditText) searchView.findViewById(autoCompleteId);
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, (int) ViewUtil.convertDpToPixel(36));
    params.weight = 1;
    params.gravity = Gravity.CENTER_VERTICAL;
    params.leftMargin = rightMarginFrame;
    autoComplete.setLayoutParams(params);
    autoComplete.setTextSize(16f);
    }
    int searchMagId = getResources().getIdentifier("android:id/search_mag_icon", null, null);
    if (searchView.findViewById(searchMagId) != null) {
    ImageView v = (ImageView) searchView.findViewById(searchMagId);
    v.setImageDrawable(null);
    v.setPadding(0, 0, 0, 0);
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
    params.setMargins(0, 0, 0, 0);
    v.setLayoutParams(params);
    }
    toolbar.setTitle(null);
    toolbar.setContentInsetsAbsolute(0, 0);
    toolbar.addView(searchView);
    return searchView;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here