LIstView with ImageView Downloaded from Remote Server

Question

I want to make a listview using "imageview" which is retrieved from a remote server's response. This is populated only when required/necessary...

The code is working as expected, however, when i scroll down or up faster the images on rows get shuffled (Please note that only image get shuffed and not the textviews values...)

Can anyone help me in this regard in a step by step manner that I can arrive at a solution for this problem? Thanks

::[here the code]

package com.example.myapplication;

import java.io.File;
import java.io.InputStream;
import java.lang.ref.WeakReference;
import java.lang.reflect.Array;
import java.net.HttpURLConnection;
import java.net.URI;
import java.net.URL;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Typeface;

import android.net.Uri;
import android.os.AsyncTask;
import android.support.v4.content.res.ResourcesCompat;
import android.util.Log;
import android.util.LruCache;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class ExpandableListAdapter extends BaseExpandableListAdapter {


    private Context _context;
    private List < String > _listDataHeader; // header titles
    private List < String > _listDataSubTitle; // header subtitles titles
    private List < String > _listDataBigPlaceholder; // data big header placeholders 
    private List < String > _listDataSmallPlaceholder; // data small header placeholders 
    // child data in format of header title, child title
    private HashMap < String, List < String >> _listDataChild;


    public ExpandableListAdapter(Context context, List < String > listDataHeader,
        HashMap < String, List < String >> listChildData,
        List < String > _listDataSubTitle,
        List < String > _listDataBigPlaceholder,
        List < String > _listDataSmallPlaceholder) {
        this._context = context;
        this._listDataHeader = listDataHeader;
        this._listDataSubTitle = _listDataSubTitle;
        this._listDataBigPlaceholder = _listDataBigPlaceholder;
        this._listDataSmallPlaceholder = _listDataSmallPlaceholder;
        this._listDataChild = listChildData;
    }


    @
    Override
    public Object getChild(int groupPosition, int childPosititon) {
        return this._listDataChild.get(this._listDataHeader.get(groupPosition))
            .get(childPosititon);
    }

    public Object getSubtitle(int groupPosition) {
        return this._listDataSubTitle.get(groupPosition);
    }

    private Object getBigLogoStr(int groupPosition) {

        return this._listDataBigPlaceholder.get(groupPosition);
    }

    private Object getSmallLogoStr(int groupPosition) {
        return this._listDataSmallPlaceholder.get(groupPosition);
    }

    @
    Override
    public long getChildId(int groupPosition, int childPosition) {

        return childPosition;
    }

    @
    Override
    public View getChildView(int groupPosition, final int childPosition,
        boolean isLastChild, View convertView, ViewGroup parent) {

        final String childText = (String) getChild(groupPosition, childPosition);

        if (convertView == null) {
            LayoutInflater Inflater = (LayoutInflater) this._context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = Inflater.inflate(R.layout.list_item, null);
        }

        TextView txtListChild = (TextView) convertView
            .findViewById(R.id.lblListItem);


        txtListChild.setText(childText);
        return convertView;
    }

    @
    Override
    public int getChildrenCount(int groupPosition) {
        return this._listDataChild.get(this._listDataHeader.get(groupPosition))
            .size();
    }

    @
    Override
    public Object getGroup(int groupPosition) {
        return this._listDataHeader.get(groupPosition);
    }

    @
    Override
    public int getGroupCount() {
        return this._listDataHeader.size();
    }

    @
    Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @
    Override
    public View getGroupView(int groupPosition, boolean isExpanded,
        View convertView, ViewGroup parent) {


        ViewHolder viewHolder = null;
        String headerTitle = (String) getGroup(groupPosition);
        String SubTitle = (String) getSubtitle(groupPosition);


        if (convertView == null) {


            LayoutInflater infalInflater = (LayoutInflater) this._context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = infalInflater.inflate(R.layout.list_group, null);
            viewHolder = new ViewHolder();
            viewHolder.FirstText = (TextView) convertView.findViewById(R.id.lblListHeader);
            viewHolder.SecondText = (TextView) convertView.findViewById(R.id.lblListSubTitle);
            viewHolder.SmallImage = (ImageView) convertView.findViewById(R.id.lblPlaceHolderS);
            viewHolder.BigImage = (ImageView) convertView.findViewById(R.id.lblPlaceHolder);



            String BigLogoStr = (String) getBigLogoStr(groupPosition);
            String SmallLogoStr = (String) getSmallLogoStr(groupPosition);

            String url = "";
            String url2 = "";
            if (BigLogoStr == "null") {
                url2 = "http://domain/images/default.jpg";
            } else {
                url2 = "http://domain/" + this._listDataBigPlaceholder.get(groupPosition);
            }
            if (SmallLogoStr == "null") {
                url = "http://domain/images/default2.jpg";
            } else {
                url = "http://domain/" + this._listDataSmallPlaceholder.get(groupPosition);
            }



            convertView.setTag(viewHolder);


        } else {



            viewHolder = (ViewHolder) convertView.getTag();

            //viewHolder.ThirdText = groupPosition;
            viewHolder.BigImage.setImageBitmap(null);
            viewHolder.SmallImage.setImageBitmap(null);

            String BigLogoStr = (String) getBigLogoStr(groupPosition);
            String SmallLogoStr = (String) getSmallLogoStr(groupPosition);
            String url = "";
            String url2 = "";
            if (BigLogoStr == "null") {
                url2 = "http://domain/images/default.jpg";
            } else {
                url2 = "http://domain/" + this._listDataBigPlaceholder.get(groupPosition);
            }
            if (SmallLogoStr == "null") {
                url = "http://domain/images/default.jpg";
            } else {
                url = "http://domain/" + this._listDataSmallPlaceholder.get(groupPosition);
            }


            if (viewHolder.BigImage.getTag() == null) Image.loadToView(url2, viewHolder.BigImage);
            if (viewHolder.SmallImage.getTag() == null) Image.loadToView(url, viewHolder.SmallImage);
            Bitmap imagenAndroid = BitmapFactory.decodeResource(this._context.getResources(), R.id.lblPlaceHolder);

            viewHolder.BigImage.setImageBitmap(imagenAndroid);

        }

        viewHolder.FirstText.setText(headerTitle);
        viewHolder.SecondText.setText(SubTitle);

        String BigLogoStr = (String) getBigLogoStr(groupPosition);
        String SmallLogoStr = (String) getSmallLogoStr(groupPosition);
        String url = "";
        String url2 = "";
        if (BigLogoStr == "null") {
            url2 = "http://domain/images/default.jpg";
        } else {
            url2 = "http://domain/" + this._listDataBigPlaceholder.get(groupPosition);
        }
        if (SmallLogoStr == "null") {
            url = "http://domain/images/default.jpg";
        } else {
            url = "http://domain/" + this._listDataSmallPlaceholder.get(groupPosition);
        }

        if (viewHolder.BigImage.getTag() == null) Image.loadToView(url2, viewHolder.BigImage);
        if (viewHolder.SmallImage.getTag() == null) Image.loadToView(url, viewHolder.SmallImage);

        return convertView;
    }

    @
    Override
    public boolean hasStableIds() {
        return false;
    }

    @
    Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }

    static class ViewHolder {
        private TextView FirstText;
        private TextView SecondText;
        private int ThirdText;
        private ImageView BigImage;
        private ImageView SmallImage;


        public Bitmap getImage() {
            //return image;
            return null;
        }
    }


    private static class Image {

        private static LruCache < String, Bitmap > mMemoryCache = null;
        private static int cacheSize = 1024 * 1024 * 10;

        private static class imageDownloaderTaskC extends AsyncTask < String, Void, Bitmap > {

            private ImageView mTarget;

            public imageDownloaderTaskC(ImageView target) {
                this.mTarget = target;
            }

            @
            Override
            protected void onPreExecute() {
                mTarget.setTag(this);
            }

            @
            SuppressLint("NewApi")@ Override
            protected Bitmap doInBackground(String...urls) {

                String url = urls[0];

                Bitmap result = null;

                if (url != null) {
                    //Log.d("DOWNLOAD START!","bitmap "+url);
                    result = load(url);

                    if (result != null) {
                        //Log.d("STORE ON CACHE","bitmap "+url);
                        mMemoryCache.put(url, result);
                        //Log.d("rexult bitmap::","");
                    }
                }
                return result;
            }

            @
            Override
            protected void onPostExecute(Bitmap result) {

                if (mTarget.getTag() == this) {
                    mTarget.setTag(null);

                    if (result != null)
                        mTarget.setImageBitmap(result);

                } else if (mTarget.getTag() != null) {

                    ((imageDownloaderTaskC) mTarget.getTag()).cancel(true);
                    mTarget.setTag(null);
                }
            }
        }

        private static Bitmap downloadBitmapD(String url) {
            HttpURLConnection urlConnection = null;
            try {
                URL uri = new URL(url);
                urlConnection = (HttpURLConnection) uri.openConnection();

                final int responseCode = urlConnection.getResponseCode();
                int statusCode = urlConnection.getResponseCode();
                if (statusCode != HttpURLConnection.HTTP_OK) {
                    return null;
                }

                InputStream inputStream = urlConnection.getInputStream();
                if (inputStream != null) {
                    Bitmap bitmap = BitmapFactory.decodeStream(inputStream);

                    //Log.d("DOWNLOADING BITMAP::",""+url);
                    return bitmap;
                }
            } catch (Exception e) {
                urlConnection.disconnect();
                Log.w("ImageDownloader", "Error downloading image from " + url);
            } finally {
                if (urlConnection != null) {
                    urlConnection.disconnect();
                }
            }
            return null;
        }

        public static Bitmap load(String urlString) {

            BitmapFactory.Options options = new BitmapFactory.Options();

            Bitmap bitmap = downloadBitmapD(urlString);

            if (bitmap == null)
                bitmap = BitmapFactory.decodeResource(MyApplication.context().getResources(), R.drawable.placeholder);


            return bitmap;
        }

        @
        SuppressLint("NewApi")
        public static void loadToView(String url, ImageView view) {

            if (url == null || url.length() == 0)
                return;

            if (mMemoryCache == null) {
                //Log.d("MEMORY CACHE:::","CREATED SUCCESSFULLY!");
                mMemoryCache = new LruCache < String, Bitmap > (cacheSize) {

                    @
                    Override
                    protected int sizeOf(String key, Bitmap bitmap) {
                        return (bitmap.getRowBytes() * bitmap.getHeight());
                    }
                };
            }

            Bitmap bitmap = getBitmapFromMemCache(url);

            if (bitmap == null) {

                final imageDownloaderTaskC task = new imageDownloaderTaskC(view);
                view.setTag(task);
                task.execute(url);
            } else {
                view.setImageBitmap(bitmap);
            }
        }


        @
        SuppressLint("NewApi")
        public static Bitmap getBitmapFromMemCache(String url) {

            return (Bitmap) mMemoryCache.get(url);
        }
    }



}

Have you considered using well tested Image loading libraries such as Picasso or Glide? — Much Overflow, Feb 10 '16 at 11:32
mmm I'm not really interested for now on use Third part library.. — Xanax, Feb 10 '16 at 11:46

score 0 · Answer 1 · answered Feb 10 '16 at 11:53

0

You can use ImageLoader https://github.com/nostra13/Android-Universal-Image-Loader

Its easy to use

ImageLoader imageLoader = ImageLoader.getInstance(); // Get singleton instance

// Load image, decode it to Bitmap and display Bitmap in ImageView (or any other view 
//  which implements ImageAware interface)
imageLoader.displayImage(imageUri, imageView);

answered Feb 10 '16 at 11:53

Rohit

49
1

yeah but .. maybe...i will have the same problem :) Shuffle – Xanax Feb 10 '16 at 12:00
so if i change all of this function calls "Image.loadToView(url2, viewHolder.BigImage);" to "imageLoader.displayImage(url, viewHolder.BigImage);" do you think i'm done? – Xanax Feb 10 '16 at 12:29
ok now with this 3rd part library seems to works as well, still some problems when i click on list row header to expand subitems... every clicks made image download again. – Xanax Feb 10 '16 at 13:05
ok but this is not solve my problem... shuffle again! any suggestion? – Xanax Feb 10 '16 at 22:14

LIstView with ImageView Downloaded from Remote Server

1 Answers1