Android-Universal-Image-Loader :: Loading images on GridView

Question

I am trying to develop a wallpaper application. When the application launches, an activity shows the categories (an image and corresponding name on a textView) on a gridView. When I select a category, it navigates to a sub-category. In sub-category activity, it also shows subcategory image with its corresponding name on textVew. Problem is in sub-category activity images are not loading. Sometimes it loads a image; when i press back-button, then select that sub-category again, it loads three mode image; pressing back button and selecting than sub-category causes loading another three images (now its total 10 images). The images is cached on the disk properly. Here is my configuration:

   cacheDir = new File(Environment.getExternalStorageDirectory(),
                    "peakwallpapers/cache"); // --
            // Create configuration for ImageLoader
            config = new ImageLoaderConfiguration.Builder(this).enableLogging()
                    .discCache(new UnlimitedDiscCache(cacheDir))
                    .memoryCache(new UsingFreqLimitedMemoryCache(2000000))
                    .denyCacheImageMultipleSizesInMemory().threadPoolSize(10)
                    .threadPriority(Thread.MIN_PRIORITY + 2)
                    .defaultDisplayImageOptions(DisplayImageOptions.createSimple())
                    .build(); // --

            options = new DisplayImageOptions.Builder()
                    .showStubImage(R.drawable.stub_image)
                    .showImageForEmptyUri(R.drawable.image_for_empty_url)
                    .cacheInMemory().cacheOnDisc().build();
            imageLoader.init(config);

Here is the getView() methood:

   @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            final View rowView;
            final ViewHolder viewHolder = new ViewHolder();
            if (convertView == null) {
                rowView = getLayoutInflater().inflate(
                        R.layout.item_sub_category_grid, null);

                viewHolder.imageView = (ImageView) rowView
                        .findViewById(R.id.image_item_sub_category);
                viewHolder.textView = (TextView) rowView
                        .findViewById(R.id.text_item_sub_cat_desc);

                rowView.setTag(viewHolder);

            } else {
                rowView = (View) convertView;
            }

            ViewHolder holder = (ViewHolder) rowView.getTag();
            holder.textView.setText(wpSubCategories.get(position)
                    .getSubCategoryName());

            imageLoader.displayImage(imageUrls[position], viewHolder.imageView,
                    options, new SimpleImageLoadingListener() {
                @Override
                public void onLoadingStarted() {
                    showLoading();
                }
                        @Override
                        public void onLoadingComplete(Bitmap loadedImage) {
                            Animation anim = AnimationUtils.loadAnimation(
                                    SubCategoryGridActivity.this,
                                    R.anim.fade_in);
                            viewHolder.imageView.setAnimation(anim);
                            anim.start();
                        }
                    });

            return rowView;
        }
    }

My Grid layout: sub_category_grid.xml :

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview_sub_category"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:horizontalSpacing="4dip"
    android:numColumns="2"
    android:verticalSpacing="4dip" />

and My item of grid: item_sub_category_grid.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frame_l_item_sub_category_item"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight=".5"
    android:background="@drawable/textlines" >

    <ImageView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/image_item_sub_category"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="@string/descr_image"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/text_item_sub_cat_desc"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@drawable/cat_bg"
        android:gravity="center_horizontal"
        android:text="TextView"
        android:textColorHighlight="#656565"
        android:typeface="monospace" >
    </TextView>

</FrameLayout>

N.B: It shows no error on LogCat.

Answer 1

First of all, I think your thread pool size is too big. Of course it depends on devices your app is targeted. But it will work really slow on not-modern devices. I think 5 is enough, but you should test it yourself. Vary thread pool size and thread priority to achieve best speed and performance.

Second: you have a logical mistake in your getView() method. Move final ViewHolder viewHolder = new ViewHolder(); after if (convertView == null) { and you'll see the problem. Your vars viewHolder and holder logically overlaps each other.

UPD: Don't call ImageLoader.stop() in activity's onStop() if you do.