Question

i know the title is a bit messy, but here is the problem….
my goal is to retrieve title, and draw thumbnails of my youtube channel videos by using thumbnail URL, to the listView…
so far, i have the textView to display video title properly, but the thumbnail just couldnt be draw anyway….. by the way, i have the json / sqlite stuff classes done properly and they can retrieve data properly, so i dont have to worry about that… the only thing that bothers me is thumbnail wont display, the imageView displays as empty space in the app….

here is my code, please give me a hand. thx

this is the on create method of the activity…

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);


    String[] uiBindFrom = { TutListDatabase.COL_TITLE, TutListDatabase.COL_THUMBNAIL };
    int[] uiBindTo = { R.id.title, R.id.thumbnail };

    getLoaderManager().initLoader(TUTORIAL_LIST_LOADER, null, this);

    adapter = new SimpleCursorAdapter(
            getActivity().getApplicationContext(), R.layout.list_item,
            null, uiBindFrom, uiBindTo,
            CursorAdapter.FLAG_REGISTER_CONTENT_OBSERVER);
    adapter.setViewBinder(new MyViewBinder());
    setListAdapter(adapter);
}

and this one is the private class for putting stuff onto listView…

private class MyViewBinder implements SimpleCursorAdapter.ViewBinder{

    @Override
    public boolean setViewValue(View view, Cursor cursor, int columnIndex) {
        int viewId = view.getId();
        switch(viewId){
        case R.id.title:
            TextView titleTV = (TextView)view;
            titleTV.setText(cursor.getString(columnIndex));
            break;

                    // it is not displaying any thumbnail in app....
        case R.id.thumbnail:
            ImageView thumb = (ImageView) view;
            thumb.setImageURI(Uri.parse(cursor.getString(columnIndex)));

        break;
        }
        return false;
    }

}

and here is the xml layout file…

<?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" >

<ImageView
    android:id="@+id/thumbnail"
    android:layout_width="101dp"
    android:layout_height="101dp"
    android:src="@drawable/icon" />

<TextView
    android:id="@+id/title"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="6dp"
    android:textSize="24dp" />


</LinearLayout>

Answer 1

I can show you a way that I have used and it worked quite well, first off we need a way to cache the images and the best way I have seen to date, is to use the LruCache as described in the excellent Google IO presentation doing more with less: http://www.youtube.com/watch?v=gbQb1PVjfqM

Here is my implementation of the method described in that presentation.

public class BitmapCache extends LruCache<String, Bitmap> { 

    public BitmapCache(int sizeInBytes) {
        super(sizeInBytes);
    }   

    public BitmapCache(Context context) {
        super(getOptimalCacheSizeInBytes(context));
    }   

    public static int getOptimalCacheSizeInBytes(Context context) {
        ActivityManager am = (ActivityManager) context.getSystemService(Context.ACTIVITY_SERVICE);

        int memoryClassBytes = am.getMemoryClass() * 1024 * 1024;

        return memoryClassBytes / 8;
    }

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

Next we need to load the images asynchronously with an AsyncTask, the following implementation takes care of loading an image into the given ImageView and dealing with the cache:

public class LoadImageAsyncTask extends AsyncTask<Void, Void, Pair<Bitmap, Exception>> {
    private ImageView mImageView;
    private String mUrl;
    private BitmapCache mCache;

    public LoadImageAsyncTask(BitmapCache cache, ImageView imageView, String url) {
        mCache = cache;
        mImageView = imageView;
        mUrl = url;

        mImageView.setTag(mUrl);
    }

    @Override
    protected void onPreExecute() {
        Bitmap bm = mCache.get(mUrl);

        if(bm != null) {
            cancel(false);

            mImageView.setImageBitmap(bm);
        }
    }

    @Override
    protected Pair<Bitmap, Exception> doInBackground(Void... arg0) {
        if(isCancelled()) {
            return null;
        }

        URL url;
        InputStream inStream = null;
        try {
            url = new URL(mUrl);
            URLConnection conn = url.openConnection();

            inStream = conn.getInputStream();

            Bitmap bitmap = BitmapFactory.decodeStream(inStream);

            return new Pair<Bitmap, Exception>(bitmap, null);

        } catch (Exception e) {
            return new Pair<Bitmap, Exception>(null, e);
        }
        finally {
            closeSilenty(inStream);
        }
    }

    @Override
    protected void onPostExecute(Pair<Bitmap, Exception> result) {
        if(result == null) {
            return;
        }

        if(result.first != null && mUrl.equals(mImageView.getTag())) {
            mCache.put(mUrl, result.first);
            mImageView.setImageBitmap(result.first);
        }
    }

    public void closeSilenty(Closeable closeable) {
        if(closeable != null) {
        try {
            closeable.close();
        } catch (Exception e) {
            // TODO: Log this
        }
        }
    }
}

Next you need to create an instance of your BitmapCache in the Activity or Fragment that is hosting the ListView, in onCreate(…) or onActivityCreated(…):

mBitmapCache = new BitmapCache(this); // or getActivity() if your using a Fragment

Now we need to update the SimpleCursorAdapter that shows the image, I have ommited most of the code as its specific to my project, but the idea is you override setViewImage where the value should be a value that is bound to the cursor, I zap the imageview to null to make sure it does not have an odd image from the cache associated to an item.

    @Override
    public void setViewImage(ImageView iv, String value) {
        final String url = value;
        iv.setImageBitmap(null);
        new LoadImageAsyncTask(mBitmapCache, iv, url).execute();

    }

Update

To make it clear, your adapter should look something like this

    adapter = new SimpleCursorAdapter(
            context, R.layout.list_item,
            null, uiBindFrom, uiBindTo,
            CursorAdapter.FLAG_REGISTER_CONTENT_OBSERVER) {
        @Override
        public void setViewImage(ImageView iv, String value) {
                final String url = value;
                iv.setImageBitmap(null);
                new LoadImageAsyncTask(mBitmapCache, iv, url).execute();
        }
    };

Hope that helps!