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
<?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
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
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
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
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
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
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.
<uses-permission android:name="android.permission.INTERNET"/>
These are the layout files.
contacts_list.xml
<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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
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>
Please leave your comments on this post.
Join the Forum discussion on this post
/ActionbarSearch1.png)
/ActionbarSearch2.png)
/ActionbarSearch3.png)
/ActionbarSearch4.png)
