CODEWITHSUNDEEP
androidandroid-viewpager
johnk1
johnk1

Reputation: 247

Swipe feature for images using ViewPager

I am trying to implement full screen image activity which is going to load images from a URL. I have set all the URLs in an array. But, somehow I don't see anything during preview.

Find below the FullScreenActivity code:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_full_image);

    // get intent data
    Intent intent = getIntent();

    // Selected image id
    int position = intent.getExtras().getInt("id");

    Object[] s = (Object[]) intent.getSerializableExtra("full_url_array");
    String[] imageArray = Arrays.copyOf(s, s.length, String[].class);//intent.getExtras().getStringArray("full_url_array");

    CustomGridViewAdapter imageAdapter = new CustomGridViewAdapter(this, postImages);
    List<ImageView> images = new ArrayList<ImageView>();

    Log.d(TAG, "imageAdapter.getCount = "+imageAdapter.getCount());

    // Retrieve all the images
    for (int i = 0; i < imageAdapter.getCount(); i++) {
        try {
            ImageView imageView = new ImageView(this);
            Bitmap bitmap = BitmapFactory.decodeStream((InputStream) new URL(imageArray[i]).getContent());
            imageView.setImageBitmap(bitmap);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            images.add(imageView);
        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    Log.d(TAG, "images.size = "+images.size());
    // Set the images into ViewPager
    ImagePagerAdapter pageradapter = new ImagePagerAdapter(images);
    ViewPager viewpager = (ViewPager) findViewById(R.id.pager);
    viewpager.setAdapter(pageradapter);
    // Show images following the position
    viewpager.setCurrentItem(position);
}

Another question: What is better to use in ViewPager: NetWorkImageView or ImageView?

Thanks.

Upvotes: 0

Views: 1062

Answers (1)

alpinescrambler
alpinescrambler

Reputation: 1954

So looks like your activity receives an array of URL pointing to images. I used the volley framework, so to answer your second question, I used NetworkImageView to display images in full screen (swipe to see next...)

The general flow of my app was this:

1.) Activity has all the URLs received as a bundle, similar to yours.

2.) Instantiate an ImagePagerAdapter class (that you write extending FragmentStatePagerAdapter). The relevant code would look like this:

// Set up ViewPager and backing adapter
mAdapter = new ImagePagerAdapter(getSupportFragmentManager(), mDataItems.size());
mPager = (ViewPager) findViewById(R.id.pager);
mPager.setAdapter(mAdapter);

where mPager is the ViewPager you defined in your layout

3.) In your ImagePagerAdapter class, getItem implementation, instantiate an "ImageDetailFragment" fragment passing along the URL of the image for "the page". For example:

    @Override
    public Fragment getItem(int position) {

        final String itemLink = mDataItems.get(position);
        return ImageDetailFragment.newInstance(itemLink);
    }

4.) Receive the link (passed as an extra) on your "ImageDetailFragment" . For example:

public static ImageDetailFragment newInstance(String imageUrl) {
    final ImageDetailFragment f = new ImageDetailFragment();

    final Bundle args = new Bundle();
    args.putString(IMAGE_DATA_EXTRA, imageUrl);
    f.setArguments(args);

    return f;
}

AND then

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mImageUrl = getArguments() != null ? getArguments().getString(IMAGE_DATA_EXTRA) : null;
     // blah blah
    }

5.) To "show" the image, using volley framework in my case (or you can use Picasso, etc...)

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    // volley specific class
    imageLoader = ((MyApp) getActivity().getApplicationContext()).getImageLoader();

    mImageView.setErrorImageResId(R.drawable.empty_photo); // if cannot load
    mImageView.setImageUrl(mImageUrl, imageLoader); // load it to the NetworkImageView , volley specific implementation

}

You can see this similar pattern in the Android Developer docs... here: http://developer.android.com/training/displaying-bitmaps/display-bitmap.html#viewpager

Good Luck!

Upvotes: 2

Related Questions