Fresco Image Loading Library in Android with Example

06 Sep, 2021
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.  
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 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 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>
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. 
hemantjain99
android
Picked
Technical Scripter 2020
Android
Java
Technical Scripter
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.