Fresco: An image download library made by Facebook

Downloading and displaying images is a very common feature of every Android app. It represents a big challenge for developers to work with bitmaps and the first thing you learn when you work in an Android application is that memory is a very limited resource, so you have to be extremely careful or you will encounter the infamous Out Of Memory Error.

Fortunately there is a number of third party libraries that turn out to be really helpful when it comes to downloading and processing images. Some of the most popular out there are Picasso, Glide and Universal Image Loader.

After a while of working with Picasso in an ongoing project I started to run into some trouble when it came to the memory management and bitmaps. That’s how I found a relatively new library created by the people at Facebook called Fresco.

Fresco is what the Facebook app uses to download and render images in Android, so I decided to give it a try and I was more than happy with the result.

To start using the library all you have to do is add the dependency to the build.gradle file of your project:

compile 'com.facebook.fresco:fresco:0.8.1+'

Fresco uses it’s own widget to display images called Drawee. The simplest way to start using it is by including a SimpleDraweeView inside your layout XML file:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="20dp"
    android:layout_height="20dp"
    fresco:actualImageScaleType="focusCrop"
    fresco:placeholderImage="@color/wait_color"
    fresco:placeholderImageScaleType="fitCenter"
    fresco:failureImage="@drawable/error"
    fresco:failureImageScaleType="centerInside"
  />

There are other attributes that can be used for a SimpleDraweeView, here is the list of all of them:


<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="20dp"
    android:layout_height="20dp"
    fresco:fadeDuration="300"
    fresco:actualImageScaleType="focusCrop"
    fresco:placeholderImage="@color/wait_color"
    fresco:placeholderImageScaleType="fitCenter"
    fresco:failureImage="@drawable/error"
    fresco:failureImageScaleType="centerInside"
    fresco:retryImage="@drawable/retrying"
    fresco:retryImageScaleType="centerCrop"
    fresco:progressBarImage="@drawable/progress_bar"
    fresco:progressBarImageScaleType="centerInside"
    fresco:progressBarAutoRotateInterval="1000"
    fresco:backgroundImage="@color/blue"
    fresco:overlayImage="@drawable/watermark"
    fresco:pressedStateOverlayImage="@color/red"
    fresco:roundAsCircle="false"
    fresco:roundedCornerRadius="1dp"
    fresco:roundTopLeft="true"
    fresco:roundTopRight="false"
    fresco:roundBottomLeft="false"
    fresco:roundBottomRight="true"
    fresco:roundWithOverlayColor="@color/corner_color"
    fresco:roundingBorderWidth="2dp"
    fresco:roundingBorderColor="@color/border_color"
  />

Don’t forget to add the XML namespace for Fresco.

xmlns:fresco="http://schemas.android.com/apk/res-auto"

As you can see, there are a lot of tasks that can be accomplished by setting the correct XML attributes.
One important thing to keep in mind is that Fresco requires you to set the SimpleDraweeView’s width and height to a specific value, either “match-parent” or a specific dp measure. If you set them to “wrap-content” it won’t work.

Now for the Java code:

SimpleDraweeView myImageView = (SimpleDraweeView) container.findViewById(R.id.my_image_view);

String imageUrl = "http://vignette4.wikia.nocookie.net/saintseiya/images/4/4b/The_Cast_of_Saint_Seiya_Omega.PNG/revision/latest?cb=20131229224909";

myImageView.setImageURI(Uri.parse(imageUrl));

That’s it, this is all the code you need in order to start working with Fresco inside your app. The library will take care of caching and resizing your bitmaps.

If you want to know more about this cool library, you can check the article published at the engineering site of Facebook.

Also check the documentation to see all the things you can accomplish with Freco.

Advertisements