En este tutorial explicamos cómo hacer un RecyclerView en Android Studio, como implementarlo desde un fragmento o bien desde una Actividad. Te mostramos un resumen con los pasos a seguir y luego hacemos un ejemplo para que sea más clara la explicación.
Resumen rápido Android RecyclerView.
A continuación dejamos un resumen con lo principal, más adelante realizamos un ejemplo paso a paso.
La diferencia entre Fragmento y actividad es el último paso, ya que solo se llamará al adaptador para que funcione.
1.- Primero configuramos la UI.
El RecyclerView se agrega como cualquier otro elemento, solo arrastramos a la vista y lo acomodamos donde sea necesario en nuestro proyecto.
2.- Luego creamos el Item.
Creamos un nuevo Layout Resource File, es decir un archivo XML que contendrá el diseño del Item que se mostrará en el RacyclerVirew.
Este Item se repetirá tantas veces como se lo indiquemos al RecyclerView y podremos modificar su contenido, como textos, imágenes, etc. En este caso su ID es “item”.
3.- Creamos el Adaptador para el RecyclerView en Android.
Este adaptador nos permite mostrar el ítem en el RecyclerView.
- Creamos una nueva Clase Java, en un archivo nuevo que llamaremos RVAdapter.
- Dentro de esta clase creamos una clase que llamaremos VistaItem, aquí relacionamos variables en Java con los elementos del Item en XML.
Extendemos la clase RVAdapter con:
extends RecyclerView.Adapter<RVAdapter.VistaItem>
Nos marca un error y nos sugiere implementar 3 métodos, los implementamos.
Creamos un constructor para recibir variables cuando se llame a este adaptador. En este caso creamos una variable tipo arreglo que contendrá los textos para cada Item.
Usar layout del Item (onCreateViewHolder)
Este método crea la vista del Item, por lo que aquí es donde indicaremos el layout de nuestro Item (R.layout.item) y la clase que se encargará de controlarlo (VistaItem).
Configurando getItemCount.
Aquí solo regresamos el número de elementos que tendrá el RecyclerView.
Configurando onBindViewHolder.
Aquí es donde vamos a configurar cada ítem de manera individual. Con la variable posición sabemos que Item se está configurando, y con el arreglo podemos darle un valor individual a cada Item.
La variable holder es la clase VistaItem que contiene los elementos en XML del Item, por eso la usamos para acceder a los elementos xml del Item.
También se pueden agregar eventos onClickListener en el RecycleView.
4.- Configurando la Actividad principal Andriod Recyclerview.
En la actividad principal, primero relacionamos una variable de java con el RecyclerView en la UI en XML, mediante su ID.
Creamos un arreglo con el texto que se escribirá en cada Item.
Luego creamos un adaptador con la clase RVAdapter y se lo asignamos al RecyclerView. Sin olvidarnos de agregar el arreglo como parámetro en el RVAdapter.
private RecyclerView rvHome; ArrayList arreglo = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); rvHome = findViewById(R.id.recyclerview); arreglo.add(“Texto 1”); arreglo.add(“Texto 2”); arreglo.add(“Texto 3”); arreglo.add(“Texto 4”); arreglo.add(“Texto 5”); RVAdapter adapter= new RVAdapter( arreglo); rvHome.setAdapter(adapter); rvHome.setLayoutManager(new LinearLayoutManager(this)); }
Con esto debería funcionar correctamente.
5.- Configurando el Fragmento Recyclerview Andriod.
Si vamos a usar le RecyclerView en un Fragmento, necesitaremos cambiar algunas cosas.
El contexto siempre es importante porque en alguna función nos lo pedirán. Asi que creamos una variable con el contexto.
private Context mCont = getContext();
El primer paso es relacionar una variable de java con el RecyclerView en XML, mediante su ID.
private RecyclerView rvHome;
rvHome = view.findViewById(R.id.recyclerview);
Debemos hacerlo dentro del método onCreateView. Primero debemos inflar la vista, luego declarar las variables y al final regresar la vista. El orden es importante en este caso.
El método iniciarRecycler lo explicamos enseguida.
private RecyclerView rvHome; private Context mCont = getContext(); @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_fr_home, container, false); iniciarRecycler(); rvHome = view.findViewById(R.id.recyclerview); return view; }
Luego creamos un arreglo para el texto de cada Item, creamos un adaptador con la clase al RVAdapter lo llamamos adapter e indicamos que el RecyvlerView usará ese adaptador.
En nuestro caso lo hacemos en un método que llamamos iniciarRecycler().
private ArrayList arreglo= new ArrayList<>();
.
.
.
private void iniciarRecycler(){
arreglo.add("TEXTO 1");
arreglo.add("TEXTO 2");
arreglo.add("TEXTO 3");
arreglo.add("TEXTO 4");
arreglo.add("TEXTO 5");
RVAdapter adapter= new RVAdapter(mCont, arreglo);
rvHome.setAdapter(adapter);
rvHome.setLayoutManager(new LinearLayoutManager(getContext()));
}
}
Anuncio
RecyclerView Android ejemplo paso a paso.
Ya vimos en el resumen rápido lo principal para crear un RecyclerView, ahora vamos a hacerlo paso a paso para mostrar detalles sobre este proceso.
1.- Agregar el RecyclerView a la Interfaz.
Como primer paso agregamos el RecyclerView a la UI en XML. Lo podemos hacer usando código o bien en modo “design” solo lo buscamos y lo arrastramos a la Interfaz.
Podemos acomodarlo en el lugar que queramos, como cualquier otro elemento. En nuestro caso usamos ConstraintLayout.
2.- Creando layout del Item.
Como segundo paso podemos crear el diseño del Item que se usará en el RecyckerView.
Para esto debemos crear un nuevo Layout Resoure File. Lo agregamos dando clic derecho a la carpeta layout/New/Layout Resource File.
Nos aparece un ventana en la cual indicamos el nombre de este layout, en nuestro caso se llamara “item”.
Usamos ConstraintLayout, el diseño será muy simple pero puedes hacer un diseñoi más complicado si asi lo requiere tu proyecto.
Este es el diseño de nuestro Item:
Nota: Se recomienda usar “wrap_content” para el alto del Layout de todo el ítem (layout_parent).
3.- RecyclerView Adapter.
En necesario crear un Adaptador para el RecyclerView. Este se encargará de seleccionar el layout del Item, configurar sus elementos y mostrar el número de ítems deseado.
Crearemos una nueva clase en Java. Damos clic derecho a la carpeta java o bien donde estan las clases, vamos a New/ Java Class.
Nos pedirá el nombre de la clase, indicamos que se llamará “RVAdapter”.
3.1. Creando la clase VistaItem.
Dentro de este archivo crearemos una clase que se llamará “VistaItem”. Esta clase será el ViewHolder, es decir, aquí tendremos la información de la vista del Item.
Aquí relacionaremos variables de Java con los elementos XML del Item. (Aunque aún nos falta configurar el código para que esto sea posible en el método onCreateViewHolder que crearemos a continuación).
3.2. Extendemos el Adaptador e implementamos métodos.
Posteriormente extendemos la clase RVAdapter con los siguiente:
public class RVAdapter extends RecyclerView.Adapter{……}Android nos señalará un error, en el foco rojo nos sugiere Implementar métodos, los cuales tenemos que implementar.
Implementamos los 3 métodos que aparecen:
3.3. Creamos un constructor. (Variables de entrada al adaptador).
El siguiente paso es crear un constructor, el cual nos ayudará a recibir información cuando se llame a este adaptador RVAdapter. Con el constructor podremos recibir variables y usarlas para configurar a cada Item.
Antes de crear el condtructor, vamos a declarar las variables que usaremos. En este caso solo será una, la cual contendrá el Texto que se mostrará en cada Item de manera Individual.
Declaramos esta variable tipo ArrayList<> vacía ya que su valor lo recibiremos en el constructor.
private final ArrayList<String> mTexto= new ArrayList<>();
Ahora si creamos el constructor, para crearlo podemos escribir el código o bien dar clic derecho en el nombre de la clase RVAdapter, buscamos la opción de Generate.
Nos aparecerán más opciones y elegimos constructor.
Luego aparece otra ventana.
Se agrega el siguiente código, donde notamos que automáticamente el constructor usa la variable que habíamos declarado.
El constructor RVAdapter recibirá una variable tipo ArrayList llamada mTexto. El valor de esta variable se lo asignaremos a la variable que lleva el mismo nombre pero es del Adaptador. Por esa razón indicamos this.mTexto. El this es para indicar el contexto de este adaptador.
3.4. Configuramos el método onCreateViewHolder. (Layout y clase del Item).
Con este método se crea la vista del Item, por lo que aquí es donde señalamos el layout del Item (R.layout.item) y la clase que se encarga de controlarlo (VistaItem).
Así nos queda el código:
Nota: No se nos modificar el return, por default es null. Pero debe de regresar la variable holder, que contiene la clase VistaItem.
3.5. Configurando el getItemCount. (Número de elementos del RecyclerView)
La función de este método es indicar el número de Items que tendrá el RecyclerView.
Por default es cero, lo que indica que ningún Item será mostrado.
Como el número de Items depende de la variable de entrada al constructor mTexto, aquí usaremos su tamaño para indicar el número de Items.
mTexto.size();
3.6. Configurando onBindViewHolder. (Personalizar Items)
En este método vamos a personalizar cada Item de manera individual. Podemos ver que tenemos 2 variables.
- Variable position. La variable position nos ayuda a identificar qué número de Item se está configurando.
- Vaiable holder. Esta es la clase VistaItem, por lo que podemos acceder a los elementos XML del layout Item.
Para cambiar el texto del Item hacemos lo siguiente:
holder.txtTexto.setText( mTexto.get( position ) );
Donde:
- holder, accedemos a la clase VistaItem que contiene el layout del Item.
- txtTexto, es la variable que controla el TextView del Item, se declaró en VistaItem.
- setText(), es el comando para poner texto a un TextView.
- mTexto, es el arreglo que contiene los textos a mostrar para cada elemento.
- position, es la posición del elemento a configurar.
Además se puede agregar un evento onClick a todo el layout de cada Item, con una estructura similar a la anterior.
Y con esto terminamos el Adaptador.
4.- Configurando la Actividad Principal Andriod Recyclerview.
En la Activida principal, solo debemos llamar al RVAdapter para agregarsolo al RecyclerView de la UI.
El contexto siempre es importante porque en alguna función nos lo pedirán. Asi que creamos una variable con el contexto.
private Context mCont = getContext();
Primero creamos una variable tipo RecyclerView en Java, para relacionarla con el RecyclerView en XML mediante su ID. Lo que se hace con cualquier otro elemento.
private RecyclerView rvHome;
rvHome = view.findViewById(R.id.recyclerview);
Luego configuramos la variable que contendrá los Textos o elementos que configuran a cada Item.
Posteriormente creamos el adaptador e indicamos que el RecyclerView lo usará.
private RecyclerView rvHome; ArrayList arreglo = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); rvHome = findViewById(R.id.recyclerview); arreglo.add(“Texto 1”); arreglo.add(“Texto 2”); arreglo.add(“Texto 3”); arreglo.add(“Texto 4”); arreglo.add(“Texto 5”); RVAdapter adapter= new RVAdapter( arreglo); rvHome.setAdapter(adapter); rvHome.setLayoutManager(new LinearLayoutManager(this)); }
Con esto debería funcionar correctamente.
5.- Configurando el Fragmento Andriod Recyclerview.
Si vamos a usar le RecyclerView en un Fragmento, necesitaremos cambiar algunas cosas con respecto a una Actividad, pero son muy simples.
El primer paso es relacionar una variable de java con el RecyclerView en XML, mediante su ID. Pero no es tan sencillo como en una Actividad.
Debemos hacerlo dentro del método onCreateView.
Primero debemos inflar la vista, luego declarar las variables y al final regresar la vista.
De aquí en adelante ya podemos hacerlo igual que en la Actividad.
- Creamos un arreglo para el texto de cada Item.
- Luego creamos un adaptador con la clase RVAdapter
- Por último indicamos que el RecyclerView usará ese adaptador.
El método iniciarRecycler lo explicamos enseguida.
private RecyclerView rvHome; private Context mCont = getContext(); private ArrayList arreglo= new ArrayList<>(); @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_fr_home, container, false); iniciarRecycler(); rvHome = view.findViewById(R.id.recyclerview); return view; } private void iniciarRecycler() { arreglo.add("TEXTO 1"); arreglo.add("TEXTO 2"); arreglo.add("TEXTO 3"); arreglo.add("TEXTO 4"); arreglo.add("TEXTO 5"); RVAdapter adapter= new RVAdapter(mCont, arreglo); rvHome.setAdapter(adapter); rvHome.setLayoutManager(new LinearLayoutManager(getContext())); }
Con eso debería funcionar correctamente en un Fragmento.
Para más tutoriales de Android Studio ve a este enlace.
Algunos temas que te pueden interesar:
Shared Preferences Android Studio (Editar, Leer, Eliminar, datos).