Implementar la biblioteca Universal Image Loader en Android usando Kotlin

La biblioteca Universal Image Loader también se conoce como (UIL). Es similar a Picasso y Glide, que se usa para cargar las imágenes desde la URL dentro de nuestra vista de imágenes dentro de nuestra aplicación de Android. Esta biblioteca de carga de imágenes se ha creado para proporcionar una solución potente, flexible y personalizable para cargar imágenes en Android desde el servidor. Esta biblioteca de carga de imágenes está siendo creada por un desarrollador independiente y está presente en la lista superior de GitHub. En este artículo, veremos la implementación de la biblioteca UIL dentro de la aplicación de Android usando Kotlin.

Nota : si está buscando usar la biblioteca UIL en la aplicación de Android usando Java. Consulte el siguiente artículo: Cómo usar la biblioteca del cargador de imágenes UIL en Android usando Java

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

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 imágenes UIL en el archivo build.gradle

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

implementation ‘com.nostra13.universalimageloader:universal-image-loader:1.9.5’

Después de agregar esta dependencia, simplemente sincronice su proyecto para instalarlo. 

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--on below line we are creating
        a simple text view for heading-->
    <TextView
        android:id="@+id/idTVHead"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="20dp"
        android:gravity="center"
        android:padding="8dp"
        android:text="Universal Image Loader"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />
 
    <!--on below line we are creating an
        image view for displaying image from url-->
    <ImageView
        android:id="@+id/idIVimage"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true" />
   
</RelativeLayout>

Paso 4: 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.

package com.gtappdevelopers.kotlingfgproject
 
import android.os.Bundle
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import com.nostra13.universalimageloader.core.DisplayImageOptions
import com.nostra13.universalimageloader.core.ImageLoader
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration
 
class MainActivity : AppCompatActivity() {
 
    // on below line we are creating
    // a variable for our image view.
    lateinit var imageView: ImageView
 
    // on below line we are creating
    // a variable for display options.
    lateinit var displayOptions: DisplayImageOptions
 
    // on below line we are creating
    // a variable for image loader.
    lateinit var imageLoader: ImageLoader
 
    // on below line we are creating a variable for image url
    var 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)
         
        // on below line we are initializing
        // our image view with its id.
        imageView = findViewById(R.id.idIVimage)
 
        // on below line we are
        // initializing our image loader.
        imageLoader = ImageLoader.getInstance()
 
        // on below line we are initializing image loader with its configuration.
        imageLoader.init(ImageLoaderConfiguration.createDefault(applicationContext))
 
        // on below line we are initializing our display options
        displayOptions = DisplayImageOptions.Builder()
 
            // on below line we are adding a
            // stub image as error image.
            .showStubImage(R.drawable.ic_error)
 
            // on below line we are adding an error
            // image this image will be displayed
            // when the image url is empty
            .showImageForEmptyUri(R.drawable.ic_error)
 
            // on below line we are calling
            // cache in memory and then calling build.
            .cacheInMemory().build();
 
        // on below line we are calling image loader
        // to display our image in our image view from image url
        imageLoader.displayImage(imgUrl, imageView, displayOptions, null)
 
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: