Enable and Disable Zoom in ImageView

Question

I'm using https://github.com/chrisbanes/PhotoView to enable pinch to zoom feature on my custom imageview, however, I'm having a problem with implementing the feature on a toggle button. I wanted to make the image zoom-able when the user clicked the toggle button On. After zooming, when the user clicked the zoom button off, the image should still on its zoomed position but will not be zoomable (because I have another onTouchListener where the user may click and detect colors of the image). Problem is, when the toggle button changes state (on to off), the zoom will reset. Please help me and I'm sorry for my terrible explanation. Thank you.

Below is part of my code:

     case  R.id.btnZoom:
                PhotoViewAttacher photoView= new PhotoViewAttacher(ivImageEditor);
                photoView.update();
                if(btnZoom.isChecked()){
                  //photoView.setZoomable(true);
                }else if (!btnZoom.isChecked()){
                    photoView.setZoomable(false);

                }
                break;

Updated: Below is my activity on which I put the onTouch event for the ImageView to get the pixel colors. (whereas the PhotoView library also override onTouch to enable image zooming). I tried to implement the method from this issue: Android PhotoView Keep Zoom After Orientation Change to keep the scale size/ the zoom size on different state of toggle button but I fail to understand what mScreenBase is. I hope you're able to understand what my problem is. Thanks.

ImageEditorActivity.java:

package com.example.satellite.coloridentifier;

public class ImageEditorActivity extends AppCompatActivity implements View.OnClickListener, TextToSpeech.OnInitListener {

    public ImageView ivImageEditor, ivColorPicked;
    public TextView tvColorName, tvHexCode, tvRGB;
    public ToggleButton btnZoom;
    public Bitmap myBitmap;

    private float ZoomLevel;
    private Matrix theMatrix;
//    private RectF rectF;

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

        btnZoom = (ToggleButton) findViewById(R.id.btnZoom);
        btnZoom.setOnClickListener(this);

        ivImageEditor = (ImageView) findViewById(R.id.ivImageEditor);
        ivColorPicked = (ImageView) findViewById(R.id.ivColorPicked);
        tvColorName = (TextView) findViewById(R.id.tvColorName);
        tvHexCode = (TextView) findViewById(R.id.tvHexCode);
        tvRGB = (TextView) findViewById(R.id.tvRGB);

        //  get image or get photo if exist
        try {
            String imagePath = getIntent().getExtras().getString("imagepath");
            String photo = getIntent().getExtras().getString("photoUri");

            if (imagePath != null) {
                myBitmap = BitmapFactory.decodeFile(imagePath);
                ivImageEditor.setImageBitmap(myBitmap);
            } else if (photo != null) {
                Uri photoUri = Uri.parse(photo);
                myBitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), photoUri);
                ivImageEditor.setImageBitmap(myBitmap);
            }
        } catch (Exception e) {
            e.printStackTrace();
            Toast.makeText(this, "No image or photo", Toast.LENGTH_SHORT).show();
        }

    //get pixel colors from image on touched parts
        ivImageEditor.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {

                if (!(ivImageEditor.getDrawable() == null)) {
                    int touchX = (int) motionEvent.getX();
                    int touchY = (int) motionEvent.getY();

                    ivImageEditor.buildDrawingCache();
                    Bitmap bitmap = ivImageEditor.getDrawingCache();

                    if (touchX > 0 && touchY > 0 && touchX < bitmap.getWidth() && touchY < bitmap.getHeight()) {
                        int pixel = bitmap.getPixel(touchX, touchY);

                        int red = Color.red(pixel);
                        int myRed = (int) Math.round(red * 100.0 / 255);

                        int green = Color.green(pixel);
                        int myGreen = (int) Math.round(green * 100.0 / 255);

                        int blue = Color.blue(pixel);
                        int myBlue = (int) Math.round(blue * 100.0 / 255);

                        updateColorRGB(red, green, blue);
                        updateColorPercentage(myRed, myGreen, myBlue);
                    }
                }
                return true;
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btnZoom:
                final PhotoViewAttacher photoView = new PhotoViewAttacher(ivImageEditor);
                if (btnZoom.isChecked()) {
                    photoView.setOnMatrixChangeListener(new PhotoViewAttacher.OnMatrixChangedListener() {
                        @Override
                        public void onMatrixChanged(RectF rectF) {
                            theMatrix = photoView.getDisplayMatrix();
                            float[] theFloat = new float[9];
                            theMatrix.getValues( theFloat );
                            RectF theRect = photoView.getDisplayRect();

                            if (theRect != null)
                            {
                                if( theRect.left > ( ivImageEditor.getWidth() / 2 ) || ( theRect.left >= 0 ) )
                                {
                                    theRect.left = 0;
                                }
                                else
                                {
                                    theRect.left = ( theRect.left - ( ivImageEditor.getWidth() / 2 ) ) / mScreenBase;
                                }

                                if( theRect.top > ( ivImageEditor.getHeight() / 2 ) || ( theRect.top >= 0 ) )
                                {
                                    theRect.top = 0;
                                }
                                else
                                {
                                    theRect.top = ( theRect.top - ( ivImageEditor.getHeight() / 2 ) ) / mScreenBase;

                                }
                                ZoomLevel = photoView.getScale();
                            }
                        }
                    });

                } else if (!btnZoom.isChecked()) {
                    photoView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                    photoView.setDisplayMatrix(theMatrix);
                    photoView.setScale(ZoomLevel);
//                    Toast.makeText(this, "level"+ZoomLevel, Toast.LENGTH_SHORT).show();


                    ivImageEditor.setOnTouchListener(new View.OnTouchListener() {
                        @Override
                        public boolean onTouch(View view, MotionEvent motionEvent) {

                            if (!(ivImageEditor.getDrawable() == null)) {
                                int touchX = (int) motionEvent.getX();
                                int touchY = (int) motionEvent.getY();

                                ivImageEditor.buildDrawingCache();
                                Bitmap bitmap = ivImageEditor.getDrawingCache();

                                if (touchX > 0 && touchY > 0 && touchX < bitmap.getWidth() && touchY < bitmap.getHeight()) {
                                    int pixel = bitmap.getPixel(touchX, touchY);

                                    int red = Color.red(pixel);
                                    int myRed = (int) Math.round(red * 100.0 / 255);

                                    int green = Color.green(pixel);
                                    int myGreen = (int) Math.round(green * 100.0 / 255);

                                    int blue = Color.blue(pixel);
                                    int myBlue = (int) Math.round(blue * 100.0 / 255);

                                    updateColorRGB(red, green, blue);
                                    updateColorPercentage(myRed, myGreen, myBlue);
                                }
                            }
                            return true;
                        }
                    });
                }
                break;
            default:
                break;
        }
    }

    public void updateColorPercentage(int redColor, int greenColor, int blueColor) {
        DbHelper myDbHelper = new DbHelper(ImageEditorActivity.this);

        String colorName = myDbHelper.getColorName(redColor, greenColor, blueColor);
        tvColorName.setText(colorName);

        tvRGB.setText("(" + String.valueOf(redColor) + "%, " + String.valueOf(greenColor) + "%, " + String.valueOf(blueColor) + "% )");
    }

    public void updateColorRGB(int red, int green, int blue) {
        String colorHex = String.format("#%02X%02X%02X", red, green, blue);
        tvHexCode.setText(colorHex);
        ivColorPicked.setBackgroundColor(Color.parseColor(colorHex));
    }

}

Answer 1

getSuppMatrix(); allows you to save your PhotoView current state. Then disable or enable zoom and reload your PhotoView with the previous state.

Try this to disable zoom on your PhotoView :

Matrix theMatrix = new Matrix();
mPhotoView.getSuppMatrix(theMatrix);
mPhotoView.setZoomable(false);
mPhotoView.setDisplayMatrix(theMatrix);

And this to re enable zoom :

Matrix theMatrix = new Matrix();
mPhotoView.getSuppMatrix(theMatrix);
mPhotoView.setZoomable(true);
mPhotoView.setDisplayMatrix(theMatrix);

Answer 2

Here is the code for update() and setZoomable function from the library. As you can see they reset the drawable matrix every time the update() is called and zoomable is false. So there is no inbuilt way you can persist the state of the image by using this library.

public void setZoomable(boolean zoomable) {
    mZoomEnabled = zoomable;
    update();
}

public void update() {
    if (mZoomEnabled) {
        // Update the base matrix using the current drawable
        updateBaseMatrix(mImageView.getDrawable());
    } else {
        // Reset the Matrix...
        resetMatrix();
    }
}

Here is the similar issue on GitHub Repo : Issue 168. The solution would be to store the focus point and the scale of the zoomed Image and after setting this : photoView.setZoomable(false);, reassign the focus point and the zoomed scale. This might help you implementing the solution : Android PhotoView Keep Zoom After Orientation Change.

Hope it helps!