Tip Android #37: SearchView (búsqueda en la ActionBar-Toolbar)

18/07/2015
android tip

Una de las acciones más habituales que se suelen ubicar en la ActionBar es la búsqueda. Android SDK proporciona el widget SearchView que permite incluir la funcionalidad de búsqueda en la propia ActionBar mostrando un EditText en la misma para introducir el texto.

Android SearchView

SearchView es un widget nativo de Android 3+ pero viene incluído en la librería de compatibilidad por lo que puede utilizarse en Android 2. En este tip el ejemplo, basado a su vez en el proyecto de ejemplo del artículo Diseño Android: ActionBar con Toolbar, será compatible con Android 2.3+

Los pasos a seguir son los siguientes:

  1. Incluir la librería de compatibilidad (módulo appcompat) y configurar la ActionBar. Consultar el artículo anteriormente indicado.
  2. Definir el widget SearchView en el menú de la ActionBar ya que se trata de un MenuItem
  3. <?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"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".MainActivity">
    
        <item
            android:id="@+id/action_search"
            android:icon="@android:drawable/ic_menu_search"
            android:title="@string/action_search"
            app:actionViewClass="android.support.v7.widget.SearchView"
            app:showAsAction="always"/>
    
    
  4. En la Activity asignamos al SearchView una implementación de listener SearchView.OnQueryTextListener para gestionar dos eventos:
    • onQueryTextChange: se modifica el texto de búsqueda.
    • onQueryTextSubmit: se solicita realizar la búsqueda pulsando el botón “Enter” del teclado (generalmente se muestra una lupa en el teclado).

    En el ejemplo se utiliza un TextView para mostrar lo que el usuario va introduciendo en el campo búsqueda y al solicitarse la búsqueda se muestra un Toast.

    package com.danielme.android.tips.searchview;
    
    import android.os.Bundle;
    import android.support.v4.view.MenuItemCompat;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.SearchView;
    import android.support.v7.widget.Toolbar;
    import android.view.Menu;
    import android.view.MenuInflater;
    import android.view.MenuItem;
    import android.view.View;
    import android.widget.TextView;
    import android.widget.Toast;
    
    
    public class MainActivity extends AppCompatActivity {
    
        TextView textView;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            textView = (TextView) findViewById(R.id.textView);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            MenuInflater inflater = getMenuInflater();
            inflater.inflate(R.menu.main_activity_menu, menu);
    
            final MenuItem searchItem = menu.findItem(R.id.action_search);
            final SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
            //permite modificar el hint que el EditText muestra por defecto
            searchView.setQueryHint(getText(R.string.search));        
            searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
                @Override
                public boolean onQueryTextSubmit(String query) {
                    Toast.makeText(MainActivity.this, R.string.submitted, Toast.LENGTH_SHORT).show();
                    //se oculta el EditText
                    searchView.setQuery("", false);
                    searchView.setIconified(true);
                    return true;
                }
                @Override
                public boolean onQueryTextChange(String newText) {
                    textView.setText(newText);
                    return true;
                }
            });
    
    
            return super.onCreateOptionsMenu(menu);
        }
    ...
    
  5. Opcionalmente podemos personalizar el estilo del EditText del campo de búsqueda. En este caso es especialmente sencillo ya que a diferencia de un EditText típico como el de Tip Android #16: Estilos para EditText, sólo es necesario aplicar un 9-patch porque en la práctica tendremos un único estado. En cualquier caso, en Material Design el campo de texto del SearchView no tiene linea inferior.

    textfield_custom.9

    //http://stackoverflow.com/questions/11085308/changing-the-background-drawable-of-the-searchview-widget
    View searchPlate = (View) searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
    searchPlate.setBackgroundResource(R.mipmap.textfield_custom);
    
  6. Se puede forzar que el SearchView se muestre siempre desplegado con la llamada searchView.setIconified(false);
  7. El resultado


    El proyecto completo para Android Studio se encuentra en Github. Para más información sobre cómo utilizar GitHub, consultar este artículo.

    << TIPS ANDROID

One Response to Tip Android #37: SearchView (búsqueda en la ActionBar-Toolbar)

  1. Hola Daniel, Como estás? Estoy trabajando con búsqueda en actionbar usando el widget searcView pero me gustaría implementar la búsqueda en un listview que este en esa misma actividad. Tienes algún tip sobre esto? Llevó mucho tiempo tratando de lograrlo y aún no lo completo. Gracias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: