Android Recycler View and Kotlin - Loading images with Glide

English version: 

This article is meant to be a quick guide to implement Glide image loading library with Android's recycler view using Kotlin. The links to articles, Glide's github repo and more are at the end of this article.

Implementing Glide in your project is fairly simple and straight forward now a days, the first step we have to do is adding our projects dependencies as follows:

On our module build script file we'll add the following:

...
// Add this to your plug in definitions
apply plugin: 'kotlin-kapt'

...
dependencies {
...
def glideVersion = "4.4.0"
implementation "com.github.bumptech.glide:glide:$glideVersion"
kapt "com.github.bumptech.glide:compiler:$glideVersion"
...
}

This will enable the library on our project.

After adding the dependencies to the project it is quite easy to implemente, as easy as adding a couple of line in our Adapter, here is an example:

override fun onBindViewHolder(holder: FeedItemViewHolder, position: Int) {

    val feedItem = getItem(position)
    holder.itemView.setOnClickListener {
        onClickListener.onClick(feedItem)
    }
// get a reference to the image view where we'll be loading an image onto
val image =
    holder.itemView.findViewById<ImageView>(R.id.image)

// pass the image view's context to the Glide's library with method to specify it's context
Glide.with(image.context)
        // pass the image remote url
    .load(feedItem.urlToImage)
        // add the type of transition to display when loading
    .transition(DrawableTransitionOptions.withCrossFade())
    // and finally the reference to the image view we are going to be loading onto.
    .into(image)
}

And that is about it! Going forward you would like to cache the images you've loaded to avoid making several loading request and thus, saving memory and making your app more efficient, something that is not covered in this article, but would be writing about it next time


Resources for this article:
https://bumptech.github.io/glide/int/recyclerview.html

https://www.zoftino.com/android-image-loading-using-glide-library

https://stackoverflow.com/questions/26890190/images-in-recyclerview

https://medium.com/@vlonjatgashi/using-glide-with-kotlin-5e345b557547


Versión en español:

 Este articulo tiene la intención de ser una guía rápida para implementar la librería para la carga de imágenes Glide junto con el recycler view de Android utilizando Kotlin. Los enlaces hacia los artículos, el repositorio de github de Glide's y más se encuentran al final de este artículo.

Implementar Glide en tu proyecto es bastante fácil y sencillo en estos días, el primer paso que tenemos que hacer es agregar las dependencias a nuestro proyecto de la siguiente maneraÑ

En archivo script de nuestro modulo agregamos lo siguiente:

...
// Agrega este plugin en tus definiciones
apply plugin: 'kotlin-kapt'
...
dependencies {
...
def glideVersion = "4.4.0"
implementation "com.github.bumptech.glide:glide:$glideVersion"
kapt "com.github.bumptech.glide:compiler:$glideVersion"
...
}

Esto habilitara la librería en nuestro proyecto.

Después de agregar las dependencias al proyecto es algo fácil de implementa, tan sencillo como agregar unas cuantas lineas en nuestro adaptador, aquí hay un ejemplo:

override fun onBindViewHolder(holder: FeedItemViewHolder, position: Int) {

    val feedItem = getItem(position)
    holder.itemView.setOnClickListener {
        onClickListener.onClick(feedItem)
    }
// obtén una referencia al image view en donde estaremos cargando la imagen
val image =
    holder.itemView.findViewById<ImageView>(R.id.image)

// pasa el contexto del image view's a la librería de Glide
Glide.with(image.context)
        // pasa el url remoto de la imagen
    .load(feedItem.urlToImage)
        // agrega el tipo de transición a desplegar cuando cargue
    .transition(DrawableTransitionOptions.withCrossFade())
    // y finalmente la referencia al image view en donde estaremos cargando la imagen
    .into(image)
}

Y eso es todo! Más adelante sería bueno guardar cache de las imágenes ya cargadas para evitar hacer varias peticiones y así, ahorrar memoria y hacer tu app mas eficiente, algo que no esta cubierto en este artículo, pero si será algo que estaré escribiendo para la próxima vez.

Recursos para este artículo:
https://bumptech.github.io/glide/int/recyclerview.html

https://www.zoftino.com/android-image-loading-using-glide-library

https://stackoverflow.com/questions/26890190/images-in-recyclerview

https://medium.com/@vlonjatgashi/using-glide-with-kotlin-5e345b557547