Fresco — Android Image Library🖼

Powerful image displaying/management library from The Facebook 😎

Few days ago, It was happened with me when I got the test for developer position in which I’ve to build the gallery app, but there was a trick in it that some of the images comes from SD-Card storage and most of it comes from server.

Like we have lot of libraries that can easily work in this scenario, but we need to identify which would best according to our app requirement.
Libraries are:

These all are powerful libraries but all of them have some sort of limitation. I’m not going in the way to elaborate all of it 😒. Let’s move forward on main point.

I started my app with the use of Glide in which I queried to image API and its responded me with the list of items that I populated in the RecyclerView and all was working fine but suddenly it was all vanished, when I implemented LiveData😡. The situation was, after running an app the activity was refreshing continuously. As, recycler was attached to MutableLiveData and when new item added its update the adapter of recycler that can also request the glide to get the image and unexpectedly boomm🔥.

It was totally stuck and insane. Then all of a sudden I got solution through stackoverflow that Facebook fresco can able to help me in this situation. Soon, I implemented and yahhh!!! It’s worked.😏

Introduction

A powerful library for displaying and management of images in an Android App. It can load the image from API(through server), SD-Card storage or local resource. The best part is, on imageview region it place the placeholder until the image is arriving. To save data and CPU processing, it has three levels of cache; two in memory and another in internal storage. And biggest news is, your app can dreaded OutOfMemoryError much less often.

Also, get some more detail from Official website

How It works??

Gradle

Add the dependency in app.gradle:

dependencies {
implementation 'com.facebook.fresco:fresco:1.13.0'
}

Check the latest release from here📱

On depending of your app needs, you can also add some optional modules

dependencies {// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.13.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.13.0'
implementation 'com.facebook.fresco:webpsupport:1.13.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:1.13.0'
// Provide the Android support library (you might already have this)
implementation 'com.android.support:support-core-utils:XX.X.X'
}

Implementation

Fresco requires one time initialization, for this purpose Application class is best for it.

Application file for Fresco

After initialization, declare class in manifest as, you already knows that application declaration done in manifest.

AndroidManifest file for fresco

Now move forward for core implementation in XML and Java

XML Work Side:

Use this code for creating imageView in the name of Fresco.SimpleDraweeView

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/posterImage"
android:layout_width="match_parent"
android:layout_height="500dp"
--------------
fresco:placeholderImage="@drawable/ic_broken_image" />

Fresco provides multiple xml attributes to make your imageView more functional and creative but we’ll discuss it after planted java code😄.

JAVA Work Side:

Parse the url of your image as an argument in URI and set it to SimpleDrawView.

SimpleDraweeView posterImage = findViewById(R.id.posterImage);Uri imgURI = Uri.parse("
https://miro.medium.com/fit/c/240/240/1*SF2VIRFshYt2etl6OhNm_Q.png");
posterImage.setImageURI(imgURI);

Your work done 👍. Let’s Fresco do the rest of work.

More Features Provided by Fresco

URI’s

Fresco supported multiple URI’s for loading images

URI’s schemes

Functional Image setting

There are two available methods for setting functionality like in XML code or JAVA code. So, implement either one of it on basis of your convenience💥.

  • PlaceHolderImage

XML

fresco:placeholderImage="@drawable/ic_broken_image"

JAVA

posterImage.getHierarchy().setPlaceholderImage(R.drawable.ic_broken_image);
  • FailureImage

It set when the app can’t able to find the image on specified link

XML

fresco:failureImage="@drawable/ic_failure_image"

JAVA

posterImage.getHierarchy().setFailureImage(R.drawable.ic_failure_image);

Image Scaling

Scale the image through the below code. As, focusCrop is the scaling type

fresco:actualImageScaleType="focusCrop"

Available Scaling types assist by Fresco

Fresco Image Scale Types

I write this article to share my personal experience in dealing with two giant image management libraries and I know that most of the people can face this issue. As, facebook team do working tremendously in helping us.

Thanks for spending your precious time in reading this article. Please do motivate me by giving multiple 👏 Claps to say Thanks and helps others by referring it.

Connect with me on my socials and become my friend Medium, Twitter, Github and LinkedIn.

@AndroidAppsDeveloper, @OpensourceContributor, @Writer @Researcher

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store