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.. 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.
Contact Us