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

Hello all…

You may have seen 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.ArrayList;
import java.util.List;
import android.app.ListActivity;
import android.app.ProgressDialog;
import android.os.Bundle;
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("Downloaded " + imageView.getId());
        imageView.setVisibility(View.VISIBLE);
        pb.setVisibility(View.GONE);  // hide the progressbar after downloading 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.

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