Saturday, 14 September 2013

Lazy Loading Image Download from Internet in android

Hi Guys,

Today we have share the knowledge about the lazy loading image download from the internet in android.
The images will downloaded very fast with the help of the multiple thread.

Images that are not visible on the initial page load are not loaded or downloaded until they come into the main viewing area. Once an image comes into view it is then downloaded and faded into visibility. Scroll down this page to see the action for same.

For this i am using the open source library universal image loader made by nostra. Here you can download the universal image loader library Here.

I added the video to show the lazy loading the image and show in the list view.


Lets start the coding about the lazy loading.

 

MainActivity.java

package com.sunil.lazyloading;


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

public class MainActivity extends Activity implements OnClickListener{

	private Button btnlist=null;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		btnlist= (Button)findViewById(R.id.button_listview);
		btnlist.setOnClickListener(this);
	}
	@Override
	public void onClick(View arg0) {
		
		Intent intent = new Intent(this, ImageListActivity.class);
		intent.putExtra("stringarrayimage", Constants.IMAGES);
		startActivity(intent);
		
	}

}

CustomAdapter.java

package com.sunil.adapter;

import java.util.Collections;
import java.util.LinkedList;
import java.util.List;

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.FadeInBitmapDisplayer;
import com.nostra13.universalimageloader.core.display.RoundedBitmapDisplayer;
import com.sunil.lazyloading.R;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomAdapter extends BaseAdapter{

	private String imageurl[]=null;
	private Context context=null;
	DisplayImageOptions doption=null;
	private ImageLoadingListener animateFirstListener =null;
	
	
	public CustomAdapter(Activity activity, String[] imageurl)
	{
		this.context=activity;
		this.imageurl=imageurl;
		doption=new DisplayImageOptions.Builder().showImageForEmptyUri(R.drawable.ic_empty).showImageOnFail(R.drawable.ic_error).showStubImage(R.drawable.ic_stub).cacheInMemory(true).cacheOnDisc(true).displayer(new RoundedBitmapDisplayer(20)).build();
		animateFirstListener = new AnimateFirstDisplayListener();
	}
	
	@Override
	public int getCount() {
		return imageurl.length;
	}

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

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		
		View view = convertView;
		final ViewHolder holder;
		
		if (convertView == null) {
			view = ((Activity) context).getLayoutInflater().inflate(R.layout.item_list_row, parent, false);
			holder = new ViewHolder();
			holder.text = (TextView) view.findViewById(R.id.text);
			holder.image = (ImageView) view.findViewById(R.id.image);
			view.setTag(holder);
		} else {
			holder = (ViewHolder) view.getTag();
		}
		
		holder.text.setText("Item " + (position + 1));
		ImageLoader imageLoader = ImageLoader.getInstance();
		imageLoader.displayImage(imageurl[position], holder.image, doption, animateFirstListener);

		return view;
	}
	
	private static class AnimateFirstDisplayListener extends SimpleImageLoadingListener {

		static final List displayedImages = Collections.synchronizedList(new LinkedList());

		@Override
		public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
			if (loadedImage != null) {
				ImageView imageView = (ImageView) view;
				boolean firstDisplay = !displayedImages.contains(imageUri);
				if (firstDisplay) {
					FadeInBitmapDisplayer.animate(imageView, 500);
					displayedImages.add(imageUri);
				}
			}
		}
	}

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

ImageListActivity.java

package com.sunil.lazyloading;


import java.util.Collections;
import java.util.LinkedList;
import java.util.List;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.ListView;

import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.SimpleImageLoadingListener;
import com.nostra13.universalimageloader.core.display.FadeInBitmapDisplayer;
import com.sunil.adapter.CustomAdapter;

public class ImageListActivity extends Activity implements OnItemClickListener{

	private ListView listview=null;
	private String[] imageUrls;
	protected ImageLoader imageLoader=null;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.imagelist);
		
		listview=(ListView)findViewById(R.id.listView_image);
		imageLoader = ImageLoader.getInstance();
		Bundle bundle = getIntent().getExtras();
		imageUrls = bundle.getStringArray("stringarrayimage");
		CustomAdapter adapter=new CustomAdapter(ImageListActivity.this, imageUrls);
		listview.setAdapter(adapter);
		
		listview.setOnItemClickListener(this);
		
	}
	@Override
	public void onItemClick(AdapterView arg0, View arg1, int position, long arg3) {
		Intent intent = new Intent(this, ImagePagerActivity.class);
		intent.putExtra("imageurlpostion", imageUrls);
		intent.putExtra("imagepostion", position);
		startActivity(intent);
		
	}
	
	@Override
	public void onBackPressed() {
		AnimateFirstDisplayListener.displayedImages.clear();
		super.onBackPressed();
	}
	
	
	private static class AnimateFirstDisplayListener extends SimpleImageLoadingListener {

		static final List displayedImages = Collections.synchronizedList(new LinkedList());

		@Override
		public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
			if (loadedImage != null) {
				ImageView imageView = (ImageView) view;
				boolean firstDisplay = !displayedImages.contains(imageUri);
				if (firstDisplay) {
					FadeInBitmapDisplayer.animate(imageView, 500);
					displayedImages.add(imageUri);
				}
			}
		}
	}
	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
	
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
			case R.id.item_clear_memory_cache:
				imageLoader.clearMemoryCache();
				return true;
			case R.id.item_clear_disc_cache:
				imageLoader.clearDiscCache();
				return true;
			default:
				return false;
		}
	}
}

activity_main.xml



    

imagelist.xml



    
    


item_list_row.xml



    

    





You can download the source code Lazy Loading Image Cheers guys!

6 comments:

  1. The source code is password protected

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi Sunil, thanks for the source code. I have modified the code to include zoom option in the last screen.

    ReplyDelete
  4. hi sunil, thx for source code...but can u tell me how to add button on view pager

    ReplyDelete
  5. The link for the source code no longer works. Can you please repost?

    ReplyDelete