How to Display Low Resolution Image as the Place Holder

Vivek Maskara
Sep 21 · 2 min read

Fresco is a powerful system for displaying images in Android applications.

There are situations where the original image is quite big and would take considerable amount of time to load. In such scenarios, it is advisable to display a low resolution image or thumbnail image until the original image loads. Fresco makes it very easy to implement.

Using Fresco in your application

If you are building with Gradle, simply add the following line to the dependencies section of your build.gradle file:

implementation 'com.facebook.fresco:fresco:2.0.0'

For more information on adding Fresco to your app, check out their repository.

Initialise Fresco in Your App

Fresco needs to be initialised. You should only do this 1 time, so placing the initialisation in your Application is a good idea.

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

Add Drawee View for Fresco

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

Using a low-resolution image as the place holder

First, bind the SimpleDraweeView to your View.

@BindView(R.id.mediaDetailImage)    
SimpleDraweeView image;

Next, setup your image view using newDraweeControllerBuilder

private void setupImageView() {
DraweeController controller = Fresco.newDraweeControllerBuilder() .setLowResImageRequest(ImageRequest.fromUri(media.getThumbUrl())) .setImageRequest(ImageRequest.fromUri(media.getImageUrl()))
.setOldController(image.getController())
.build();
image.setController(controller);
}

Fresco lets you specify a low res and original image request.

  • use setLowResImageRequest to set the temporary image. It need not be a static placeholder. It can be fetched and displayed from the server.
  • use setImageRequest to set the original image.

You can read more about ImageRequests here. Also, there’s more documentation about requesting multiple images here.

Vivek Maskara

Written by

Working on awesome stuff at Zeta.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade