Biblioteca de carga de imágenes de Fresco en Android con ejemplo

Fresco es una de las famosas bibliotecas de carga de imágenes desde URL en Android. Es una poderosa biblioteca para mostrar y administrar imágenes desde URL. Esta biblioteca puede cargar imágenes desde los dispositivos, servidores y otras fuentes locales de los usuarios. La característica más importante de esta biblioteca es mostrar una imagen de marcador de posición cuando la imagen de la URL tarda mucho en cargarse. Junto con esto, podemos usar una imagen de error cuando la imagen no se muestra debido a algún problema. Para guardar datos y CPU, esta biblioteca utiliza tres niveles de caché, de los cuales dos están en la memoria y uno en el almacenamiento interno. Puedes consultar la documentación oficial de Fresco .  

Implementación de esta biblioteca

A continuación se muestra una imagen de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java . 

Implementación paso a paso

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 Java como lenguaje de programación.

Paso 2: agregue la dependencia de la biblioteca de imágenes de Fresco 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 ‘com.facebook.fresco:fresco:2.3.0’

y, 

Agregue el repositorio de Google en el archivo build.gradle del proyecto de la aplicación si por defecto no está allí

script de compilación {

 repositorios {

    Google()

    mavenCentral()

}

Todos los componentes de Jetpack están disponibles en el repositorio de Google Maven, inclúyelos en el archivo build.gradle

todos los proyectos {

 repositorios {

    Google()

   mavenCentral()

 }

}

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

Navegue a la aplicación > Manifiesto para abrir el archivo Manifiesto. 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gtappdevelopers.frescoimageloading">
 
    <!--Permission for internet-->
    <uses-permission android:name="android.permission.INTERNET" />
    <!--Permission for Network State-->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.FrescoImageLoading">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Paso 4: crea un nuevo SimpleDraweeView 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"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">
 
 
    <!--To implement ImageView-->
    <!--Constraints are given to align image
        centrally of the view-->
    <!--Scale type centre crop is given to
        crop image centrally-->
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/idSDimage"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_margin="10dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
     
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 5: inicialice y use SimpleDraweeView en el archivo MainActivity.java

Vaya a la aplicación > java > el nombre del paquete de su aplicación > el archivo MainActivity.java . A continuación se muestra el código del  archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle. 

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;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // initialize Fresco before setting view.
        Fresco.initialize(this);
        setContentView(R.layout.activity_main);
 
        // below line is having image url to be added..
        Uri imageUri = Uri.parse("https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png");
        SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.idSDimage);
        draweeView.setImageURI(imageUri);
    }
}

Producción: 

Nota: en caso de que esté actualizado a Android Studio 4, es posible que se encuentre con este error (NDK en ~/Library/Android/sdk/ndk-bundle no tenía un archivo source.properties) durante la construcción del proyecto. Consulte esto para corregir el error.