All CategoriesAndroid App Development

How to use Universal Image Loader Library in Android

Universal Image Loader: An Introduction:
Universal Image Loader is one of the library for loading the remote images. It is free and open source. We can easily get the library and include it in our project to create an application.
We can configure and set up the options according to the need to show the images.
Its alternatives are Picasso and Volley.
Advantages of Universal Image Loader
⦁ It loads, caches, and displays the images.
⦁ Performs multithreading, which means it loads the multiple images asynchronously.
⦁ It also caches images in memory or SD card.
Get the Library:
To implement this feature in our application, we have to download the Universal Image Loader library from the official website and add it inside our project.
Example with Code:
Here, in this example, we will display the images in GridView.
Let’s do it programmatically.
⦁ Create an application UniversalImageLoaderExampleAndroid.
⦁ Add the library in our project.
Requirements:
UILApplication.java: A class to setup the default configuration for Universal Image Loader.
MainActivity.java, UniversalImageItem.java, UniversalImageAdapter.java, activity_main.xml, grid_item_layout.xml.
Let’s do it one by one.
UILApplication.java:
Create this class and extend it with Application. It is a class which is used to configure the setup options for Universal Image Loader and use it from anywhere in the project.
Add the code in onCreate() method:

DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()
.imageScaleType(ImageScaleType.EXACTLY)
.displayer(new FadeInBitmapDisplayer(300)).build();
ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
getApplicationContext())
.defaultDisplayImageOptions(defaultOptions)
.memoryCache(new WeakMemoryCache())
.build();

Initialize the image loader with configuration.

ImageLoader.getInstance().init(config);
We can also set the other options here and modify it to display the images.
UniversalImageItem.java:
Create the modal class for item.
Add the code here:
private String image;
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}

Android Programmingactivity_main.xml:
Create this XML file for our main layout.
Add the code here

<GridView
android:id="@+id/gridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:columnWidth="100dp"
android:drawSelectorOnTop="true"
android:focusable="true"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="5dp" />

grid_item_layout.xml:
Create this XML file for layout item, here we show the image.
Add the code here:

<ImageView
android:id="@+id/iv_Grid"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop" />
UniversalImageAdapter.java:
Create this Custom Adapter class to load and display the images. It inflates the view of our item.
Add the code in getView() method:
LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
row = inflater.inflate(layoutResourceId, parent, false);
holder = new ViewHolder();
holder.imageView = (ImageView) row.findViewById(R.id.iv_Grid);
UniversalImageItem item = mGridData.get(position);
ImageLoader imageLoader = ImageLoader.getInstance();
DisplayImageOptions options = new DisplayImageOptions.Builder().cacheInMemory(true)
.resetViewBeforeLoading(true)
.showImageForEmptyUri(R.drawable.placeholder)
.showImageOnFail(R.drawable.error)
.showImageOnLoading(R.drawable.placeholder).build();
imageLoader.displayImage(item.getImage(), holder.imageView, options);

Here, imageLoader is used to get the images and set the properties accordingly.
MainActivity.java:
This is our MainActivity. Inside this we will set the custom adapter, take the reference of GridView, parse the JSON to show the images using URL.
Initialize:

private GridView mGridView;
private UniversalImageAdapter mGridAdapter;
private ArrayList<UniversalImageItem> mGridData;
private String FEED_URL = "http://api.themoviedb.org/3/movie/157336/images?api_key=8496be0b2149805afa458ab8ec27560c";

Add the code in onCreate(){..} method:

mGridView = (GridView) findViewById(R.id.gridView);
mGridData = new ArrayList<>();
mGridAdapter = new UniversalImageAdapter(this, R.layout.grid_item_layout, mGridData);
mGridView.setAdapter(mGridAdapter);
new AsyncHttpTask().execute(FEED_URL);
Now, we execute the task with URL and update the UI in onPostExecute() method after parsing.
Add the code for parsing:
JSONObject response = new JSONObject(result);
JSONArray array = response.getJSONArray("backdrops");
UniversalImageItem item;
for (int i = 0; i < array.length(); i++) {
JSONObject imageobject = array.getJSONObject(i);
String image_url = imageobject.getString("file_path");
item = new UniversalImageItem();
item.setImage("http://image.tmdb.org/t/p/w500"+image_url);
mGridData.add(item);

Next, update the UI

mGridAdapter.setGridData(mGridData);

Conclusion:
This was all about the Universal Image Loader. Here we learned how to get the library and use it in our application. It was a simple example to show the images in a GridView, the loading, caching and displaying process. We can customize it and create the many applications by using this powerful library. It is quite popular in Android development.

Download Source Code: GitHub

Output:

Hope you find this blog section informative, keep visiting www.acadgild.com for more updates on the courses.

Android Programming

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close