Adding Fresco to your Project

Here‘s how to add Fresco to your Android project.

Android Studio or Gradle

Edit your build.gradle file. You must add the following line to the dependencies section:

dependencies {
  // your app‘s other dependencies
  compile ‘com.facebook.fresco:fresco:0.2.0+‘
}

Maven

Add the following to the <dependencies> section of your pom.xml file:

<dependency>
  <groupId>com.facebook.fresco</groupId>
  <artifactId>fresco</artifactId>
  <version>LATEST</version>
</dependency>

Eclipse ADT / Ant

Unfortunately Eclipse does not yet support the AAR file format Fresco uses. We are still looking for a workaround.

Getting started with Fresco

If you just want to download an image and display it, showing a placeholder until it comes, use a SimpleDraweeView.

For images from the network, you will need to to request Internet permission from your users. Add this line to your AndroidManifest.xml file:

  <uses-permission android:name="android.permission.INTERNET"/>

Near your application startup, before your app calls setContentView(), initialize the Fresco class:

Fresco.initialize(context);

In your XML, add a custom namespace to the top-level element:

<!-- Any valid element will do here -->
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

Then add the SimpleDraweeView to the layout:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="130dp"
    android:layout_height="130dp"
    fresco:placeholderImage="@drawable/my_drawable"
  />

To show an image, you need only do this:

Uri uri = Uri.parse("http://frescolib.org/static/fresco-logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);

and Fresco does the rest.

The placeholder is shown until the image is ready. The image will be downloaded, cached, displayed, and cleared from memory when your view goes off-screen.

Concepts

Drawees

Drawees are spaces in which images are rendered. These are made up of three components, like an Model-View-Controller framework.

DraweeView

Descended from the Android View class.

Most apps should use the SimpleDraweeView class. Place these in your application using XML or Java code. Set the URI to load with the setImageURI method, as explained in the Getting Started page.

You can customize its appearance in XML.

DraweeHierarchy

This is the hierarchy of Android Drawable objects that will actually render your content. Think of it as the Model in an MVC.

If you need to customize your image‘s appearance in Java, this is the class you will deal with.

DraweeController

The DraweeController is the class responsible for actually dealing with the underlying image loader - whether Fresco‘s own image pipeline, or another.

If you need something more than a single URI to specify the image you want to display, you will need an instance of this class.

DraweeControllerBuilder

DraweeControllers are immutable once constructed. They are built using the Builder pattern.

Listeners

One use of a builder is to specify a Listener to execute code upon the arrival, full or partial, of image data from the server.

The Image Pipeline

Behind the scenes, Fresco‘s image pipeline deals with the work done in getting an image. It fetches from the network, a local file, a content provider, or a local resource. It keeps a cache of compressed images on local storage, and a second cache of decompressed images in memory.

The image pipeline uses a special technique called pinned purgeables to keep images off the Java heap. This requires callers to close images when they are done with them.

SimpleDraweeView does this for you automatically, so should be your first choice. Very few apps need to use the image pipeline directly.

Supported URIs

Fresco supports images in a variety of locations.

Fresco does not accept relative URIs. All URIs must be absolute and must include the scheme.

These are the URI schemes accepted:

Note: Only image resources can be used with the image pipeline (e.g. a PNG image). Other resource types such as Strings or XML Drawables make no sense in the context of the image pipeline and so cannot be supported by definition. One potentially confusing case is drawable declared in XML (e.g. ShapeDrawable). Important thing to note is that this is not an image. If you want to display an XML drawable as the main image, then set it as a placeholder and use the null uri.