ViewPager unable to load images lazily with Picasso

Question

I have a FragmentActivity in the first tab of a TabHost, and the FragmentActivity itself holds a ViewPager.

The ViewPager's setAdapter() method sets a FragmentPagerAdapter with a set of Fragments. The goal is to have swipeable images in the first pane of the TabHost.

To test it, I was loading a bunch of images that I had kept locally in the project's drawable directory. Everything worked beautifully.

After having tested this initial setup, I'm downloading a bunch of image URLs' off a REST web service. I want these images to load lazily in the ViewPager, and I tried calling Picasso's load() method in three places:

1. The onCreateView() method of the ViewPager's Fragments (the same place where I was earlier loading images from the local drawable directory).

   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container, 
       Bundle savedInstanceState) {                
   
       View myFragmentView = inflater.inflate(R.layout.layout_fragment, container, false);
   
       ImageView imageView = (ImageView)getView().findViewById(R.id.fragment_image);
       String url = getArguments().getString(IMAGE_RESOURCE_URL);
       Context context = getActivity();
       Picasso.with(context).load(url).fit().into(imageView);
   
       return myFragmentView;
   }
   

2. The onViewCreated() method of the ViewPager's Fragments.

   @Override
   public void onViewCreated(View view, Bundle savedInstanceState){
   
       Context context = getActivity();
       String url = getArguments().getString(IMAGE_RESOURCE_URL);
       ImageView imageView = (ImageView)view.findViewById(R.id.fragment_image);
       Picasso.with(context).load(url).fit().into(imageView);      
   
   }        
   

3. The onInstantiateItem() method of the FragmentPagerAdapter.

   @Override
   public Object instantiateItem(ViewGroup container, int position) {
   
       View v = inflater.inflate(R.layout.layout_fragment, container, false);
       Context context = Tab1Activity.this;
       String url = getItem(position).getArguments().getString("IMAGE_RESOURCE_URL");
       ImageView imageView = (ImageView)v.findViewById(R.id.fragment_image);
       Picasso.with(context).load(url).fit().into(imageView);
       return v;
   }
   

None of these methods worked. I know that its not a problem with Picasso because the other day I tried using Picasso in a ListView and it worked like a charm. What am I doing wrong ?

Answer 1

Your first approach should work fine... if you implement it correctly. I would expect your code to crash with a NullPointerException.

Replace:

ImageView imageView = (ImageView)getView().findViewById(R.id.fragment_image);

with:

ImageView imageView = (ImageView)myFragmentView.findViewById(R.id.fragment_image);

Answer 2

Your lazy loader should work in the context of the

Fragment.createView()

where the Fragment is one of a collection being paged by the ViewPager and the FragmentpagerAdapter

That is your option one.

I use another lazyloader that manages local memcache and local filesys cache for the bitmaps needed to load the images. at the time of the "OnCreateView()" it will go to the network to get the URL for the loader if the bitmap is not already cached.