Uso del RecyclerView en proyecto final

HERLMASCOT
La etiqueta RecyclerView me sirve para crear lista de datos que se pueda desplegar en la pantalla
Creamos un nuevo proyecto

En nuestro activity_main.xml vamos a importar las dependencias de RecyclerView; pulsamos el

icono que nos aparece de descargar.

Luego arrastramos el RecyclerView a nuestro constraintLayout le damos un id rvMascota en

Layout le damos un Margin_Botton de 20 para separarlo del titulo
En el paquete layout damos clic derecho/ new /Layout Resource File y creamos un nuevo Layout
con el nombre de mascota_item y damos ok.
Prácticamente es un nuevo activity_main.xml que creamos y en este vamos a maquetar como es
que vamos a presentar cada una de las instancias de nuestra lista del RecyclerView
Aqui maquetamos nuestra instancia le agregamos un ImageView, y cuatro TextView de nombre,
descripcion, raza y fecha con sus respectivos id, es importante que en layout_height le demos los
parametros de wrap_content ya que si esta en match_parent esto hara que cada una de nuestras
instancias tome el largo de toda la pantalla lo que hara que nuestras listas esten muy separadas,
y en layout_width si le dejamos en match_parent ya que nuestra instancia tomara todo el ancho
de la pantalla
Ahora nos vamos a java y en el paquete com.example.helmascot creamos una nuevo paquete y
lo llamamos Adaptador

Arrastramos nuestro MainActivity.java dentro del paquete Adaptador y creamos una clase
llamada Mascota
Dentro de nuestra clase Mascota agregamos los atributos que tenía nuestra mascota_item y
como en toda clase creamos un constructo vacío, luego un constructor con todos nuestros
atributos y luego nuestras etiquetas Getter and Setter
Ahora creamos una nueva clase y le llamamos MascotaViewHolder y le agregamos el extends
RecyclerView.ViewHolder y nos aparecerá en rojo le damos clic en el foquito rojo que nos
aparece y nos pedirá importar un nuevo método le damos aceptar y nos aparecerá asi

Esta subclase nos servirá para que los datos de la estructura de nuestra plantilla de
mascota_item lo posea nuestro RecyclerView
Con itemView.findViewById() vamos a invocar los datos de nuestra plantilla a nuestro
RecyclerView
Ahora agregamos un nuevo javaclass y lo llamaremos MascotaAdaptador y le agregaremos el
extends de RecyclerView.Adapter esta nueva sub clase nos servirá para hacer funcionar nuestro
RecyclerView y hará que cada atributo que a poseído de la plantilla mascota_item aparezca en
cada instancia de nuestra lista
Al agregarle el extends nos marcara en rojo, le damos clic en el foquito rojo y nos pedirá que cree
nuevos métodos le damos aceptar; agregamos un prívate ArrayList<Mascota>mascota;
Y creamos un constructor de ese ArrayList
En donde nos dice OnCreateViewHolder nos vamos a donde dice ViewGroup y le cambiamos los
parámetros por viewgroup y donde dice int le cambiamos su parámetro por i esto es para que los
ítem se muestren en la lista que inicia en el orden 0

Luego con la etiqueta LayoutInflater vamos a inflar la vista de nuestro RecyclerView

En el OnBindViewHolder en la etiqueta ViewHolder le cambiamos su parámetro por viewHolder y

al igual que el primero en int le cambiamos por i

Con esta etiqueta vamos a obtener los datos y hacer que aparezca en cada instancia de nuestra
lista

Finalmente, en getItemCount haremos que nos retorne mascota. size();

El código completo quedara asi

Finalmente, ya en nuestro MainActivity.java creamos un ArrayList con el nombre mascota

Luego con la etiqueta add creamos cada una de las instancias y le adicionamos sus respectivos
datos

Para agregar las imágenes nos vamos al paquete Drawable clic derecho/ Show in Explorer/
copiamos las imágenes en jpg y la pegamos dentro de la carpeta Drawable (los nombres de
preferencia que sea una sola palabra y tiene que ser en formato jpg)

Invocamos a nuestro RecyclerView

Agregamos la etiqueta LinearLayoutManager que es el que se va a encargar de posicionar en

forma vertical y medir el tamaño de cada uno de nuestras instancias de nuestro RecyclerView
Fianlemenente agregamos el setAdapter para que se ubiquen los componentes de cada instancia
en su posicion tal como esta en nuestra plantilla de modelo

Finalemente el codigo completo quedar asi

Nuestro resultado final se mostrara asi