Como crear un RecyclerView Search en Android

Android RecyclerView Search Example

Hola amigos en esta ocasión les traigo el tutorial siguiente que es crear un RecyclerView con buscador de palabras.

Como crear un RecyclerView Search en Android

Como crear un proyecto en Android (Aquí)

Vamos a crear un proyecto para desarrollar nuestro ejemplo de un RecyclerView con buscador de palabras.

Crear proyecto Android para nuestro RecyclerView Search

Diseño RecyclerView Search en Android

Vamos a crear el diseño de nuestra aplicación pero para ello debemos tener agregada nuestra dependencia que puede varia en la versión de Android Studio que tengas ya sea con Implementación o Compile.

compile 'com.android.support:recyclerview-v7:+'
compile 'com.android.support:cardview-v7:23.+'

y ahora agregaremos los siguientes controles a nuestro activity_main.xlm.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <EditText
        android:id="@+id/edtSearch"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Buscar" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/edtSearch"
        >
    </android.support.v7.widget.RecyclerView>
   
</RelativeLayout>

Y el diseño nos quedaría así.

Diseño de nuestro RecyclerView Search en Android

Vamos a seguir con nuestra aplicación. Tenemos añadiro nuestro EditText que utilizaremos para hacer el filtro de las palabras que deseamos buscar en nuestro RecyclerView.
Ahora añadiremos un archivo mas para que nuestro RecyclerView tenga contenido que mostrar y le pondremos list_row.xml.

Añadir archivo list_row.xml para el contenido de nuestro RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/textRow"
            android:padding="15dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.v7.widget.CardView>

</LinearLayout>

Y el diseño nos quedaría de la siguiente forma.

y continuaremos.

Código de RecyclerView Search en Android

Ahora vamos a crear el código de nuestro RecyclerView para buscar las palabras crearemos la clase necesaria es un adaptador y en nuestra clase principal.

Añadiremos una clase y le daremos un Extends de la clase RecyclerView.Adapter<CustomAdapter.ViewHolder> para nuestro filtro de palabras.

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.ArrayList;

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder> {
    private ArrayList<String> names;

    public CustomAdapter(ArrayList<String> names) {
        this.names = names;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_row, parent, false);
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.textViewName.setText(names.get(position));
    }

    @Override
    public int getItemCount() {
        return names.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        TextView textViewName;

        ViewHolder(View itemView) {
            super(itemView);

            textViewName = (TextView) itemView.findViewById(R.id.textRow);
        }
    }
   
    public void filterList(ArrayList<String> filterdNames) {
        this.names = filterdNames;
        notifyDataSetChanged();
    }
}

Teniendo listo esto vamos a la clase MainActivity y añadiremos lo siguiente para nuestro ejemplo.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;
    EditText editTextSearch;
    ArrayList<String> names;
    CustomAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        names = new ArrayList<>();

        names.add("Naruto");
        names.add("One Piece");
        names.add("Dragon Ball");
        names.add("Berserk");
        names.add("Gintama");
        names.add("Nanatsu No taizai");
        names.add("Black Jack");
        names.add("Death Note");
        names.add("Code Geass");
       
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        editTextSearch = (EditText) findViewById(R.id.edtSearch);

        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        adapter = new CustomAdapter(names);
        recyclerView.setAdapter(adapter);

        editTextSearch.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void afterTextChanged(Editable editable) {
                //Despues de que se escribe algo filtra
                filter(editable.toString());
            }
        });

    }

    private void filter(String text) {
        //Nuevo elemento de tipo lista
        ArrayList<String> filterdNames = new ArrayList<>();

        //Ciclo que busca los elementos en la lista
        for (String s : names) {
            //Si existe el elemento en la lista lo mostrara
            if (s.toLowerCase().contains(text.toLowerCase())) {
                //Añadir el elemento a la lista
                filterdNames.add(s);
            }
        }

        // Llamar al metodo filtro de la lista
        adapter.filterList(filterdNames);
    }

}

Y listo.

Como crear un Emulador AVD en Android (Aquí)

Vamos a crear un emulador para ejecutar nuestra aplicación del RecyclerView Search.

RecyclerView Search con la lista de elementos

RecyclerView Search filtrando los elementos al escribir en el EditText

Y listo tendremos nuestro RecyclerView listo para filtrar nuestro contenido.
Referencia: SimplifiedCoding

Curso Kotlin Español