How to add gesture detector to a ViewPager

Question

What I want to do:

Image will be slidable by viewpager but people can zoomIn or zoomOut by gesture detector.

Problem:

I can slide image using viewpager but don't know to how to add gesture detector in my Viewpager.

Code:

Activity:

    public class ImageSlider extends AppCompatActivity {
    private ViewPager viewPager;
    CustomSwipeAdpater customSwipeAdpater;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_slider);
        viewPager = (ViewPager) findViewById(R.id.pager);
        customSwipeAdpater = new CustomSwipeAdpater(this);
        viewPager.setAdapter(customSwipeAdpater);
    }
}

PagerAdpater:

    public class CustomSwipeAdpater extends PagerAdapter {
    private int[] image_resources = {R.drawable.wall,R.drawable.welcome};
    private Context context;
    private LayoutInflater inflater;
    private Animator mCurrentAnimator;
    private ImageView imageView;

    public CustomSwipeAdpater(Context context){
        this.context = context;

    }

    @Override
    public int getCount() {
        return image_resources.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return (view == (RelativeLayout)object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, final int position) {
        inflater = (LayoutInflater)context.getSystemService(context.LAYOUT_INFLATER_SERVICE);

        View item_view = inflater.inflate(R.layout. swipe_layout,container,false);
        imageView = (ImageView) item_view.findViewById(R.id.ivSliderImage);
        TextView textView = (TextView) item_view.findViewById(R.id.tvSliderImageText);
        imageView.setImageResource(image_resources[position]);
        textView.setText("Image:" + position);
        container.addView(item_view);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            }
        });
        return item_view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((RelativeLayout) object);
    }
}

How to add gesture Detector in this code?

Answer 1

Photoview library do exact things you want it's Also support rotating. create touchAttacher and pass your image to it and it's Done.

Here is part of PhotoViewAttacher code which does exactly what you want :

public PhotoViewAttacher(ImageView imageView, boolean zoomable) {
    mImageView = new WeakReference<>(imageView);

    imageView.setDrawingCacheEnabled(true);
    imageView.setOnTouchListener(this);

    ViewTreeObserver observer = imageView.getViewTreeObserver();
    if (null != observer)
        observer.addOnGlobalLayoutListener(this);

    // Make sure we using MATRIX Scale Type
    setImageViewScaleTypeMatrix(imageView);

    if (imageView.isInEditMode()) {
        return;
    }
    // Create Gesture Detectors...
    mScaleDragDetector = VersionedGestureDetector.newInstance(
            imageView.getContext(), this);

    mGestureDetector = new GestureDetector(imageView.getContext(),
            new GestureDetector.SimpleOnGestureListener() {

                // forward long click listener
                @Override
                public void onLongPress(MotionEvent e) {
                    if (null != mLongClickListener) {
                        mLongClickListener.onLongClick(getImageView());
                    }
                }
            });

    mGestureDetector.setOnDoubleTapListener(new DefaultOnDoubleTapListener(this));

    // Finally, update the UI so that we're zoomable
    setZoomable(zoomable);
}