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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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<string> displayedImages = Collections.synchronizedList(new LinkedList<string>());
        @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;
    }
}
</string></string>

ImageListActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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<string> displayedImages = Collections.synchronizedList(new LinkedList<string>());
        @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;
        }
    }
}
</string></string>

activity_main.xml

1
2
3
4
5
<linearlayout android:gravity="center" android:id="@+id/LinearLayout1" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" tools:context=".MainActivity" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
    <button android:id="@+id/button_listview" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="ListView ImageLoad">
</button></linearlayout>

imagelist.xml

1
2
3
4
5
6
<linearlayout android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
    <listview android:id="@+id/listView_image" android:layout_height="match_parent" android:layout_width="match_parent">
    </listview>
</linearlayout>

item_list_row.xml

1
2
3
4
5
6
7
<linearlayout android:layout_height="wrap_content" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
    <imageview android:adjustviewbounds="true" android:contentdescription="@string/descr_image" android:id="@+id/image" android:layout_height="72dip" android:layout_margin="3dip" android:layout_width="72dip" android:scaletype="centerCrop">
    <textview android:id="@+id/text" android:layout_gravity="left|center_vertical" android:layout_height="wrap_content" android:layout_marginleft="20dip" android:layout_width="fill_parent" android:textsize="22sp">
</textview></imageview></linearlayout>

 

 

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s