listView with progressbar on every item?

Question

I've got a listView and on every item i added a progressBar which needs to disappear after image has been downloaded. But i couldn't find a way to do this. i tried to make it disappear on getView class, but it disappears immediately not after downloading image.

For example, while adding some views to scrollView on an AsyncTask class' DoInBackground i could download image and then onPostExecute i could set image, and then remove progressBar. This works just fine. I want to do something like this for listView. Could anyone help me?

I don't know if i was clear or not, but i can sum up that i have list_item.xml contains imageview and progressbar on it. And i want to make these progressbars disappear after downloaded and set images.

Thanks for helps.

Here's my adapter class:

class myListAdapter extends ArrayAdapter<Items> {

    private ArrayList<Items> items;
    private Context ctx;

    public myListAdapter(Context context, int textViewResourceId,
            ArrayList<Items> items) {
        super(context, textViewResourceId, items);
        this.ctx = context;
        this.items = items;
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View v = convertView;

        if (v == null) {
            LayoutInflater inf = (LayoutInflater) ctx
                    .getSystemService(LAYOUT_INFLATER_SERVICE);
            v = inf.inflate(R.layout.main_list_item, null);
        }

        Items index = listContents.get(position);

        if (index != null) {

            ImageView img = (ImageView) v.findViewById(R.id.listImage);
            TextView title = (TextView) v.findViewById(R.id.listTopText);
            TextView content = (TextView) v.findViewById(R.id.listDownText);

            if (title != null)
                title.setText(index.getTitle());

            if (content != null)
                content.setText(index.getContent());

            if (img != null) 
                img.setImageBitmap(index.getImageBitmap());
            ((ProgressBar) v.findViewById(R.id.listItemProgressBar)).setVisibility(View.GONE);

        }

        return v;
    }
}

So, on this line below, i make the progress bar gone but it should be gone after image downloaded and set... But on list items added there are no progressbars, that's my problem??

 ((ProgressBar) v.findViewById(R.id.listItemProgressBar)).setVisibility(View.GONE);

Answer 1

You can do like this, but it's not the best practise. you should check the Thread-Sync yourself. and Cache the bitmap use LruCache or WeakRefrences. the demo only show the logic.

final class MyAdapter extends BaseAdapter {

    private final HashMap<String, Bitmap> mImageMap;
    private final HashSet<String> mDownloadingSet;

    public MyAdapter() {
        mImageMap = new HashMap<String, Bitmap>();
        mDownloadingSet = new HashSet<String>();
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return NUMBER_YOU_WANT;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
    }

    public void setImage(String url, Bitmap bitmap) {
        mDownloadingSet.remove(url);
        if (bitmap != null) {
            mImageMap.put(url, bitmap);
            notifyDataSetChanged();
        }
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = getLayoutInflater().inflate(R.layout.grid_view,
                    parent, false);
            holder = new ViewHolder();

            /***
             * find the views.
             */

            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        final String url = "";// Get the image url here.

        if (mImageMap.containsKey(url)) {
            holder.image.setImageBitmap(mImageMap.get(url));
            holder.progressBar.setVisibility(View.GONE);
        } else {
            holder.image.setImageResource(R.drawable.img_downloading);
            holder.progressBar.setVisibility(View.VISIBLE);
            if (!mDownloadingSet.contains(url)) {
                ImageDownloader task = new ImageDownloader();
                mDownloadingSet.add(url);
                task.execute(url);
            }

        }

        return convertView;
    }
}

static class ViewHolder {
    ImageView image;
    ProgressBar progressBar;
}

final class ImageDownloader extends AsyncTask<String, Void, Bitmap> {

    String url;

    @Override
    protected Bitmap doInBackground(String... params) {
            url = params[0];
        final Bitmap bitmap = fetchUrlAndDecode(params[0]);
        return bitmap;
    }

    @Override
    protected void onPostExecute(Bitmap result) {
        mAdapter.setImage(url, result);
    }

    private Bitmap fetchUrlAndDecode(String url) {
        Bitmap bitmap = null;

        /**
         * Fetch your bitmap and decode it.
         */

        return bitmap;
    }

}

Answer 2

This is your XML:

 <RelativeLayout
    android:layout_width="50dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:paddingLeft="5dp" >

    <ProgressBar
        android:id="@+id/progress"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_below="@+id/text_progress"
        android:indeterminate="false"
        android:layout_centerInParent="true"
        android:progress="50"
        android:max="100" />

     <TextView
        android:id="@+id/text_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="#000"
        android:textStyle="bold"
        android:textSize="15dp"
        android:text="0%"/>

</RelativeLayout>

and override the getView# method:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View vi = convertView;
    if (vi == null)
        vi = inflater.inflate(R.layout.oportunidade_item_list, null);

    ProgressBar title = (ProgressBar) vi.findViewById(R.id.progress);
    title.setProgress(Integer.parseInt(((Oportunidade) get(position)).getProbabilidade()));
    return super.getView(position, vi, parent);
}

calling the super, it will set the values of others views for you, if you did with ArrayList<HashMap<?, ?>>

That is all;