Android ViewPager with zoomable ImageView

Question

I've got a ViewPager made by ImageViews implemented like this:

@Override
    public Object instantiateItem(View collection, int position) {
        ImageView iv = new ImageView(ctx);
        if (pageList.size() > position)
            iv.setImageBitmap(pageList.get(position));
        else
            iv.setImageResource(R.drawable.loading);

        iv.setOnTouchListener(this);
        ((ViewPager) collection).addView(iv, 0);
        System.out.println("POS: " + position);
        return iv;
    }

Any chance i can have that ImageView zoomable by double tap (and swipe the image) or pinch zoomable?

Answer 1

It's possible, here's how I did it.

My top level layout element is FrameLayout which allows several views to be stacked on top of each other. The FrameLayout has two children: the ViewPager and an ImageView that I'll use for showing zoomed-in picture.

The ImageView is normally hidden. I listen for touch events on pictures inside the ViewPager and based on those, show and hide and pan the ImageView. It works fairly well. I can give more details if need be.

Answer 2

I used the TouchImageView class by Mike Ortiz. It's not perfect. But it's cool because you can drop it in really easily! The double-tap zoom animation can be funny. The pinch zoom can be triggered via double-taps which is weird.

It does work really well if you drop it straight into a ViewPager (via an adapter class). When zoomed in you can freely move left and right without triggering a page change unless you are right on the edge, which is really cool!

https://github.com/MikeOrtiz/TouchImageView/blob/master/src/com/ortiz/touch/TouchImageView.java

Answer 3

After searching a lot and among a lot of outdated and deleted libraries I have found this one which is up to date and also works like a charm inside Viewpagers: https://github.com/davemorrissey/subsampling-scale-image-view

here's how it works:

imageView.setImage(ImageSource.resource(R.drawable.monkey));
// ... or ...
imageView.setImage(ImageSource.asset("map.png"))
// ... or ...
imageView.setImage(ImageSource.uri("/sdcard/DCIM/DSCM00123.JPG"));