Fresco Examples

Fresco is an open-source image loading and caching library for Android. It was developed by Facebook to make it easier to load images in an efficient way. Fresco is more advanced than other image loading libraries like Picasso or Glide because it uses native memory management, so it can handle large images without crashing the app. In this article, we will learn how to use Fresco in an Android app.

Prerequisites

Before we start, we need to make sure that we have the following:

• Android Studio installed on our computer
• A basic understanding of Android development
• A sample Android app to work with

Setting Up Fresco

To get started with Fresco, we need to add the following dependency to our project's build.gradle file:

dependencies {
    implementation 'com.facebook.fresco:fresco:2.5.0'
}

Next, we need to add the Fresco initialization code to our Application class:

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        Fresco.initialize(this)
    }
}

This will initialize Fresco with the default configuration.

Loading Images with Fresco

Now that Fresco is set up, let's load an image into our app. We can do this by adding an ImageView to our layout and setting its src attribute to the URL of the image we want to load:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@{viewModel.imageUrl}" />

In this example, viewModel.imageUrl is a string that contains the URL of the image we want to load.

To use Fresco to load the image, we need to change the src attribute to fresco:actualImageUri and set its value to the URL of the image:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    fresco:actualImageUri="@{viewModel.imageUrl}" />

Now, when the layout is inflated, Fresco will automatically download the image and display it in the ImageView.

Customizing Fresco

Fresco provides a lot of customization options to help us optimize image loading and caching. Here are a few examples:

Resize Images

We can use the ResizeOptions class to resize images before they are displayed. This can help reduce memory usage and improve performance. Here's an example of how to use ResizeOptions:

val request = ImageRequestBuilder.newBuilderWithSource(uri)
    .setResizeOptions(ResizeOptions(100, 100))
    .build()

val controller = Fresco.newDraweeControllerBuilder()
    .setImageRequest(request)
    .setOldController(imageView.controller)
    .build()

imageView.controller = controller

In this example, we're resizing the image to 100x100 pixels before displaying it.

Set Placeholder and Error Images

Fresco provides the ability to set placeholder and error images for when an image is loading or fails to load. Here's an example of how to set a placeholder and error image:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    fresco:placeholderImage="@drawable/placeholder"
    fresco:errorImage="@drawable/error" />

In this example, we're setting @drawable/placeholder as the placeholder image and @drawable/error as the error image.

Use Different Image Formats

Fresco supports a variety of image formats, including JPEG, PNG, GIF, and WebP. We can use the ImageDecodeOptions class to specify which image formats we want to support. Here's an example of how to use ImageDecodeOptions:

val options = ImageDecodeOptions.newBuilder()
    .setDecodePreviewFrame(true)
    .setDecodeGifsAsVideos(true)
    .setDecodeWebP(true)
    .build()

val request = ImageRequestBuilder.newBuilderWithSource(uri)
    .setImageDecodeOptions(options)
    .build()

val controller = Fresco.newDraweeControllerBuilder()
    .setImageRequest(request)
    .setOldController(imageView.controller)
    .build()

imageView.controller = controller

In this example, we're enabling preview frame decoding, decoding GIFs as videos, and decoding WebP images.

Conclusion

Fresco is a powerful image loading and caching library that can help us efficiently load and display images in our Android app. With its advanced features and customization options, we can optimize image loading for the best user experience. In this article, we learned how to set up Fresco and use some of its most useful features.> Step by step Fresco examples.

Fresco is an Android library for managing images and the memory they use. Learn about it via several simple examples in this tutorial.