This Guide will walk you through the steps needed to start using Fresco in your app, including loading your first image.

1. Update Gradle configuration

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

1
2
3
4

dependencies {
  // your app's other dependencies
  implementation 'com.facebook.fresco:fresco:'
}

The following optional modules may also be added, depending on the needs of your app.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

dependencies {

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:'
  implementation 'com.facebook.fresco:webpsupport:'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:'

  // Provide the Android support library (you might already have this or a similar dependency)
  implementation 'com.android.support:support-core-utils:'
}

2. Initialize Fresco & Declare Permissions

Fresco needs to be initialized. You should only do this 1 time, so placing the initialization in your Application is a good idea. An example for this would be:

1
2
3
4
5
6
7
8

[MyApplication.java]
public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}

NOTE: Remember to also declare you Application class in the AndroidManifest.xml as well as add the required permissions. In most cases you will need the INTERNET permission.

1
2
3
4
5
6
7
8
9
10
11
12
13

  <manifest
    ...
    >
    <uses-permission android:name="android.permission.INTERNET" />
    <application
      ...
      android:label="@string/app_name"
      android:name=".MyApplication"
      >
      ...
    </application>
    ...
  </manifest>

3. Create a Layout

In your layout XML, add a custom namespace to the top-level element. This is needed to access the custom fresco: attributes which allows you to control how the image is loaded and displayed.

1
2
3
4
5
6
7

<!-- 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:

1
2
3
4
5
6

<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:

1
2
3

Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/master/docs/static/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.

Edit on GitHub