Skip to content
Related Articles

Related Articles

Fresco Image Loading Library in Android with Example
  • Difficulty Level : Easy
  • Last Updated : 02 Dec, 2020

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. 

Fresco Image Loading Library in Android

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’

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"?>
    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: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. 

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
My Personal Notes arrow_drop_up
Recommended Articles
Page :