Combining CoverFlow and Universal Image Loader

Question

I'm using fancyCoverFlow and universalImageLoader to display my custom 3D gallery :D something like below picture. My problem is it's not showing images when downloaded unless I swipe between the Gallery pictures and that picture hide from screen and when appears next time it's showing image But in Sample of UniversalImageLoader the downloaded image showing right after they download.

Here is my getView code for Adapter :

 public View getView(int position, View view, ViewGroup parent) {


    RoundedImageView photo = (RoundedImageView) view;
    if (photo == null) {
        photo = (RoundedImageView) inflater.inflate(R.layout.row_gallery_latest_issue_item, parent, false);
    }
    try {
        System.out.println("Test is good");
        ImageLoaderHelper.configureCacheableImage(mContext, photo, latestBook.get(position).getImageUrl(),
                R.drawable.avatar_issue, null);
    } catch (NullPointerException e) {
        photo.setImageResource(R.drawable.avatar_issue);
        e.printStackTrace();
    }

    return createReflectedImages(photo);
}

it's exactly same as UniversalImageLoader Sample expect I have a TryCatche and CreateReflectedImage ( which make our ImageView Reflective )

, And one more thing my ImageLoaderHelper is :

public class ImageLoaderHelper {
public static void configureCacheableImage(Context context, ImageView imageView
        , String imageUrl, Integer defaultImageResourceId
        , ImageLoadingListener imageLoadingListener) {
    ImageLoader imageLoader = ImageLoader.getInstance();
    DisplayImageOptions.Builder builder = new DisplayImageOptions.Builder();
    builder.displayer(
            new SimpleBitmapDisplayer())
            .cacheOnDisc(true)
            .cacheInMemory(true)
            .resetViewBeforeLoading(true)
            .imageScaleType(ImageScaleType.IN_SAMPLE_INT)
            .bitmapConfig(Bitmap.Config.RGB_565);
    if (defaultImageResourceId != null)
        builder.showImageOnFail(defaultImageResourceId).showImageForEmptyUri(defaultImageResourceId).showStubImage(defaultImageResourceId);
    if (!imageLoader.isInited())
        imageLoader.init(ImageLoaderConfiguration.createDefault(context));
    imageLoader.displayImage(imageUrl, imageView, builder.build(), imageLoadingListener);
}

}

UPDATE :

After a day debugging I found the a Clue The problem is with My Adapter But I don't know How to resolve it !

Here is code of CreateReflectedImages() :

   public ImageView createReflectedImages(RoundedImageView image) {

    RoundedDrawable drawable = (RoundedDrawable) image.getDrawable();
    Bitmap originalImage = drawable.toBitmap();

    int width = originalImage.getWidth();
    int height = originalImage.getHeight();

    Matrix matrix = new Matrix();
    matrix.preScale(1, -1);

    Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
            height / 2, width, height / 2, matrix, false);

    Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
            (height + height / 2), Config.ARGB_8888);

    Canvas canvas = new Canvas(bitmapWithReflection);

    canvas.drawBitmap(originalImage, 0, 0, null);

    canvas.drawBitmap(reflectionImage, 0, height, null);

    Paint paint = new Paint();
    LinearGradient shader = new LinearGradient(0, height, 0, bitmapWithReflection.getHeight()
            , 0x70ffffff, 0x00ffffff, TileMode.CLAMP);

    paint.setShader(shader);

    paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));

    canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()
            , paint);

    RoundedImageView imageView = new RoundedImageView(mContext);
    imageView.setImageBitmap(bitmapWithReflection);
    imageView.setLayoutParams(new ImageGallery3D.LayoutParams(GeneralHelper.dp(180), GeneralHelper.dp(240)));//width and height of Image
    return imageView;
}

Answer 1

The problem is that you have 2 separate instances of imageview floating around. 1 is created in getView, and the second is created in createReflectedImage. So basically, when the image finishes downloading, a new imageview has already replaced it and the downloaded image is loaded into one that is no longer visible (or possibly even exists). The reason why it loads correctly the second time (after scrolling offscreen) is that the latency is much lower since it is being loaded from memory not off the web or wherever, so when RoundedDrawable drawable = (RoundedDrawable) image.getDrawable(); it actually has the image that you want, rather than just the placeholder!

public View getView(int position, View view, ViewGroup parent) {


    RoundedImageView photo = (RoundedImageView) view;
    ...
        /*
         *Passing first instance of photo into ImageLoaderHelper
         */

    ImageLoaderHelper.configureCacheableImage(mContext, photo, latestBook.get(position).getImageUrl(),
                R.drawable.avatar_issue, null);
    ...
    //
    //Returns the new instance of RoundedImageView that ImageLoader is not aware of to the adapter
    //
    return createReflectedImages(photo);
}

public ImageView createReflectedImages(RoundedImageView image) {
    ...

    RoundedImageView imageView = new RoundedImageView(mContext);
    imageView.setImageBitmap(bitmapWithReflection);
    imageView.setLayoutParams(new ImageGallery3D.LayoutParams(GeneralHelper.dp(180), GeneralHelper.dp(240)));//width and height of Image

    //Returning a new instance of imageView
    return imageView;
}

Instead of returning imageView in createReflectedImages, return "image". Then implement a callback that you pass in to ImageLoaderHelper that calls createReflectedImages after the image has successfully been loaded to apply your effect.