Android Custom Listview Image loading without libraries

Question

I want to load images from sd card into a custom listview. My listview contains image view and a text view. I know there are many libraries which can help me achieve this, but I want to do without using such libraries.

Problem :-

I am loading the images from async task. I am calling the async task from inside my getView(). I get the images only in the last row. That is, if there are 3 images in my folder, then only the image is shown in the 3rd item of the listview.

Below is my code :-

public class MyPhotoAdapter extends BaseAdapter {

    private Activity callingActivity;
    private ArrayList<String> filePaths = new ArrayList<String>();//contains file path of images
    ArrayList<Bitmap> myImages = new ArrayList<Bitmap>();
    private int imageWidth;
    int position;

    ImageView iv_photo;
    TextView tv_address;


    public MyPhotoAdapter(Activity activity,ArrayList<String> paths,int width)
    {
        this.callingActivity = activity;
        this.filePaths = paths;
        this.imageWidth = width;
    }



    @Override
    public int getCount() {
        return filePaths.size();
    }

    @Override
    public Object getItem(int i) {
        return this.filePaths.get(i);
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {

        position = i;

        LayoutInflater inflater = (LayoutInflater) callingActivity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View row = inflater.inflate(R.layout.single_photo,viewGroup, false);

        iv_photo = (ImageView) row.findViewById(R.id.photoView);
        tv_address = (TextView) row.findViewById(R.id.tv_address);

        AsyncImageLoader loader = new AsyncImageLoader();
        loader.execute(filePaths);
        return row;
    }

    class AsyncImageLoader extends AsyncTask<ArrayList<String>,Bitmap,Void>{


        ProgressDialog dialog;


        @Override
        protected void onPreExecute() {
            super.onPreExecute();
            dialog = ProgressDialog.show(callingActivity,"Loading Images","Please Wait ....");
        }

        @Override
        protected Void doInBackground(ArrayList<String>... arrays) {
            Log.d("Test","Total Images :- "+arrays[0].size());
            for(int i = 0; i< arrays[0].size(); i++)
            {
                Bitmap map = decodeFile(arrays[0].get(i).toString(), 150, 150);
                myImages.add(map);
                publishProgress(map);
            }

            return null;
        }

        @Override
        protected void onProgressUpdate(Bitmap... bitmap) {

            iv_photo.setImageBitmap(bitmap[0]);

        }

        @Override
        protected void onPostExecute(Void aVoid) {
            //super.onPostExecute(aVoid);
            dialog.dismiss();
            /*for(int i = 0; i < myImages.size(); i ++)
            {
                iv_photo.setImageBitmap(myImages.get(i));
            }*/
        }


        public Bitmap decodeFile(String filePath, int WIDTH, int HIGHT) {
            try {

                File f = new File(filePath);

                BitmapFactory.Options o = new BitmapFactory.Options();
                o.inJustDecodeBounds = true;
                BitmapFactory.decodeStream(new FileInputStream(f), null, o);

                final int REQUIRED_WIDTH = WIDTH;
                final int REQUIRED_HIGHT = HIGHT;
                int scale = 1;
                while (o.outWidth / scale / 2 >= REQUIRED_WIDTH
                        && o.outHeight / scale / 2 >= REQUIRED_HIGHT)
                    scale *= 2;

                BitmapFactory.Options o2 = new BitmapFactory.Options();
                o2.inSampleSize = scale;
                return BitmapFactory.decodeStream(new FileInputStream(f), null, o2);
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }
            return null;
        }
    }
}

Image is shown only in the last list-item. Other image views dont show the images.

This issue you're having is the exact reason why you should use the libraries, even if you don't want to. Threading and memory management is no easy subject and I guarantee you that using an AsyncTask inner class of adapter is a horrible idea. — Budius, Jul 14 '15 at 14:49

score 0 · Answer 1 · answered Jul 14 '15 at 14:27

You are not handling view recycling, by the time your first async task gets finished you already created your 3 views so you only apply the image to your last view.

You need to handle this concurrency and there is an excellent example in the android docs about this.

http://developer.android.com/training/displaying-bitmaps/process-bitmap.html#concurrency

you should not be storing your ImageView and your TextView as a global variable in your adapter, they constantly change.

:- thanks so much ... seems thats the problem ... but can you please help me change the code. — Shiv Baral, Jul 14 '15 at 14:39

score 0 · Answer 2 · answered Jul 14 '15 at 14:30

/*
 * Retrive photo from path
 * and return list of path
 */
public static List<String> RetriveImagePathFromSDCard(String path) {
    List<String> tFileList = new ArrayList<String>();
    File f = new File(path);
    if (f.exists()) {
        File[] files = f.listFiles();
        Arrays.sort(files);

        for (int i = 0; i < files.length; i++) {
            File file = files[i];
            if (file.isDirectory())
                continue;
            tFileList.add(file.getPath());

        }
    }

    return tFileList;
}

projectGalleryPhotoPathList = RetriveCapturedImagePath(Constant.ProjectGallery.DIR_PROJECT_GALLERY);

projectGalleryAdapter = new PhotoAdapter(Youractivity.this, projectGalleryPhotoPathList);

In adapter class

private List<String> imgPic;
...
...

public ProjectGalleryPhotoAdapter(Context c, List<String> imagePathList) {
        context = c;
        imgPic  = imagePathList;

}


public View getView(final int position, View view, final ViewGroup parent) {
    .... 
    ....
    ....
Uri uri = Uri.fromFile(new File(imgPic.get(position)));
imageView.setImageURI(uri);

}

this is very bad as it does not scale the image appropriately and could lead to OOM exceptions plus laggy scrolling of the listview — tyczj, Jul 14 '15 at 14:34
Picasso.with(context).load(uri).resize(100, 100).centerCrop().into(imageView); — Patel Hiren, Jul 14 '15 at 14:37

score 0 · Accepted Answer · answered Jul 14 '15 at 15:07

You can follow this to know more about handling concurrency.

I have modified your code ..... please see if it helps

public class MyPhotoAdapter extends BaseAdapter {

    private Activity callingActivity;
    private ArrayList<String> filePaths = new ArrayList<String>();
    ArrayList<Bitmap> myImages = new ArrayList<Bitmap>();
    private int imageWidth;
    int position;

    ImageView iv_photo;
    TextView tv_address;


    public MyPhotoAdapter(Activity activity,ArrayList<String> paths,int width)
    {
        this.callingActivity = activity;
        this.filePaths = paths;
        this.imageWidth = width;
    }



    @Override
    public int getCount() {
        return filePaths.size();
    }

    @Override
    public Object getItem(int i) {
        return this.filePaths.get(i);
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {

        position = i;

        LayoutInflater inflater = (LayoutInflater) callingActivity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View row = inflater.inflate(R.layout.single_photo,viewGroup, false);

        iv_photo = (ImageView) row.findViewById(R.id.photoView);
        tv_address = (TextView) row.findViewById(R.id.tv_address);

        AsyncImageLoader loader = new AsyncImageLoader(iv_photo);
        loader.execute(filePaths);
        return row;
    }

    class AsyncImageLoader extends AsyncTask<ArrayList<String>,Bitmap,Void>{


        ProgressDialog dialog;
        private final WeakReference<ImageView> imageViewReference;

        public AsyncImageLoader(ImageView imageView)
        {
            imageViewReference = new WeakReference<ImageView>(imageView);
        }

        @Override
        protected void onPreExecute() {
            super.onPreExecute();
            dialog = ProgressDialog.show(callingActivity,"Loading Images","Please Wait ....");
        }

        @Override
        protected Void doInBackground(ArrayList<String>... arrays) {
            Log.d("Test","Total Images :- "+arrays[0].size());
            for(int i = 0; i< arrays[0].size(); i++)
            {
                Bitmap map = decodeFile(arrays[0].get(i).toString(), 150, 150);
                myImages.add(map);
                publishProgress(map);
            }

            return null;
        }

        @Override
        protected void onProgressUpdate(Bitmap... bitmap) {

            //iv_photo.setImageBitmap(bitmap[0]);

            if (imageViewReference != null) {
                ImageView imageView = imageViewReference.get();
                if (imageView != null) {
                    imageView.setImageBitmap(bitmap[0]);
                }
            }

        }

        @Override
        protected void onPostExecute(Void aVoid) {
            //super.onPostExecute(aVoid);
            dialog.dismiss();
            /*for(int i = 0; i < myImages.size(); i ++)
            {
                iv_photo.setImageBitmap(myImages.get(i));
            }*/
        }


        public Bitmap decodeFile(String filePath, int WIDTH, int HIGHT) {
            try {

                File f = new File(filePath);

                BitmapFactory.Options o = new BitmapFactory.Options();
                o.inJustDecodeBounds = true;
                BitmapFactory.decodeStream(new FileInputStream(f), null, o);

                final int REQUIRED_WIDTH = WIDTH;
                final int REQUIRED_HIGHT = HIGHT;
                int scale = 1;
                while (o.outWidth / scale / 2 >= REQUIRED_WIDTH
                        && o.outHeight / scale / 2 >= REQUIRED_HIGHT)
                    scale *= 2;

                BitmapFactory.Options o2 = new BitmapFactory.Options();
                o2.inSampleSize = scale;
                return BitmapFactory.decodeStream(new FileInputStream(f), null, o2);
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }
            return null;
        }
    }
}

:- thank you so much ... i got the images in all the list items but its the same image ... can you help ? — Shiv Baral, Jul 14 '15 at 15:22
send the position from getView() to the constructor of your AsyncImageLoader .... use this value inside doInBackground() — Partha Chetry, Jul 14 '15 at 16:00

Android Custom Listview Image loading without libraries

3 Answers3