How to implement zoom, pan and drag on Viewpager in android?

Question

I have a viewpager inside which I am showing video and image, Please tell me How I can implement the functionality as zoom, pan, drag in this.

In my viewpager I have videoview and imageview inside it, now what I want is when I perform zoom it should be zoom both the views. Please tell me about the implementation of this. Everywhere I have seen on the forums I found people have worked on the zooming pan drag on single view like imageview but not on viewpager directly, In my case I have to directly deal with viewpager so that all the views inside it can be handled with functionality like zoom, pan, drag irrespective of number of views inside it. Help is appreciated. Thanks.

Ramz · Answer 1 · 2015-03-20T15:38:25.327

For Zooming and Paning the best library is TouchImageView

,But When We Add This on the view pager there will be a a issue, while sliding the image when we zoom a image.ie if i zoom an image and drag to see the the other zoomed portion in the right side,due to the swipe property of the view pager the Pager will swipe the to next image.it will happen if we slide right also.So Fixing This Isuue After a long R&D i finally made some fixed.For that we need to do some modification in the TouchImageView.java and the viewpager

First We Need To Create A custom Viewpager

MyViewPager.java

package com.example.gallery;

import android.content.Context;
 import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

public class MyViewPager extends ViewPager {

private boolean enabled = true;

public MyViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
public boolean onInterceptTouchEvent(MotionEvent arg0) {
    if(enabled)
        return super.onInterceptTouchEvent(arg0);

    return false;
}

public boolean isEnabled() {
    return enabled;
}

public void setEnabled(boolean enabled) {
    this.enabled = enabled;
}

}

After That We Need To Change The TouchImageView Class The Modified Class is Given below

Modified Portions requestDisallowInterceptTouchEvent added to the touch events and onDoubleTap Portion also Modified ,So that User can Swipe to Next Image Only After Zoom out To its orginal or normal Postion.While zoomed in user cant change the current image

private class TouchImageViewListener implements OnTouchListener {

    //
    // Remember last point position for dragging
    //
    private PointF last = new PointF();

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        mScaleDetector.onTouchEvent(event);
        mGestureDetector.onTouchEvent(event);
        PointF curr = new PointF(event.getX(), event.getY());

        if (state == NONE || state == DRAG || state == FLING) {
            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                last.set(curr);
                if (fling != null)
                    fling.cancelFling();
                setState(DRAG);
                    //Modified Portion  

          getParent().requestDisallowInterceptTouchEvent(true);
                break;

            case MotionEvent.ACTION_MOVE:
                if (state == DRAG) {
                    float deltaX = curr.x - last.x;
                    float deltaY = curr.y - last.y;
                    float fixTransX = getFixDragTrans(deltaX, viewWidth,
                            getImageWidth());
                    float fixTransY = getFixDragTrans(deltaY, viewHeight,
                            getImageHeight());
                    matrix.postTranslate(fixTransX, fixTransY);
                    if (deltaX == 0 || normalizedScale == 1.0)
                    //Modified Portion  

           getParent().requestDisallowInterceptTouchEvent(false)
                    else
                               getParent().requestDisallowInterceptTouchEvent(true);
                    fixTrans();
                    last.set(curr.x, curr.y);
                }
                break;

            case MotionEvent.ACTION_UP:
            //Modified Portion  

               getParent().requestDisallowInterceptTouchEvent(false)

                break;
            case MotionEvent.ACTION_POINTER_UP:
                setState(NONE);
                break;
            }
        }

        setImageMatrix(matrix);
        //
        // indicate event was handled
        //
        return true;
    }
}//requestDisallowInterceptTouchEvent is Added When Touch Lister Occurs While Zoomed In

.......
private class GestureListener extends
        GestureDetector.SimpleOnGestureListener {

    @Override
    public boolean onSingleTapConfirmed(MotionEvent e) {
        return performClick();
    }

    @Override
    public void onLongPress(MotionEvent e) {
        performLongClick();
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
            float velocityY) {
        if (fling != null) {
            //
            // If a previous fling is still active, it should be cancelled
            // so that two flings
            // are not run simultaenously.
            //
            fling.cancelFling();
        }
        fling = new Fling((int) velocityX, (int) velocityY);
        compatPostOnAnimation(fling);
        return super.onFling(e1, e2, velocityX, velocityY);
    }

    @Override
    public boolean onDoubleTap(MotionEvent e) {
        boolean consumed = false;

//Modified Portion
        if (state == NONE) {
            float targetZoom = (normalizedScale == minScale) ? maxScale
                    : minScale;
            DoubleTapZoom doubleTap = new DoubleTapZoom(targetZoom,
                    e.getX(), e.getY(), false);
            compatPostOnAnimation(doubleTap);
            consumed = true;
        }
        else
        {
            float targetZoom = (normalizedScale == minScale) ? maxScale
                    : minScale;
            DoubleTapZoom doubleTap = new DoubleTapZoom(targetZoom,
                    e.getX(), e.getY(), false);
            compatPostOnAnimation(doubleTap);
        }
        return consumed;
    }
}//Allow User To Double Tap To Orginal Position So that only he can Swipe to next image

Download The TouchImageView from HereAnd Modify the Above Portions

FullScreenImageAdapter.java

package com.example.gallery;



public class FullScreenImageAdapter extends PagerAdapter {

private Activity _activity;
private String[] mStrings;
private LayoutInflater inflater;
ImageLoader im;


// constructor
public FullScreenImageAdapter(Activity activity, String[] mStrings) {
    this._activity = activity;
    this.mStrings = mStrings;

    im = new ImageLoader(_activity);
}

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

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

@Override
public Object instantiateItem(ViewGroup container, int position) {
    TouchImageView imgDisplay;
    final Button btnClose;

    inflater = (LayoutInflater) _activity
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View viewLayout = inflater.inflate(R.layout.layout_fullscreen_image,
            container, false);
    RelativeLayout parentview = (RelativeLayout) viewLayout
            .findViewById(R.id.rel);
    imgDisplay = (TouchImageView) viewLayout.findViewById(R.id.imgDisplay);
    btnClose = (Button) viewLayout.findViewById(R.id.btnClose);

     im.DisplayImage(mStrings[position], imgDisplay);

    // close button click event
    btnClose.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            _activity.finish();
        }
    });

    ((ViewPager) container).addView(viewLayout);
    /**
     * Setting the object for animation
     * */


    return viewLayout;
}

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

}

}

MainActivity.java

package com.example.gallery;





public class MainActivity extends Activity {

private FullScreenImageAdapter adapter;
private MyViewPager viewPager;
private String[] mStrings = {
        "http://3rdbillion.net/wp-content/uploads/2013/12/9039b649b7cd0ee7f418e55416a8ea204.jpg",
            "http://images.tentebranda.org/wp-content/uploads/animal-images_5514_1.jpg",
            "http://3rdbillion.net/wp-content/uploads/2013/12/f6aa5d04531f8ff9416ace6e273405304.jpg",
            "http://3rdbillion.net/wp-content/uploads/2013/12/fcbc6aaa7ccd1ebaea80f36bfad3c8f74.jpg"};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_fullscreen_view);

    viewPager = (MyViewPager) findViewById(R.id.pager);



    adapter = new FullScreenImageAdapter(MainActivitys.this, mStrings);


    viewPager.setAdapter(adapter);
    viewPager.setPageMargin(30);
    // displaying selected image first
    viewPager.setCurrentItem(position);
}
}

Images are Displayed Using Lazy Loaded From Web In This Example I am Using LAzyLoad library

Please Download And Add This To Your Project

And finally the Xml files

layout_fullscreen_image.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/rel" >

<!-- <YourPackagename where TouchImageView.java is Placed.TouchImageView
    android:id="@+id/imgDisplay"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scaleType="fitCenter" />Example is given below My TouchImageView.java is placed in the com.example.gallery package
-->

  <com.example.gallery.TouchImageView
    android:id="@+id/imgDisplay"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scaleType="fitCenter" />

<Button
    android:id="@+id/btnClose"
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginRight="15dp"
    android:layout_marginTop="15dp"
    android:paddingTop="2dp"
    android:paddingBottom="2dp"
    android:background="@drawable/ic_launcher"
    android:textColor="#ffffff"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:text="Close" />

activity_fullscreen_view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#33BBFFFF" >
<!--<YourPackagename where MyViewPager.java is Placed.MyViewPager
    android:id="@+id/pager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />Example is given below My MyViewPager.java is placed in the com.example.gallery package-->

<com.example.gallery.MyViewPager
    android:id="@+id/pager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

</LinearLayout>

Also Add Internet Permission and Write Storage Permission in the manifest File Then You are Done

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

For Show Images From Sd Card Only replace the lazyload portion and Add necessory Files for Showning images from Sd card And Set the Adpator

-----------------Update-----

new link for TouchImageview is here

score 2 · Answer 2 · answered Jul 05 '12 at 11:31

after long R&D on this I came to conclusion you can operate events directly over the parent layout inside which your viewpager is existing it could be for an example Linearlayout etc. Check this link :

http://myandroidnote.blogspot.in/2011/03/pinch-zoom-to-view-completely.html

It does not work for all features like pan, drag but via buttons you can operate events like zoomin, zoom out, normal etc. I have searched a lot for this type of question but no one has addressed it properly anywhere. Thanks to this buddy :)

lobzik · Answer 3 · 2016-04-15T18:37:35.893

2

Because all answers in this thread are rather old I will post results of my investigation here. I have finally found the Subsampling Scale Image View library and it works with standard ViewPager from Android Support Package without any customisations. It is worth trying.

edited Apr 15 '16 at 18:37

answered Apr 15 '16 at 18:20

lobzik

10,974
1
27
32

Excessive promotion of a specific product/resource may be perceived by the community as **spam**. Take a look at the [help], specially [What kind of behavior is expected of users?](http://stackoverflow.com/help/behavior)'s last section: _Avoid overt self-promotion_. You might also be interested in [How do I advertise on Stack Overflow?](http://stackoverflow.com/help/advertising). You already mentioned this product [here](http://stackoverflow.com/a/36654256/1743880) and [here](http://stackoverflow.com/a/36654230/1743880) – Tunaki Apr 15 '16 at 18:28
@Tunaki the library I have mentioned is NOT my library. I don't have any relation to it's authors or something like that. I don't have even contributed to this library. And I have no interest to promote it, except helping other people to find it and solve their issue. Because I have spent several hours on trying the libraries mentioned above. And espeсially because the accepted answers says that the best library for zooming images is TouchImageView, but it is not actual information in my opinion. – lobzik Apr 15 '16 at 18:35
Fair enough, but you should try to improve your answer by including an example of its usage. Also, you have posted 2 others answers like this one: if the questions are duplicate, you should vote to close as such. – Tunaki Apr 15 '16 at 18:38

score 0 · Answer 4 · edited May 23 '17 at 12:22

0

For Images you might want to have a look at this => android imageView: setting drag and pinch zoom parameters

Never experienced with video on android so i wont be helping you in that matter but you should be more explicit about what you intend to do, maybe give some code or explain how your app is built ?

edited May 23 '17 at 12:22

Community

1
1

answered Jul 03 '12 at 07:40

Furzel

606
8
18

1

In my viewpager I have videoview and imageview inside it, now what I want is when I perform zoom it should be zoom both the views. Please tell me about the implementation of this. Everywhere I have seen on the forums I found people have worked on the zooming pan drag on single view like imageview but not on viewpager directly, In my case I have to directly deal with viewpager so that all the views inside it can be handled with functionality like zoom, pan, drag irrespective of number of views inside it. Help is appreciated. Thanks. – Devavrata Jul 03 '12 at 14:49

How to implement zoom, pan and drag on Viewpager in android?

4 Answers4

Linked

Related