HowTo: Getting Started With Fresco

Fresco is an image loading library from Facebook. It is widely used and is well tested. It provides a number of features and is fast and optimized.

Step 1:

To get started add Fresco to your project dependency. Add the following lines to build.gradle file. Please check the latest version here and make the necessary adjustments.

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

Step 2:

Give internet permissions to your application if the image is on a remote location. Add the following lines to AndroidManifest.xml file.

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

Step 3:

Fresco needs to be initialized. Place the following initialization in the MainActivity.class file.

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        // this line
        Fresco.initialize(this);
    }
}

Step 4:

In the layout.xml file add a custom namespace to the top-level element which gives access to the custom fresco: attributes.

<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" >
    ...
</LinearLayout>

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" />

Step 5:

Finally, add the following lines to the Activity.java file

Uri uri = Uri.parse(urlString);
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);

Placeholder is assigned in the layout.xml file. Placeholder is the image that will be displayed while the requested image is being loaded.

Step 6:

That is all, now build and run your application. The image will be downloaded, cached, displayed, and cleared from memory when your view goes off-screen.

If there are any questions let me know in the comments below. Check out the HowTo for Glide and Picasso as well.

Show Comments