Home / Basics / Fresco Android Library Tutorial – Library #8
Fresco Android Library Tutorial

Fresco Android Library Tutorial – Library #8

This is library #8 in this series 100 Library in Android , in the previous article we had OkHttp Android Library Tutorial. In this article we are having the Fresco Android Library Tutorial which allows for hassle-free image loading in your application—often in one line of code!

Why Fresco ?

Fresco is a powerful system for displaying images in Android applications. It takes care of image loading and display, will load images from the network, local storage, or local resources, and display a placeholder until the image has arrived. It has two levels of cache; one in memory and another in internal storage. It also supports display of animated GIFs with just few lines of code.

Our App:

Our app will have two screens, one will have a view to display a GIF, and the other will have a list of users, each user consists of Name and Image, We would load the images from URL and putting a placeholder image to use it while loading out target image. A specific Image would appear if the URL was wrong or the app failed to load the Image.

Technical Overview:

  • Fresco load and display images in custom view called DraweeView.
  • The app have 2 activities: GIF Activity, User List Activity:
  1. The GIF Activity will have DraweeView and load the GIF into it.
  2. The User List Activity will have a recyclerView in layout.
  3. A User class to hold Attributes (Name, Image) and a layout file to represent the single row in the recyclerView.
  4. An adapter to manage data between the User class and the recyclerView, and the image loading will be done inside this adapter.

So, the diagram for this app will go like this image:

fresco

Fresco Android Library Tutorial

1. Creating Android Project, In Android Studio, create a new project by navigating to File ⇒ New Project and fill all the required details. When it prompts to select a default activity, select Empty Activity, call it MainActivity and proceed.

2. Install the library using Gradle dependency, we need to install the core library and a module for animated GIF support, open Application build.gradle file and add the following code under dependencies:

3. Now we need to initialize the Fresco class. We should only call Fresco.initialize once, so lets create Application class and initialize the library in it. Under your package folder create a new class, call it MyApplication and add this code:

4. We need to call our Application class into every single class in the app and this could be done in the manifest file, also Fresco uses Internet, so we should add these permissions in the manifest file as following code:

5. Create two empty activities and call them GIFActivity and UserListActivity, Now lets create 2 buttons on our MainActivity layout so we can navigate between these two activities:

open activity_main.xml and add this code:

and open your MainActivity.java and add this code which will navigate between activities:

6. Lets get in the game and try to load a GIF in our GIFActivity, first open activity_gif.xml and add this code, it contains SimpleDraweeView which Fresco uses to display and load images.

The SimpleDraweeView has attributes failureImage which we can load local images in case of any failure happens in the network or the URL was empty, and placeholderImage which we can use it to display an image till the image is fully loaded.

7. Open your GIFActivity.java file and lets add this code, it makes an object of DraweeController which controls the SimpleDraweeView object and attach the image with its URI,, also it makes an object of ControllerListener which handle download events like onImageLoaded and onFail.

8. Now, lets create our second activity which will has a recyclerView in its layout to display list of user objects. Open the layout file of the activity activity_user_list.xml and add below code.

Now we need to build the User class and its layout file, and an adapter to adapt this data with the recyclerView

Fresco Android Library Tutorial

9. Under your package name, create a java class named User and add below code.

10. Add a layout file contains ImageView and TextView, Under res ⇒ layout folder, create an xml layout named single_user_row.xml. This xml renders single list row in the RecyclerView which contains a TextView (User name) and a SimpleDraweeView which Fresco uses to display and load images (User image).

11. Lets build our adapter, create another class named UserRecyclerviewAdapter. This class is a custom adapter class which inflates the user_movie_row.xml by applying proper data.

Fresco is used in this adapter by instantiating an object of DraweeController which controls the SimpleDraweeView object and attach the image with its URI,, and an object of ControllerListener which handle download events like onImageLoaded and onFail.

12. The last part, Open your UserListActivity class and add this code, this will make an object of the recyclerView, make a list of User objects and then attach it to the adapter object.

13. Run the project and test it. You should able see The Fresco Android Library works and the output should look like this images below, try disabling the network from your device and try to use empty URL and see what’s the results.

Notice that:

  1. When the Not-Found-URL images are recycled in the recyclerView, Fresco try to load the image again and again.
  2. The app will load a failure image when the URL is broken or there’s network error.
  3. The first time to run the app it will load it will cache the images, so after the first run the loading would be much faster.

Fresco Android Library Tutorial

Summary
Article Title
Fresco Android Library Tutorial - Library #8
Description
Fresco Android Library Tutorial, image loading in recyclerView example, display a placeholder, It has two levels of cache, supports display of animated GIFs
Author
Organization
Android Gifts

About #AndroidGifts

#AndroidGifts

Check Also

Picasso Android Library Tutorial

Picasso Android Library Tutorial – Library #5

This is library #5 in this series 100 Library in Android , in the previous article we …

Leave a Reply