Search code examples
androidimageviewandroid-imageviewpinchzoom

Pinch to zoom IN or OUT imageview added dynamically to Layout


I working on an application where in the ImageView is created dynamically and added to the layout, after the user selects image from the gallery of the device.

With the code what I have written, am able to move and rotate the ImageView. But, I also want to implement Pinch zoom in/out for the ImageView.

The bug which exists in the code is when after the ImageView is added to the layout, the ImageView when taken to the extreme right shrinks so that what I want to do, but that should happen on the pinch.

EDIT: After debugging my code I found that i want to increase the size of the ImageView by increasing the width and height. When i changed the following line : final RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams( RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); To:

final RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                                    240,
                                    200);

I got what i wanted. So can I do this inside the class DragImageView on pinch.

Here's the code for the custom Imageview.

public class DragImageView extends ImageView {

    private float mLastTouchX;
    private float mLastTouchY;

    private float mDeltaX;
    private float mDeltaY;
    private Bitmap bmpImg;
    Context mContext;

    public DragImageView(Context context, Bitmap bmpImg) {
        super(context);
        this.bmpImg = bmpImg;
        this.mContext = context;
        init();

    }

    public DragImageView(final Context context, final AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // TODO Auto-generated method stub

        Bitmap resized = Bitmap.createScaledBitmap(bmpImg, 180, 200, true);
        Bitmap conv_bm = getRoundedShape(resized); //function to get the imageview as     rounded shape
        setImageBitmap(conv_bm);

        setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(final View v, MotionEvent event) {
                PopupMenu popup = new PopupMenu(mContext, v);
                // Inflating the Popup using xml file
                popup.getMenuInflater().inflate(R.menu.popup_menu,
                        popup.getMenu());

                popup.setOnMenuItemClickListener(new OnMenuItemClickListener() {

                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        // TODO Auto-generated method stub
                        int itemId = item.getItemId();
                        if (itemId == R.id.delete_DragImgView) {
                            ViewGroup parentView = (ViewGroup) v.getParent();
                            parentView.removeView(v);
                        } else if (itemId == R.id.rotate_DraagImgView) {
                            final RotateAnimation rotateAnim = new RotateAnimation(
                                    0.0f, 90, RotateAnimation.RELATIVE_TO_SELF,
                                    0.5f, RotateAnimation.RELATIVE_TO_SELF,
                                    0.5f);
                            rotateAnim.setDuration(0);
                            rotateAnim.setFillAfter(true);
                            v.startAnimation(rotateAnim);
                        }
                        return false;
                    }
                });

                final int action = event.getAction();

                mLastTouchX = event.getRawX();
                mLastTouchY = event.getRawY();

                switch (action) {
                case MotionEvent.ACTION_DOWN: {
                    RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) getLayoutParams();
                    mDeltaX = mLastTouchX - lParams.leftMargin;
                    mDeltaY = mLastTouchY - lParams.topMargin;
                    popup.show();
                    break;
                }
                case MotionEvent.ACTION_MOVE: {
                    mLastTouchX = event.getRawX();
                    mLastTouchY = event.getRawY();

                    final RelativeLayout.LayoutParams params = (LayoutParams) getLayoutParams();
                    params.leftMargin = (int) (mLastTouchX - mDeltaX);
                    params.topMargin = (int) (mLastTouchY - mDeltaY);
                    setLayoutParams(params);

                    break;
                }
                }
                invalidate();

                return true;
            }
        });
    }

The imageview is added as follows from the activity.

final DragImageView dynamicImgView = new DragImageView(
                            getApplicationContext(), yourSelectedImage);



                    final RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                            RelativeLayout.LayoutParams.WRAP_CONTENT,
                            RelativeLayout.LayoutParams.WRAP_CONTENT);
                    dynamicImgView.setLayoutParams(params);
                    relativeLayout.addView(dynamicImgView);

I know the pinch to zoom is possible but after trying lots of codes and Help from stackover flow, thought of finally putting it on so. Please help me. Thanks in advance.


Solution

  • Solved my problem.. I simply increased the height & width of the imageview. Code

    } else if (itemId == R.id.zoom_in) {
                                if (height > 100) {
                                    height = height - ZoomCounter;
                                    width = width - ZoomCounter;
                                    final RelativeLayout.LayoutParams params = (LayoutParams) getLayoutParams();
                                    getLayoutParams().height = height;
                                    getLayoutParams().width = width;
                                    setLayoutParams(params);
                                    invalidate();
                                }
    
                            } else if (itemId == R.id.zoom_out) {
                                if (height < 600) {
                                    height = height + ZoomCounter;
                                    width = width + ZoomCounter;
                                    final RelativeLayout.LayoutParams params = (LayoutParams) getLayoutParams();
                                    getLayoutParams().height = height;
                                    getLayoutParams().width = width;
                                    setLayoutParams(params);
    
                                    invalidate();
                                }
                            }