Simplest Lazy Loading ListView Example in Android with data populated from a MySQL database using php

many implementations of Lazy Loading ListView.
Today I will show you my method to create Lazy Loading ListViews.

I dont know whether it can be any more simple than this.

In this I am using AsyncTask to download each image.

So we will start.

Here we have 6 classes.

1. MainPage – This is our main activity that loads the ListView.
2. GetDataFromDB – This class get the image urls and it’s description as a string from the DB server and return that string.
Then we will split that string to seperate the urls and description and then set it to listview.
3. MyCustomArrayAdapter – Custom adapter for the ListView.
4. Model _ this class creates the object to be set for the ListView for each row.
5. PbAndImage – This class has an imageView and ProgressBar to send to the Asynctask.
6. DownloadImageTask – This class Asynchronously downloads the image.

At last the PHP Script which simple echoes the string containing the URLS and description of the image.

Here is the PHP Script.

getImageUrlsAndDescription.php

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// get these values from your DB.
echo    "http://coderzheaven.com/sample_folder/android_1.png,ANDROID0 ##
        http://coderzheaven.com/sample_folder/coderzheaven.png,ANDROID1 ##
        http://coderzheaven.com/sample_folder/coderzheaven.png,ANDROID2 ##
        http://coderzheaven.com/sample_folder/coderzheaven.png,ANDROID3 ##
        http://coderzheaven.com/sample_folder/android_1.png,ANDROID4 ##
        http://coderzheaven.com/sample_folder/coderzheaven.png,ANDROID5 ##
        http://coderzheaven.com/sample_folder/coderzheaven.png,ANDROID6 ##
        http://coderzheaven.com/sample_folder/android_1.png,ANDROID7 ##
        http://coderzheaven.com/sample_folder/coderzheaven.png,ANDROID8 ##
        http://coderzheaven.com/sample_folder/coderzheaven.png,ANDROID9";
?>

So we will start.

MainPage.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
package com.coderzheaven.lazyloadinglistwithphpconnection;
import java.util.<span id="IL_AD8" class="IL_AD">ArrayList</span>;
import java.util.List;
import android.app.ListActivity;
import android.app.ProgressDialog;
import android.os.<span id="IL_AD9" class="IL_AD">Bundle</span>;
import android.widget.ArrayAdapter;
public     class     MainPage    extends ListActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.   layout.    contacts_list);
        final List<Model> list = new ArrayList<Model>();
        
        /** This block is for getting the image url to download from the server **/
        final GetDataFromDB getvalues = new GetDataFromDB();
        
        final ProgressDialog dialog = ProgressDialog.show(MainPage.this,
                "", "Gettting values from DB", true);
        new    Thread   (new Runnable() {
            public void run() {
                String response = getvalues.getImageURLAndDesciptionFromDB();
                System.out.println("Response : " + response);
                
                dismissDialog(dialog);
                if (!response.equalsIgnoreCase("")) {
                    if (!response.equalsIgnoreCase("error")) {
                        dismissDialog(dialog);
                        
                        // Got the response, now split it to get the image Urls and description
                        String all[] = response.split("##");
                        for(int k = 0; k < all.length; k++){
                            String urls_and_desc[] = all[k].split(","); //  urls_and_desc[0] contains image url and [1] -> description.
                            list.add(get(urls_and_desc[1],urls_and_desc[0]));
                        }
                    }
                    
                } else {
                    dismissDialog(dialog);
                }
            }
        }).start();
        /*************************** GOT data from Server ********************************************/
        ArrayAdapter<Model> adapter = new MyCustomArrayAdapter(this, list);
        setListAdapter(adapter);
    }
    public void dismissDialog(final ProgressDialog dialog){
        runOnUiThread(new Runnable() {
            public void run() {
                dialog.dismiss();
            }
        });
    }
    private Model get(String s, String url) {
        return new Model(s, url);
    }
}

GetDataFromDB.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
package com.coderzheaven.lazyloadinglistwithphpconnection;
import org.apache.http.client.HttpClient;
import org.apache.http.client.ResponseHandler;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.BasicResponseHandler;
import org.apache.http.impl.client.DefaultHttpClient;
public class GetDataFromDB {
    public String getImageURLAndDesciptionFromDB() {
        try {
            HttpPost httppost;
            HttpClient httpclient;
            httpclient = new DefaultHttpClient();
            httppost = new HttpPost(
                    "http://10.0.2.2/test/getImageUrlsAndDescription.php"); // change this to your URL.....
            ResponseHandler<String> responseHandler = new BasicResponseHandler();
            final String response = httpclient.execute(httppost,
                    responseHandler);
            
            return response;
        } catch (Exception e) {
            System.out.println("ERROR : " + e.getMessage());
            return "error";
        }
    }
}

Model.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
package com.coderzheaven.lazyloadinglistwithphpconnection;
public class Model {
     
    private String name;
    private String url;
    
    public Model(String name, String url) {
        this.name = name;
        this.url = url;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getURL() {
        return url;
    }
    public void setURL(String url) {
        this.url = url;
    }
}

MyCustomArrayAdapter.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
package com.coderzheaven.lazyloadinglistwithphpconnection;
import java.util.List;
import android.app.Activity;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
public class MyCustomArrayAdapter extends ArrayAdapter<Model> {
    private final Activity context;
    private final List<Model> list;
    public MyCustomArrayAdapter(Activity context, List<Model> list) {
        super(context, R.layout.list_layout, list);
        this.context = context;
        this.list = list;
    }
    static class ViewHolder {
        protected TextView text;
        protected ImageView image;
        protected ProgressBar pb;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = null;
        if (convertView == null) {
            LayoutInflater inflator = context.getLayoutInflater();
            view = inflator.inflate(R.layout.list_layout, null);
            final ViewHolder viewHolder = new ViewHolder();
            viewHolder.text = (TextView) view.findViewById(R.id.label);
            viewHolder.text.setTextColor(Color.BLACK);
            viewHolder.image = (ImageView) view.findViewById(R.id.image);
            viewHolder.image.setVisibility(View.GONE);
            viewHolder.pb = (ProgressBar) view.findViewById(R.id.progressBar1);
            view.setTag(viewHolder);
        } else {
            view = convertView;
        }
        ViewHolder holder = (ViewHolder) view.getTag();
        holder.text.setText(list.get(position).getName());
        holder.image.setTag(list.get(position).getURL());
        holder.image.setId(position);
        PbAndImage pb_and_image = new PbAndImage();
        pb_and_image.setImg(holder.image);
        pb_and_image.setPb(holder.pb);
        new DownloadImageTask().execute(pb_and_image);
        return view;
    }
}

PbAndImage.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
package com.coderzheaven.lazyloadinglistwithphpconnection;
import android.widget.ImageView;
import android.widget.ProgressBar;
public class PbAndImage {
    
    private ImageView img;
    private ProgressBar pb;
    public ImageView getImg() {
        return img;
    }
    public void setImg(ImageView img) {
        this.img = img;
    }
    public ProgressBar getPb() {
        return pb;
    }
    public void setPb(ProgressBar pb) {
        this.pb = pb;
    }
}

DownloadImageTask.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
package com.coderzheaven.lazyloadinglistwithphpconnection;
import java.io.InputStream;
import java.net.URL;
import com.coderzheaven.lazyloadinglistwithphpconnection.PbAndImage;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.AsyncTask;
import android.view.View;
import android.widget.ImageView;
import android.widget.ProgressBar;
public class DownloadImageTask extends AsyncTask<PbAndImage, Void, Bitmap> {
    ImageView imageView = null;
    ProgressBar pb = null;
    protected Bitmap doInBackground(PbAndImage... pb_and_images) {
        this.imageView = (ImageView)pb_and_images[0].getImg();
        this.pb = (ProgressBar)pb_and_images[0].getPb();
        return getBitmapDownloaded((String) imageView.getTag());
    }
    protected void onPostExecute(Bitmap result) {
        System.out.println("<span id="IL_AD10" class="IL_AD">Downloaded</span> " + imageView.getId());
        imageView.setVisibility(View.VISIBLE);
        pb.setVisibility(View.GONE);  // hide the progressbar after <span id="IL_AD6" class="IL_AD">downloading</span> the image.
        imageView.setImageBitmap(result); //set the bitmap to the imageview.
    }
    /** This function downloads the image and returns the Bitmap **/
    private Bitmap getBitmapDownloaded(String url) {
        System.out.println("String URL " + url);
        Bitmap bitmap = null;
        try {
            bitmap = BitmapFactory.decodeStream((InputStream) new URL(url)
                    .getContent());
            bitmap = getResizedBitmap(bitmap, 50, 50);
            return bitmap;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return bitmap;
    }
    
    /** decodes image and scales it to reduce memory consumption **/
    public Bitmap getResizedBitmap(Bitmap bm, int newHeight, int newWidth) {
        int width = bm.getWidth();
        int height = bm.getHeight();
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        // CREATE A MATRIX FOR THE MANIPULATION
        Matrix matrix = new Matrix();
        // RESIZE THE BIT MAP
        matrix.postScale(scaleWidth, scaleHeight);
        // RECREATE THE NEW BITMAP
        Bitmap resizedBitmap = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, false);
        return resizedBitmap;
    }
}

And the Most important thing – DONT FORGET TO ADD THE INTERNET PERMISSION ON YOUR MANIFEST FILE.

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

These are the layout files.

contacts_list.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:layout_margin="10dp" >
    
  <ListView
            android:id="@id/android:list"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:dividerHeight="1dp"
            android:cacheColorHint="#0000"
            android:clipToPadding="true"
            android:layout_margin="5dp"
            android:soundEffectsEnabled="true"
            android:scrollbars="none"
            android:layout_weight="1">
    </ListView>
</LinearLayout>

list_layout.xml

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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">
    
    <ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    
     <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:id="@+id/image"
        android:contentDescription="@drawable/ic_launcher">       
    </ImageView>
    
    <TextView
        android:text="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/label"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="5dp"
        android:textStyle="bold"
        android:textSize="20sp">       
    </TextView>
   
</LinearLayout>

Lazy Loading Image

Lazy Loading Image

Lazy Loading Image

Lazy Loading Image

Lazy Loading Image

Please leave your comments on this post.

Join the Forum discussion on this post

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