How to put photoview or Imageview inside viewpager android

Question

I am a newbie in android development. I am trying to create an image gallery . While implementing viewpager , I put imageview outside viewpager but because of that I am not able to make zoom and pinch and viewpager work at same time. How can I put imageview inside viewpager ?

FullImageActivity.java :

public class FullImageActivity extends AppCompatActivity {
    ImageView images;
    int position;
    int folderPosition;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_full_image);
        Intent i = getIntent();
        PhotoView photoView = (PhotoView) findViewById(R.id.photo_view);
        photoView.setVisibility(View.GONE);

        // Selected image id
        position = i.getExtras().getInt("id");
        folderPosition = i.getExtras().getInt("folderPosition");
        Bundle extras = getIntent().getExtras();
        String value = extras.getString("abc");

        Glide.with(FullImageActivity.this)
                .load(value)
                .skipMemoryCache(false)
                .into(photoView);

        ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mViewPager.setAdapter(new TouchImageAdapter(this,al_images, folderPosition));
        mViewPager.setCurrentItem(position);
    }
}

activity_full_image.xml:

<?xml version="1.0" encoding="utf-8"?>

     <LinearLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/jazzy_pager"
         android:layout_width="match_parent"
         android:layout_height="match_parent">

    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/photo_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:scaleType="centerCrop"/>


     <android.support.v4.view.ViewPager
         android:id="@+id/viewpager"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

</LinearLayout>

TouchImageAdapter.java

class TouchImageAdapter extends PagerAdapter {
    Context context;
    String filename;
    ArrayList<Model_images> al_menu = new ArrayList<>();
    int position,int_position;

    public TouchImageAdapter(Context context,ArrayList<Model_images> al_menu, int position){
        this.al_menu = al_menu;
        this.context = context;
        this.int_position = position;
    }

    @Override
    public int getCount() {
        return al_menu.get(int_position).getAl_imagepath().size();
    }

    @Override
    public View instantiateItem(ViewGroup container, int position) {

        ImageView img = new ImageView(container.getContext());
        ViewGroup.LayoutParams lp= new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        img.setLayoutParams(lp);
        img.setImageDrawable(getImageFromSdCard(filename,position));
        container.addView(img, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        return img;
    }

    public int getItemPosition(Object object) {
        return POSITION_NONE;
    }

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

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


    public Drawable getImageFromSdCard(String imageName,int position) {
        Drawable d = null;
        try {
            String path = al_menu.get(int_position).getAl_imagepath().get(position)
                    + "/";
            Bitmap bitmap = BitmapFactory.decodeFile(path);
            d = new BitmapDrawable(context.getResources(),bitmap);
        } catch (IllegalArgumentException e) {
            // TODO: handle exception
        }

        return d;


    }
}

Answer 1

Use this custom TouchImageView instead of imageview

public class TouchImageView extends ImageView {


private void stopInterceptEvent()
{
    getParent().requestDisallowInterceptTouchEvent(true);
}

private void startInterceptEvent()
{
    getParent().requestDisallowInterceptTouchEvent(false);
}

private void sharedConstructing(Context context) {
    super.setClickable(true);
    this.context = context;
    mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
    matrix.setTranslate(1f, 1f);
    m = new float[9];
    setImageMatrix(matrix);
    setScaleType(ScaleType.MATRIX);

    setOnTouchListener(new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        mScaleDetector.onTouchEvent(event);

        matrix.getValues(m);
        float x = m[Matrix.MTRANS_X];
        float y = m[Matrix.MTRANS_Y];
        PointF curr = new PointF(event.getX(), event.getY());

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                last.set(event.getX(), event.getY());
                start.set(last);
                mode = DRAG;
                stopInterceptEvent();
                break;
            case MotionEvent.ACTION_MOVE:
                if (mode == DRAG) {
                    float deltaX = curr.x - last.x;
                    float deltaY = curr.y - last.y;
                    float scaleWidth = Math.round(origWidth * saveScale);
                    float scaleHeight = Math.round(origHeight * saveScale);
                    if (scaleWidth < width) {
                        deltaX = 0;
                        if (y + deltaY > 0)
                            deltaY = -y;
                        else if (y + deltaY < -bottom)
                            deltaY = -(y + bottom); 
                    } else if (scaleHeight < height) {
                        deltaY = 0;
                        if (x + deltaX > 0)
                            deltaX = -x;
                        else if (x + deltaX < -right)
                            deltaX = -(x + right);
                    } else {
                        if (x + deltaX > 0)
                            deltaX = -x;
                        else if (x + deltaX < -right)
                            deltaX = -(x + right);

                        if (y + deltaY > 0)
                            deltaY = -y;
                        else if (y + deltaY < -bottom)
                            deltaY = -(y + bottom);
                    }

                    if(deltaX == 0)
                        startInterceptEvent();
                    else
                        stopInterceptEvent();

                    matrix.postTranslate(deltaX, deltaY);
                    last.set(curr.x, curr.y);
                }
                break;

            case MotionEvent.ACTION_UP:
                mode = NONE;
                int xDiff = (int) Math.abs(curr.x - start.x);
                int yDiff = (int) Math.abs(curr.y - start.y);
                if (xDiff < CLICK && yDiff < CLICK)
                    performClick();
                startInterceptEvent();
                break;

            case MotionEvent.ACTION_POINTER_UP:
                mode = NONE;
                break;
        }
        setImageMatrix(matrix);
        invalidate();
        return true; // indicate event was handled
    }

});
}
}

Also change your activity_full_xml like this

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


      <TouchImageView
         android:id="@+id/photo_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_gravity="center"
         android:scaleType="centerCrop"/>

    </android.support.v4.view.ViewPager>