# Fresco
Fresco is a powerful system for displaying images in Android applications.
In Android 4.x and lower, Fresco puts images in a special region of Android memory (called ashmem). This lets your application run faster - and suffer the dreaded OutOfMemoryError much less often.
Fresco also supports streaming of JPEGs.
# Getting Started with Fresco
First, add Fresco to your build.gradle
as shown in the Remarks section:
If you need additional features, like animated GIF or WebP support, you have to add the corresponding Fresco artifacts (opens new window) as well.
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:
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
Fresco.initialize(this);
}
}
If you want to load remote images from a server, your app needs the internt permission. Simply add it to your AndroidManifest.xml
:
<uses-permission android:name="android.permission.INTERNET" />
Then, add a SimpleDraweeView
to your XML layout.
Fresco does not support wrap_content
for image dimensions since you might have multiple images with different dimensions (placeholder image, error image, actual image, ...).
So you can either add a SimpleDraweeView
with fixed dimensions (or match_parent
):
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="120dp"
android:layout_height="120dp"
fresco:placeholderImage="@drawable/placeholder" />
Or supply an aspect ratio for your image:
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="120dp"
android:layout_height="wrap_content"
fresco:viewAspectRatio="1.33"
fresco:placeholderImage="@drawable/placeholder" />
Finally, you can set your image URI in Java:
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI("http://yourdomain.com/yourimage.jpg");
That's it! You should see your placeholder drawable until the network image has been fetched.
# Using OkHttp 3 with Fresco
First, in addition to the normal Fresco Gradle dependency, you have to add the OkHttp 3 dependency to your build.gradle
:
compile "com.facebook.fresco:imagepipeline-okhttp3:1.2.0" // Or a newer version.
When you initialize Fresco (usually in your custom Application
implementation), you can now specify your OkHttp client:
OkHttpClient okHttpClient = new OkHttpClient(); // Build on your own OkHttpClient.
Context context = ... // Your Application context.
ImagePipelineConfig config = OkHttpImagePipelineConfigFactory
.newBuilder(context, okHttpClient)
.build();
Fresco.initialize(context, config);
# JPEG Streaming with Fresco using DraweeController
This example assumes that you have already added Fresco to your app (see this example (opens new window)):
SimpleDraweeView img = new SimpleDraweeView(context);
ImageRequest request = ImageRequestBuilder
.newBuilderWithSource(Uri.parse("http://example.com/image.png"))
.setProgressiveRenderingEnabled(true) // This is where the magic happens.
.build();
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setOldController(img.getController()) // Get the current controller from our SimpleDraweeView.
.build();
img.setController(controller); // Set the new controller to the SimpleDraweeView to enable progressive JPEGs.
# Remarks
How to set up dependencies in the app level build.gradle file:
dependencies {
// Your app's other dependencies.
compile 'com.facebook.fresco:fresco:0.14.1' // Or a newer version if available.
}
More information can be found here (opens new window).