How can I preserve images loaded before?

Question

I've 3 fragments. Those fragments are placed into a TabsAdapter, for swipping between those fragments.

The problem, is that when the app loads, and the fragmentA view is created, it downloads the image and after it, changes a imageview:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    this.myFragmentView = inflater.inflate(R.layout.foto_setmana, container, false); //Això conté els "edittext i altres"
        new DownloadImageTask(myFragmentView).execute("http://192.168.1.35/testing/fotos/foto1.jpg");
    }
}

Code inside DownloadImageTask:

public class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
View myfragmentview;

public DownloadImageTask(View myfragmentview) {
    this.myfragmentview=myfragmentview;
}

protected Bitmap doInBackground(String... urls) {
    String urldisplay = urls[0];
    Bitmap mIcon11 = null;
    try {
        InputStream in = new java.net.URL(urldisplay).openStream();
        mIcon11 = BitmapFactory.decodeStream(in);
        Log.d("debugging","mIcon11"+mIcon11.getHeight());
    } catch (Exception e) {
        Log.e("Error", e.getMessage());
        e.printStackTrace();
    }
    return mIcon11;
}

protected void onPostExecute(Bitmap result) {
    ImageView imv=(ImageView)this.myfragmentview.findViewById(R.id.imageView1);
    imv.setImageBitmap(result);
}

So this is what is happening:

1.- I click the app 2.- The app loads. This screen is taken before the app had time to retrieve the image. 3.- As it retrieve the image, its shown. 4.- I swipe the fragment to the next one. 5.- The second fragment 6.- I swipe again to the 3rd fragment. 7. The 3rd fragment. 8. I go back to the first fragment, and the image isnt loaded anymore. Obviously I wont call to DownloadImageTask again, because it would slow so much users experience.

What should I do to preserve the image?

Oh, and by the way. If I just swipe from 1st to 2nd, the image isnt "unloaded", it just happens if I go to 3rd or further. Any idea why is this happening? I'm just curious about this.

Thank you!

Answer 1

I found out a way that it's working:

What we've to do, is creating a variable on the fragment to know if we downloaded, and another to save the bitmap at all, something like:

int downloaded;
Bitmap pictureSaved;

Then we initialize it on "onAttach" method from fragment.

@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);
    this.downloaded=0;
}

And after that, on the "main code":

if (this.downloaded==0){
//we're here if we didn't download yet
            new DownloadImageTask(myFragmentView, this).execute("http://192.168.1.33/testing/fotos/foto1.jpg");
            this.downloaded=1;
        } else if(this.downloaded==1) {
//we're here if we already downloaded.
            ImageView imv=(ImageView)myFragmentView.findViewById(R.id.imageView1);
            imv.setImageBitmap(this.pictureSaved);
        }

DownloadImageTask code, should download the image, and as you can see, I pass to his constructor "this", so I can access the fragment methods and variables.

I create a method into the fragment to update the picture:

public void update(Bitmap updated){
    ImageView imv=(ImageView)myFragmentView.findViewById(R.id.imageView1);
    this.pictureSaved=updated;
    imv.setImageBitmap(this.pictureSaved);
    this.downloaded=1;
}

DownloadImageTask calls fragment's method like this. Variables:

MyFragment frag;

Constructor:

public DownloadImageTask(View myfragmentview, MyFragmentA parent) {
    this.myfragmentview=myfragmentview;
    this.frag=parent;
}

PostExecute:

protected void onPostExecute(Bitmap result) {
    frag.update(result);
}

It works perfectly.

Hope this helps someone.

Answer 2

Use the LruCache to create a RAM cache of your bitmaps.

This great Google IO talk explains exactly how to use it: http://youtu.be/gbQb1PVjfqM?t=5m