Cómo cargar imágenes cargadas de internet utilizando RecyclerView en Android

Tiempo de lectura: 2 minutos

Hola a todos, esta vez voy a explicar cómo se pueden cargar imágenes obtenidas de una URL dentro de un RecyclerView en Android.

Si no sabes crear un RecycerView, te recomiendo que visites el POST anterior de Cómo crear un RecyclerView en Android

Ahora sí, empezamos.

Lo primero de todo es añadir una ImageView dentro del Layout qué representa una ROW del RecyclerView. Para ello hacemos lo siguiente:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="100dp">

 
    <RelativeLayout
        android:id="@+id/capaPrincipal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <RelativeLayout
        android:id="@+id/capaPrincipal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="30dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imagen"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:padding="10dp"/>

        </LinearLayout>

    </RelativeLayout>

</RelativeLayout>

Una vez añadida, le asignamos la id «imagen» android:id="@+id/imagen" para poder referenciarla desde el holder del Recycler de la siguiente forma:

public class ListaViewHolder extends RecyclerView.ViewHolder {

    public ImageView imagen;
   
    public int type;
   
    public ListaViewHolder(View itemView, int type) {
        super(itemView);
       
        imagen= itemView.findViewById(R.id.imagen);
 
        this.type = type;
    }
}

Al tratarse de una imagen cargada de forma remota, antes de añadirla al objeto de nuestro Recycler, tenemos que añadir una librería a nuestro proyecto, qué se encargará de cargar la imagen correspondiente de forma asíncrona y directamente en el ImageView. Para ello podemos utilizar dos librerías bastante conocidas, una es Glide https://github.com/bumptech/glide y otra es Picasso https://square.github.io/picasso/

En mi caso he utilizado Picasso para este ejemplo, pero las dos librerías funcionan de forma similar.

Primero tenemos que añadir la librería al build.gradle de nivel de :app dentro de dependencies

    dependencies {
      implementation 'com.squareup.picasso:picasso:2.5.2;
    }

Una vez añadido pulsamos en sincronizar (Sync Now) y esperamos a qué se descargue la librería.

Ahora ya podemos utilizar la librería en nuestro objeto RecyclerView.

Simplemente, tenemos que añadir la siguiente línea en el método onBindViewHolder

@Override
    public void onBindViewHolder(@NonNull ListaViewHolder holder, final int position) {

String rutaImagen = "https://devcodelight.com/wp-content/uploads/2022/02/cropped-cropped-cropped-cropped-light_logo-1.png";
Picasso.with(context).load(rutaImagen).fit().centerCrop().into(holder.imagen);

}

Recuerda pasar el Context context por el constructor del RecycerView.

Y listo, así de fácil podemos cargar imágenes dentro de nuestros RecyclerViews.