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