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 proyecto en Android (AquĆ)
Vamos a crear un proyecto para desarrollar nuestro ejemplo de un RecyclerView con buscador de palabras.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Ć.
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.
<?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 filtrando los elementos al escribir en el EditText |
Referencia: SimplifiedCoding

No hay comentarios:
Publicar un comentario