Image Loader

Universal Image Loader aims to provide a powerful, flexible and highly customizable instrument for image loading, caching and displaying. It provides a lot of configuration options and good control over the image loading and caching process.

Download Demo

 Steps to use universal image loader in your project.

1. Crate a project in android studio.
2. Open build.gradle(app).
3. Add a dependancy (<project>/<app-module>/build.gradle)
   
   compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.4'
   
   

   apply plugin: 'com.android.application'
   android {
       compileSdkVersion 25
       buildToolsVersion "25.0.0"
       defaultConfig {
           applicationId "com.pankaj.universal.imageloader"
           minSdkVersion 15
           targetSdkVersion 25
           versionCode 1
           versionName "1.0"
           testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
       }
       buildTypes {
           release {
               minifyEnabled false
               proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
           }
       }
   }
   dependencies {
       compile fileTree(dir: 'libs', include: ['*.jar'])
       androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
           exclude group: 'com.android.support', module: 'support-annotations'
       })
       compile 'com.android.support:appcompat-v7:25.0.0'
       compile 'com.android.support:design:25.0.0'
       testCompile 'junit:junit:4.12'
       compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.4'
   }
   
   
   

   
   
   Click on Sync Now
   
   
   
   
    
4.  Open manifest.xml and add a permission to it-
   
   

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

   
   

   <?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
       package="com.pankaj.universal.imageloader">
     
       <uses-permission android:name="android.permission.INTERNET" />
   
       <application
           android:allowBackup="true"
           android:icon="@mipmap/ic_launcher"
           android:label="@string/app_name"
           android:supportsRtl="true"
           android:theme="@style/AppTheme">
         
      <activity android:name=".MainActivity">
               <intent-filter>
                   <action android:name="android.intent.action.MAIN" />
                   <category android:name="android.intent.category.LAUNCHER" />
               </intent-filter>
           </activity>
   
           <activity
               android:name=".BaseActivity"
               android:label="@string/title_activity_base"
               android:theme="@style/AppTheme.NoActionBar"></activity>
       
    </application>
   
   </manifest>
   
   
   

    
5. Open your base activity and initialize the loader configuration-
    

   package com.pankaj.universal.imageloader;
   
   import android.content.Context;
   import android.graphics.Bitmap;
   import android.os.Bundle;
   import android.support.v7.app.AppCompatActivity;
   import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;
   import com.nostra13.universalimageloader.core.DisplayImageOptions;
   import com.nostra13.universalimageloader.core.ImageLoader;
   import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
   import com.nostra13.universalimageloader.core.assist.QueueProcessingType;
   
   public class BaseActivity extends AppCompatActivity {
   
       public static DisplayImageOptions options;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           initializeAnimationForLoader(this);
       }
       
   private void initializeAnimationForLoader(Context context) {
           
           // This configuration tuning is custom. You can tune every option, you may tune some of them,
           // or you can create default configuration by
           //  ImageLoaderConfiguration.createDefault(this);
           // method.
         
           ImageLoaderConfiguration.Builder config = new ImageLoaderConfiguration.Builder(context);
           config.threadPriority(Thread.NORM_PRIORITY - 2);
           config.denyCacheImageMultipleSizesInMemory();
           config.diskCacheFileNameGenerator(new Md5FileNameGenerator());
           config.diskCacheSize(50 * 1024 * 1024); // 50 MiB
           config.tasksProcessingOrder(QueueProcessingType.LIFO);
           config.writeDebugLogs(); // Remove for release app
           // Initialize ImageLoader with configuration.
          
           ImageLoader.getInstance().init(config.build());
           options = new DisplayImageOptions.Builder()
                   .showImageForEmptyUri(R.drawable.logo)
                   .showImageOnFail(R.drawable.error)
                   .showImageOnLoading(R.drawable.wait)
                   .cacheInMemory(true)
                   .cacheOnDisk(true)
                   .considerExifParams(true)
                   .bitmapConfig(Bitmap.Config.RGB_565)
                   .build();
       }
   }
   
   
   

    
   
     
6.  Update your main_activity.xml

   <?xml version="1.0" encoding="utf-8"?>
   
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:gravity="center_horizontal"
       android:orientation="vertical"
       tools:context="com.pankaj.universal.imageloader.MainActivity">
       
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_margin="10dp"
           android:text="Image with blank url" />
      
       <ImageView
           android:id="@+id/ivImageView1"
           android:layout_width="100dp"
           android:layout_height="100dp"
           android:layout_centerInParent="true"
           android:src="@mipmap/ic_launcher" />
      
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_margin="10dp"
           android:text="Image with wrong url" />
       
       <ImageView
           android:id="@+id/ivImageView2"
           android:layout_width="100dp"
           android:layout_height="100dp"
           android:layout_centerInParent="true"
           android:src="@mipmap/ic_launcher" />
      
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_margin="10dp"
           android:text="Image with correct url" />
       
       <ImageView
           android:id="@+id/ivImageView3"
           android:layout_width="100dp"
           android:layout_height="100dp"
           android:layout_centerInParent="true"
           android:src="@mipmap/ic_launcher" />
   </LinearLayout>
   
   

     
   
7.  Update your MainActivity.JAVA
   
   

   package com.pankaj.universal.imageloader;
   import android.os.Bundle;
   import android.widget.ImageView;
   import com.nostra13.universalimageloader.core.ImageLoader;
   public class MainActivity extends BaseActivity {
       ImageView ivImageView1, ivImageView2, ivImageView3;
       ImageLoader imageLoader;
       private String imageUrl1 = "";
       private String imageUrl2 = "https://lh3.googleusercontent.com/-3DsjuYjPbRg/AAAAAAAAAAI/AAAAAAAAAoM/.jpg";
       private String imageUrl3 = "http://lh3.googleusercontent.com/-3DsjuYjPbRg/AAAAAAAAAAI/AAAAAAAAAoM/iNoq9r6Q7CA/s280-c/photo.jpg";
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           /*_____________________initializations_____________________________*/
           imageLoader = ImageLoader.getInstance();
           ivImageView1 = (ImageView) findViewById(R.id.ivImageView1);
           ivImageView2 = (ImageView) findViewById(R.id.ivImageView2);
           ivImageView3 = (ImageView) findViewById(R.id.ivImageView3);
           /*________________________Load Images___________________________*/
           imageLoader.displayImage(imageUrl1, ivImageView1,options);
           imageLoader.displayImage(imageUrl2, ivImageView2,options);
           imageLoader.displayImage(imageUrl3, ivImageView3,options);
       }
   }
   
   
   

8. Supported URIs are-
   

   "http://site.com/image.png" // from Web
   "file:///mnt/sdcard/image.png" // from SD card
   "file:///mnt/sdcard/video.mp4" // from SD card (video thumbnail)
   "content://media/external/images/media/13" // from content provider
   "content://media/external/video/media/13" // from content provider (video thumbnail)
   "assets://image.png" // from assets
   "drawable://" + R.drawable.img // from drawables (non-9patch images)

9.   Now all the setup for image loader is complete, Please run the application.
   
   
10.  Now you will see first screen-
    
    
    
    
11. After couples of seconds  this screen will update and will be showing like-
    
    
    
    
    
    
    
12.  Good bye, Thanks to read this blog.

Download Demo