What is Image Loading:
Well. Let’s take an example of e-commerce mobile apps. The main content for these kinds of application is nothing Image. If we observe properly, then we can able to understand that these apps are loading all their images after opening each page. That means, they are fetching all images from their server and putting in each ImageView. Is that all? Maybe Yes, but this is the overall structure. Let’s go through a little deeper.
The Main Structure Of Dynamic Image Loading:
The actual structure is pretty straight forward. The images are already saved in either server database or AWS database. For each image, there should be one URL (basically a path). So, when the app tries to call/fetch the path by the help of HTTP (basically the network or internet), it directly hit to the Image where it saved. And as a response, the server sends the image to the client. And now the client has to show it in some Image container. We just went one step ahead. But this is not that much simple. Let’s explain a little more.
What Is The Best Way To Load an Image:
Basically, images are nothing but the collecting of Bitmaps which mostly used for GUI (Graphical User Interface) purposes. And it is always a tough task to handle bitmaps or images for all kinds of mobile devices due to its huge use of heap memory for object creation and most times it will be the cause for the crash due to OOM (Out Of Memory). So the actual straight forward way is not that much simple as we thought.
To handle the Image loading, sometimes developers use JPEG images instead of PNG images as JPEG is lighter than PNG. Sometimes they do image cropping which helps them to fetch the actual image as required. Also, they do image caching in which they save images in device cache or physical memory for re-use purpose. And there are many more things to handle to download and show an image properly in devices.
So all these above are one kind of hectic task for a developer and obviously time taking. So why not use a trusted third party Image Loading library which is able to do all these tasks in its own and we don’t have to worry about Image Loading stuff. Pretty good! Right.
Types Of Image Loading Libraries:
Well, there are many Image Loading libraries you can find in Google or Github. But, they are some known and easy to implement in your code like Universal Image Loader, Glide, Picasso, Fresco, etc. And we are going to know how to implement Fresco Image Loading library in Android apps.
What is Fresco?
As we just discussed, Fresco is an Image Loading Library developed by Facebook. It’s almost giving all options for an Image as we discussed before like fetching the required image as per the size, caching images, showing loader till the image loads blah blah. It’s pretty fast and the only problem is it’s little huge in size (around 1.5 MB or more and it has almost 5700 methods). But, don’t be panic for DEX errors as we have the Multi Dex option and obviously, Google will provide some more options in the future.
Implementing Fresco in Android:
Implementing Fresco is Pretty Simple and Straightforward. First, go to your module level gradle file and add the implementation ‘com.facebook.fresco:fresco:1.13.0’ inside dependencies. Just like below.
Instead of ImageView, Fresco has something called SimpleDraweeView which is nothing but a child class of ImageView with some customized codes. So let’s add this SimpleDraweeView in the xml file in the place of ImageView. The only change is SimpleDraweeView does not support ‘wrap_Content’ in layout_width. So you have to give some size instead of giving wrap_content.
Here PlaceHolderImage is the default image which will show where the image is not available.
Now, we have to move to Fresco initialization. Just go to your Application class and Initialize Fresco. If you don’t have any Application class, then just follow Create an Application class in Android.
Then just go to your class and initialize your SimpleDraweeView as like other views. And add the following code there. And that’s all.
I know it’s a little difficult to understand for beginners, So I wrote a simple application which will load images from a website which provides some dummy images for testing purpose.
Application Source Code: https://github.com/RanjitPati/FrescoTestApp
Set Header in Fresco:
If we jump to the actual programming, then these are not enough. Almost mobile applications are secured and never return any response from server without any secret token. Tokens or secret keys are mostly passed through Headers in Http request. To add a header we have to right the following code in our Application class at the time of initializing Fresco. I am not explaining this code for now, but I will update this article soon by explaining all new programs properly very soon.
So that’s all for now. Please have a look to the github code for a better understanding and let me know if anyone has any doubt.