¿Cómo implementar la biblioteca de carga de imágenes de Fresco en Android con Kotlin?

Fresco es una biblioteca de carga de imágenes que se usa ampliamente para cargar las imágenes dentro de las aplicaciones de Android con la ayuda de las URL de las imágenes. Esta biblioteca se puede utilizar para cargar las imágenes con la URL de la imagen. Junto con eso, podemos agregar una imagen de marcador de posición para nuestra vista de imagen para que cuando la imagen se cargue desde la URL podamos mostrar una imagen de marcador de posición. También podemos mostrar una imagen de error si la URL que estamos usando para cargar la imagen está rota. En este artículo, crearemos una aplicación simple en la que cargaremos una imagen desde una URL de imagen utilizando la biblioteca Fresco. 

Nota

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Cómo crear/iniciar un nuevo proyecto en Android Studio

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

Navegue a Gradle scripts 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.facebook.fresco:fresco:2.3.0'

Ahora sincroniza tu proyecto para instalar la dependencia.

Paso 3: agregar permisos de Internet en AndroidManifest.xml

Vaya a aplicación > manifiesto > AndroidManifest.xml y agréguele permisos de Internet en la etiqueta del manifiesto. 

<uses-permission android:name="android.permission.INTERNET"/>

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

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <!-- Textview to display the heading of the app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="50dp"
        android:layout_marginRight="20dp"
        android:gravity="center"
        android:padding="5dp"
        android:text="Fresco Image Loading Library"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />
  
    <!--on below line we are creating a simple 
        drawee view for our image view to display-->
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/idIVImage"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:layout_margin="10dp" />
      
</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.

package com.gtappdevelopers.kotlingfgproject
  
import android.net.Uri
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.facebook.drawee.backends.pipeline.Fresco
import com.facebook.drawee.view.SimpleDraweeView
  
class MainActivity : AppCompatActivity() {
  
    // on below line we are creating a string 
    // variable for our url of the image.
    var url: String =
        "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
          
        // on below line we are initializing our fresco library.
        Fresco.initialize(this)
        setContentView(R.layout.activity_main)
          
        // on below line we are parsing
        // the url from the string url.
        val imageUri: Uri =
            Uri.parse(url)
          
        // on below line we are initializing our drawee view with its id.
        val draweeView = findViewById(R.id.idIVImage) as SimpleDraweeView
          
        // on below line we are setting image 
        // uri for our drawee view to load image.
        draweeView.setImageURI(imageUri)
  
    }
}

Ahora ejecute su proyecto para ver el resultado. 

Producción: