Universal Image Loader in Android

Introduction

 

This article explains the Universal Image Loader. The Universal Image Loader allows you to set various image view options. You can load the image from a URL at runtime using this. The advantage of using this is that you need not store all the images you want to use in your project (in drawable). This saves memory. In large projects where memory management is crucial, using Universal Image Loader is a good idea.

 

Step 1

 

You will need to include "universal-image-loader-1.7.0.jar" from the "library" zip, provided above, as a library in your project. Copy the jar file provided to the clipboard and paste it on the "libs" in your Eclipse project.

 

This jar contains the main functionalities that we will be using. 

 

Step 2

 

First, we will make an application class that will set the basic configurations.

 

Right-click on your package name then select "New" -> "Class". Name it "App" and add the following code to it:

package com.chhavi.universalimageloader;

import android.app.Application;
import android.content.Context;
import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;

public class App extends Application {
    @Override
    public void onCreate() {

        super.onCreate();
        initImageLoader(getApplicationContext());
    }

    public static void initImageLoader(Context context) {

        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)
                .threadPriority(Thread.NORM_PRIORITY - 2)
                .denyCacheImageMultipleSizesInMemory()
                .discCacheFileNameGenerator(new Md5FileNameGenerator())
                .tasksProcessingOrder(QueueProcessingType.LIFO)
                .enableLogging()
                .build();

        ImageLoader.getInstance().init(config);
    }
}

Step 3

 

Open the "activity_main" layout file and add the following code to it:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >

        <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:paddingBottom="10dip"
                android:paddingTop="20dip"
                android:text="Welcome to Universal Image Loader...."
                android:textSize="24sp" />

        <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dip"
                android:onClick="listFunc"
                android:text="Click here" />
    </LinearLayout>
 </ScrollView>

Step 4

 

Create a layout for displaying the list of images in a list view. Right-click on layout then select "New" -> "Other" -> "Android" -> "Android Layout XML file". Name this file as "image_listview_layout" and add the following code to it:

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@android:id/list"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent" />

Step 5

 

Right-click on layout then select "New" -> "Other" -> "Android" -> "Android Layout XML file". Name this file as "image_list_layout" and add the following code to it:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content" >
  <ImageView
          android:id="@+id/image"
          android:layout_width="85dip"
          android:layout_height="80dip"
          android:layout_margin="3dip"
          android:adjustViewBounds="true"
          android:scaleType="centerCrop" />
  <TextView
          android:id="@+id/text"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="left|center_vertical"
          android:layout_marginLeft="20dip"
          android:textSize="22sp" />
</LinearLayout>

Step 6

 

For providing a larger view on the image when the user selects that image from the list.

 

Right-click on layout then select "New" -> "Other" -> "Android" -> "Android Layout XML file". Name this file as "view_layout" and add the following code to it:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
  <ImageView
      android:layout_width="300dp"
      android:layout_height="300dp"
      android:id="@+id/imFinal"
      android:layout_marginLeft="20dp"
      android:layout_marginRight="20dp"
      android:layout_marginTop="40dp"/>
</LinearLayout>

Step 7

 

Open "MainActivity" and add the following code to it:

package com.chhavi.universalimageloader;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    public void listFunc(View view) {
        Intent i = new Intent(this, ListOfImages.class);
        startActivity(i);
    }
}

Step 8

 

The following is for displaying the image list.

 

Right-click on your package name then select "New" -> "Class". Name it "ListOfImages" and add the following code to it:

package com.chhavi.universalimageloader;

import java.util.Collections;
import java.util.LinkedList;
import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.ImageLoadingListener;
import com.nostra13.universalimageloader.core.assist.SimpleImageLoadingListener;
import com.nostra13.universalimageloader.core.display.RoundedBitmapDisplayer;

public class ListOfImages extends Activity {
        protected AbsListView list;
        protected ImageLoader loader = ImageLoader.getInstance();

       final Context context=this;
    DisplayImageOptions op;
    String [] images={"http://t2.gstatic.com/images?q=tbn:ANd9GcSZrajzoEXNlRWjMGE9L3kqI1EsFN9P5HCNhMo4xaqLkWuhAixo","http://t0.gstatic.com/images?q=tbn:ANd9GcQH7hisM_szjOKlVdQvq6m_J4lETkWxQOlAk3SMWs051TFFnmWMCA","http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png"};
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.image_listview_layout);

        op = new DisplayImageOptions.Builder()
                .showStubImage(R.drawable.ic_stub)
                .showImageForEmptyUri(R.drawable.ic_empty)
//                .showImageOnFail(R.drawable.ic_error)
                .cacheInMemory()
                .cacheOnDisc()
                .displayer(new RoundedBitmapDisplayer(20))
                .build();

        list = (ListView) findViewById(android.R.id.list);
        ((ListView) list).setAdapter(new ItemAdapter());
        list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //tartImagePagerActivity(position);

              Intent i=new Intent(context,SeperateView.class);
              i.putExtra("pos",position+"");
              startActivity(i);
            }
        });
    }

    @Override
    public void onBackPressed() {
          super.onBackPressed();
    }

    class ItemAdapter extends BaseAdapter {

        private class ViewHolder {
            public TextView text;
            public ImageView image;
        }

        @Override
        public int getCount() {
            return images.length;
        }

        @Override
        public Object getItem(int position) {
            return position;
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            View v = convertView;
            final ViewHolder holder;
            if (convertView == null) {
                v = getLayoutInflater().inflate(R.layout.image_list_layout, parent, false);
                holder = new ViewHolder();
                holder.text = (TextView) v.findViewById(R.id.text);
                holder.image = (ImageView) v.findViewById(R.id.image);
                v.setTag(holder);
            } else {
                holder = (ViewHolder) v.getTag();
            }

            holder.text.setText("Item " + (position + 1));
            loader.displayImage(images[position], holder.image, op, null);

            return v;
        }
    }
 }

"images" is a string array that contains the list of image URL's. First, we have set the initial configurations of the image. "stub_image" is the image that will be displayed until the image from the URL is not loaded. In "getView()" we have set the content of the list view. You will need to paste the images that you want to use as a stub_image and the image used in "showImageForEmptyUri()" in your drawable folder.

 

Step 9

 

Create a class to provide a larger view of the image when selected by the user from the list.

 

Right-click on your package name then select "New" -> "Class". Name it "SeperateView" and add the following code to it:

package com.chhavi.universalimageloader;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.display.RoundedBitmapDisplayer;

public class SeperateView extends Activity {

        DisplayImageOptions options;
        String [] imageUrls={"http://t2.gstatic.com/images?q=tbn:ANd9GcSZrajzoEXNlRWjMGE9L3kqI1EsFN9P5HCNhMo4xaqLkWuhAixo","http://t0.gstatic.com/images?q=tbn:ANd9GcQH7hisM_szjOKlVdQvq6m_J4lETkWxQOlAk3SMWs051TFFnmWMCA","http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png"};
        protected ImageLoader imageLoader = ImageLoader.getInstance();

       protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
    setContentView(R.layout.view_layout);

    ImageView im=(ImageView)findViewById(R.id.imFinal);

    options = new DisplayImageOptions.Builder()
            .showStubImage(R.drawable.ic_stub)
            .showImageForEmptyUri(R.drawable.ic_empty)
            //.showImageOnFail(R.drawable.ic_error)
            .cacheInMemory()
            .cacheOnDisc()
            .displayer(new RoundedBitmapDisplayer(20))
            .build();
    Intent i=getIntent();
    int pos=Integer.parseInt(i.getStringExtra("pos"));
    imageLoader.displayImage(imageUrls[pos], im, options, null);

    }
}

Step 10

 

Open "AndroidManifest" and apply the following changes:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.chhavi.universalimageloader"
    android:versionCode="1"
    android:versionName="1.0" >

  <uses-permission android:name="android.permission.INTERNET" />

  <uses-sdk
      android:minSdkVersion="8"
      android:targetSdkVersion="17" />

  <application
      android:name="com.chhavi.universalimageloader.App"
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
    <activity
        android:name="com.chhavi.universalimageloader.MainActivity"
        android:label="@string/app_name" >
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
    <activity
        android:name="com.chhavi.universalimageloader.ListOfImages"
        android:label="Image list" />
    <activity
        android:name="com.chhavi.universalimageloader.SeperateView"
        android:label="View Image" />
  </application>
</manifest>

Output snapshots:

 

 

On button click:

 

 

Note you will see the stub_image until a URL image is loaded.

 

Clicking Item 1:

 

 

Clicking Item 2:

 

 

Clicking Item 5:

 

 

Thank you..... Enjoy coding :)