¿Cómo usar la biblioteca del cargador de imágenes COIL en las aplicaciones de Android?

COIL es un acrónimo de Coroutine Image Loader. COIL es una de las famosas bibliotecas de carga de imágenes desde URL en Android. Es una biblioteca moderna para cargar imágenes desde el servidor. Esta biblioteca se utiliza para cargar imágenes desde servidores, carpetas de activos y desde la carpeta dibujable en el proyecto de Android. La característica importante de esta biblioteca es que es rápida, ligera y fácil de usar. En este artículo, veremos cómo usar esta biblioteca de carga de imágenes en las aplicaciones de Android .

¿Por qué debemos usar COIL para cargar imágenes? 

La biblioteca de carga de imágenes COIL es proporcionada por Kotlin Coroutines, que se utiliza para cargar imágenes en Android. Esta biblioteca está especialmente diseñada para cargar imágenes en Kotlin. Es moderno, fácil de usar, liviano y rápido para cargar imágenes desde el servidor. Esta es la nueva biblioteca y proporciona una nueva optimización para cargar imágenes desde el servidor de manera muy eficiente. Como Kotlin ahora se ha anunciado oficialmente como el lenguaje preferido para el desarrollo de Android, es por eso que para cargar imágenes deberíamos preferir usar COIL para cargar imágenes en Android. 

¿Cuáles son las ventajas de usar COIL sobre Picasso, Glide y UIL?

• Google ha anunciado oficialmente Kotlin como lenguaje preferido para el desarrollo de Android y COIL es la biblioteca que está mejor optimizada con Kotlin. Entonces, la optimización de esta biblioteca con Kotlin facilita la carga de imágenes desde el servidor.
• COIL carga imágenes mucho más rápido con la cantidad de optimizaciones que incluyen memoria, almacenamiento en caché de disco, reutilización de mapas de bits y reducción del espacio de la imagen en la memoria, lo que la hace más rápida en comparación con otras bibliotecas de carga de imágenes.
• COIL agrega ~2000 métodos a su APK, que son muy inferiores en número en comparación con Picasso , Glide y UIL . Esto hace que esta biblioteca sea muy liviana y fácil de usar.
• COIL es la primera biblioteca de carga de imágenes que se introduce por completo en Kotlin y utiliza algunas bibliotecas modernas de Android, como los ciclos de vida de Okio, OkHttp y AndroidX.

Implementación paso a paso de la biblioteca de carga de imágenes COIL

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: agregue la dependencia de la biblioteca de carga de imágenes de bobina en el archivo build.gradle

Navegue hasta los scripts de gradle y luego hasta el nivel build.gradle (Módulo). Agregue la siguiente línea en el archivo build.gradle en la sección de dependencias.

implementación («io.coil-kt:coil:1.1.0»)

Después de agregar la dependencia, haga clic en la opción «sincronizar ahora» en la esquina superior derecha para sincronizar el proyecto. 

Paso 3: Agregar permiso de Internet en el archivo AndroidManifest.xml

Navegue a la aplicación > Manifiesto para abrir el archivo Manifiesto. En el archivo de manifiesto, estamos agregando permiso de Internet para cargar imágenes desde Internet. Agregue las siguientes líneas en su archivo de manifiesto.

<!–Permiso para Internet–>

<usos-permiso android:name=”android.permission.INTERNET” />

<usos-permiso android:name=”android.permission.ACCESS_NETWORK_STATE” />

Paso 4: crea un nuevo ImageView en tu activity_main.xml.

Navegue a la aplicación > res > diseño para abrir el archivo activity_main.xml . A continuación se muestra el código para el archivo  activity_main.xml .

<?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="match_parent"
    tools:context=".MainActivity">
  
    <!--ImageView is created below-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:contentDescription="@string/app_name" />
  
</RelativeLayout>

Paso 5: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import coil.load
  
class MainActivity : AppCompatActivity() {
  
    // image url that we will load in our image view. 
    val imgurl = "https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png"
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
          // val created for our imageview and 
          // initializing it with image id. 
        val img = findViewById<ImageView>(R.id.imageView)
          
          // below line is for loading 
          // image url inside imageview.
        img.load(imgurl) {
            // placeholder image is the image used 
              // when our image url fails to load. 
            placeholder(R.drawable.ic_launcher_background)
        }
    }
}

Producción: