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"/>
  3. 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).

    Cursos aplicaciones móviles

    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);
    }
...
  4. 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.

    Cursos aplicaciones móviles

    //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);
  5. Se puede forzar que el SearchView se muestre siempre desplegado con la llamada searchView.setIconified(false);

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

    Master Pyhton, Java, Scala or Ruby

Un comentario sobre “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

Deja un comentario

Este sitio utiliza Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.