Fresco Image Loading Library in Android with Example

Fresco is one of the famous image loading libraries from URLs in Android. It is a powerful library for displaying and managing images from URLs. This library can load images from Users’ devices, servers, and other local sources. The most important feature of this library is to show a placeholder image when the image from the URL takes so much time to load. Along with this, we can use an Error image when the image is not being displayed due to any issue. To save data and CPU this library uses three levels of cache out of which two are in memory and one is in internal storage. You can check the official documentation of Fresco.  

Implementation of This Library

A sample image is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add dependency of Fresco Image library in build.gradle file

Navigate to gradle scripts and then to build.gradle(Module) level. Add below line in build.gradle file in the dependencies section.

implementation ‘com.facebook.fresco:fresco:2.3.0’

and, 

Add google repository in the build.gradle file of the application project if by default it is not there

buildscript {

 repositories {

    google()

    mavenCentral()

}

All Jetpack components are available in the Google Maven repository, include them in the build.gradle file

allprojects {

 repositories {

    google()

   mavenCentral()

 }

}

Step 3: Add internet permission in the AndroidManifest.xml file

Navigate to the app > Manifest to open the Manifest file. 

XML

<?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>

Step 4: Create a new SimpleDraweeView in your activity_main.xml

Navigate to the app > res > layout to open the activity_main.xml file. Below is the code for the activity_main.xml file. 

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 center 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>

Step 5: Initialize and use SimpleDraweeView in the MainActivity.java file

Navigate to the app > java > your apps package name > MainActivity.java file. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail. 

Java

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);
    }
}

Output: 

Note: In case you are updated to Android Studio 4 you may face this error (NDK at ~/Library/Android/sdk/ndk-bundle did not have a source.properties file) during building the project. Please refer to this for fixing the error.