title: How to implement ViewPager to load images using Picasso or Universal Image Loader?
body: <p>I've been searching for a fully made example where the author loads images from a URL into a ViewPager using an image loading library like Picasso or Universal Image Loader. Every tutorial's solution I've found either uses an array of images from the resource files, does not work at all/is outdated, or is just different enough so that when I try to make it exactly what I need a networking crash occurs.</p>
  
  <p>Here's what I've tried:</p>
  
  <p><a href="http://developer.android.com/training/displaying-bitmaps/display-bitmap.html" rel="nofollow noreferrer">http://developer.android.com/training/displaying-bitmaps/display-bitmap.html</a></p>
  
  <p>It uses a FragmentActivity and loads fragments with imageviews. It seemed pretty straightforward until I tried adding my code for the universal image loader in the loadBitmap method</p>
  
  <pre><code>import android.os.Bundle;
  import android.support.v4.app.Fragment;
  import android.support.v4.app.FragmentActivity;
  import android.support.v4.app.FragmentManager;
  import android.support.v4.app.FragmentStatePagerAdapter;
  import android.support.v4.view.ViewPager;
  import android.widget.ImageView;
  
  import com.nostra13.universalimageloader.core.ImageLoader;
  import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
  
  public class ImageDetailActivity extends FragmentActivity {
      public static final String EXTRA_IMAGE = "extra_image";
  
      private ImagePagerAdapter mAdapter;
      private ViewPager mPager;
  
          private ImageLoader imageLoader;
  
  
      // A static dataset to back the ViewPager adapter
      public final static String[] imageResIds = new String[] {"http://www.centurynovelty.com/catImages/039-059_small.jpg",
              "http://rlv.zcache.com/sdfsd_iphone_4_case_mate_case-r6a5c5f1401dc45e6b9c101e6670de8c9_a460e_8byvr_512.jpg", };
  
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.image_detail_pager); // Contains just a ViewPager
  
          mAdapter = new ImagePagerAdapter(getSupportFragmentManager(), imageResIds.length);
          mPager = (ViewPager) findViewById(R.id.pager);
          mPager.setAdapter(mAdapter);
  
      }
  
  
      public void loadBitmap(int resId, ImageView imageView) {
  //        mImageView.setImageResource(R.drawable.image_placeholder);
  //        BitmapWorkerTask task = new BitmapWorkerTask(mImageView);
  //        task.execute(resId);
  
  
                  ImageLoaderConfiguration config =
              new ImageLoaderConfiguration.Builder(getApplicationContext())
                  .build();
          ImageLoader.getInstance().init(config);
  
          // Load image, decode it to Bitmap and display Bitmap in ImageView (or
          // any other view which implements ImageAware interface)
          imageLoader.displayImage(imageResIds[resId], imageView);
      }
  
      public static class ImagePagerAdapter extends FragmentStatePagerAdapter {
          private final int mSize;
  
          public ImagePagerAdapter(FragmentManager fm, int size) {
              super(fm);
              mSize = size;
          }
  
          @Override
          public int getCount() {
              return mSize;
          }
  
          @Override
          public Fragment getItem(int position) {
              return ImageDetailFragment.newInstance(position);
          }
      }
  }
  </code></pre>
  
  <p>Then the fragment class:</p>
  
  <pre><code>    import android.os.Bundle;
  import android.support.v4.app.Fragment;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  import android.widget.ImageView;
  
  public class ImageDetailFragment extends Fragment {
      private static final String IMAGE_DATA_EXTRA = "resId";
      private int mImageNum;
      private ImageView mImageView;
  
      static ImageDetailFragment newInstance(int imageNum) {
          final ImageDetailFragment f = new ImageDetailFragment();
          final Bundle args = new Bundle();
          args.putInt(IMAGE_DATA_EXTRA, imageNum);
          f.setArguments(args);
          return f;
      }
  
      // Empty constructor, required as per Fragment docs
      public ImageDetailFragment() {}
  
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          mImageNum = getArguments() != null ? getArguments().getInt(IMAGE_DATA_EXTRA) : -1;
      }
  
      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container,
                               Bundle savedInstanceState) {
          // image_detail_fragment.xml contains just an ImageView
          final View v = inflater.inflate(R.layout.image_detail_fragment, container, false);
          mImageView = (ImageView) v.findViewById(R.id.imageView);
          return v;
      }
  
      @Override
      public void onActivityCreated(Bundle savedInstanceState) {
          super.onActivityCreated(savedInstanceState);
          if (ImageDetailActivity.class.isInstance(getActivity())) {
              final int resId = mImageNum;
              // Call out to ImageDetailActivity to load the bitmap in a background thread
              ((ImageDetailActivity) getActivity()).loadBitmap(resId, mImageView);
          }
      }
  }
  </code></pre>
  
  <p>Finally the layouts for the fragment, the viewpager activity.</p>
  
  <p>image_detail_fragment.xml:</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="utf-8"?&gt;
  
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical" android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
  
      &lt;ImageView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@+id/imageView"
          android:layout_gravity="center_horizontal" /&gt;
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>image_detail_pager.xml:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  
  &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  
      xmlns:tools="http://schemas.android.com/tools"
  
      android:layout_width="match_parent"
  
      android:layout_height="match_parent" &gt;
  
  
      &lt;android.support.v4.view.ViewPager
  
          android:id="@+id/pager"
  
          android:layout_width="fill_parent"
  
          android:layout_height="fill_parent" /&gt;
  
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>Any suggestions would be appreciated.</p>