Android PhotoView Keep Zoom After Orientation Change

I am utilizing the PhotoView class by Chris Banes to be able to zoom into an image and see it, but I want to make it so that when I change the orientation, the photo will still be zoomed in after the change.

I understand the basics of how to do this, that when an orientation change is detected, onSaveInstanceState will be called, so I'm trying to save the instance in there, and then put it back into the PhotoView when onCreate is called.

public class MainActivity extends ActionBarActivity
{
PhotoView mPhotoView;

@Override
protected void onCreate( Bundle aSavedInstanceState )
{
    super.onCreate( aSavedInstanceState );

    mPhotoView = new PhotoView(this);
    mPhotoView.setMaximumScale( 12 );
    setContentView( mPhotoView );
    mPhotoView.setImageResource( R.drawable.vm_app_icon);

    if (aSavedInstanceState != null)
    {
        RectF theRect = aSavedInstanceState.getParcelable( "Rect" );
        if ( theRect != null)
        {
            Matrix theMatrix = new Matrix();
            theMatrix.setScale( theRect.bottom, theRect.left, theRect.right, theRect.top );
            mPhotoView.setDisplayMatrix( theMatrix );

        }
    }
}

@Override
protected void onSaveInstanceState( final Bundle outState )
{
    super.onSaveInstanceState( outState );
    RectF theRect = mPhotoView.getDisplayRect();
    if (theRect != null)
    {
        outState.putParcelable( "Rect", theRect );
    }
}
}

But this doesn't work. What should I be storing in the bundle to be able to apply back to the PhotoView to keep the zoom level?

Alright after like 10 hours of trying I've figured it out.

To save the zoom level I needed to save two things in the Bundle, the Scale (Zoom level), and the DisplayRect (of type RectF).

Zoom Level - Number between the MinScale and MaxScale, in my instance between 1 and 16

The RectF holds four values, which for some reason are the coordinates of the Top-Left corner of the current view with respect to the current screen orientation. Even though it holds the top-left coordinates I don't want to rotate around that, I want to rotate around the center, so I need to find the center of the rect and then divide that value by the "ScreenBase" which is a value that will standardize the values and will make it able to be translated into a difference plane. Here's how I saved it:

@Override
    protected void onSaveInstanceState( final Bundle outState )
    {
        super.onSaveInstanceState( outState );

        Matrix theMatrix = mPhotoView.getDisplayMatrix();
        float[] theFloat = new float[9];
        theMatrix.getValues( theFloat );
        RectF theRect = mPhotoView.getDisplayRect();


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

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

            }
            outState.putParcelable( "RectF", theRect );

            outState.putFloat( "ZoomLevel", mPhotoView.getScale() );
        }
    }

Then when we pick it up on the other side, we have to do a lot of manipulation to the numbers to get the top left corner of the new screen space centered around the same place (and manipulate it if an boundary problem occurs), here's how I did it:

@Override
    protected void onCreate( final Bundle aSavedInstanceState )
    {
        super.onCreate( aSavedInstanceState );

        mPhotoView = new PhotoView( this );
        mPhotoView.setMaximumScale( 16 );
        setContentView( mPhotoView );
        mPhotoView.setImageResource( R.drawable.vm_app_icon );

        mPhotoView.getViewTreeObserver().addOnPreDrawListener( new ViewTreeObserver.OnPreDrawListener()
        {
            public boolean onPreDraw()
            {
                mPhotoView.getViewTreeObserver().removeOnPreDrawListener( this );
                mViewHeight = mPhotoView.getMeasuredHeight();
                mViewWidth = mPhotoView.getMeasuredWidth();
                Matrix theMatrix = mPhotoView.getDisplayMatrix();
                theMatrix.getValues( mBaseMatrixValues );
                mScreenBase = mBaseMatrixValues[ 0 ];
                int theWidth = mPhotoView.getWidth();
                Log.e(TAG, theWidth + "");

                if( aSavedInstanceState != null )
                {
                    float[] theFloats = new float[ 9 ];
                    float theZoom = aSavedInstanceState.getFloat( "ZoomLevel" );
                    RectF theRect = aSavedInstanceState.getParcelable( "RectF" );
                    theFloats[ 0 ] = theZoom;
                    theFloats[ 4 ] = theZoom;
                    theFloats[ 2 ] = ( theRect.left * mScreenBase ) - ( theZoom * mBaseMatrixValues[ 2 ] ) + ( mViewWidth / 2 ); //Left
                    theFloats[ 5 ] = ( theRect.top * mScreenBase ) - ( theZoom * mBaseMatrixValues[ 5 ] ) + ( mViewHeight / 2 ); //Top
                    theFloats[ 8 ] = (float) 1.0;

                    theFloats = CheckBoundaries( theZoom, theFloats, theRect );

                    theMatrix.setValues( theFloats );
                    mPhotoView.setDisplayMatrix( theMatrix ); //Sets the mSuppMatrix in the PhotoViewAttacher

                    Matrix theImageViewMatrix = mPhotoView.getDisplayMatrix(); //Gets the new mDrawMatrix
                    mPhotoView.setImageMatrix( theImageViewMatrix ); //And applies it to the PhotoView (catches out of boundaries problems)
                }
                return true;
            }
        } );
    }

        private float[] CheckBoundaries(final float aZoom, float[] aFloats, final RectF aRect )
        {
            if( aZoom == 1.0 ) //If the zoom is all the way out
            {
                aFloats[ 2 ] = 0;
                aFloats[ 5 ] = 0;
                return aFloats;
            }

            theMaxLeftValue = ( ( mViewHeight * aZoom ) - mViewWidth + ( aZoom * mBaseMatrixValues[ 2 ] ) );
            theMaxTopValue = ( ( mViewWidth * aZoom ) - mViewHeight + ( aZoom * mBaseMatrixValues[ 5 ] ) );
            if( Math.abs( aFloats[ 2 ] ) > ( theMaxLeftValue ) )
            {
                aFloats[ 2 ] = -Math.abs( theMaxLeftValue ) + 10;
            }
            else if( Math.abs( aFloats[ 2 ] ) < ( aZoom * mBaseMatrixValues[ 2 ] ) )
            {
                aFloats[ 2 ] = -( aZoom * mBaseMatrixValues[ 2 ] );
            }

            if( Math.abs( aFloats[ 5 ] ) > ( theMaxTopValue ) )
            {
                aFloats[ 5 ] = -Math.abs( theMaxTopValue ) + 10;
            }
            else if( Math.abs( aFloats[ 5 ] ) < ( aZoom * mBaseMatrixValues[ 5 ] ) )
            {
                aFloats[ 5 ] = -( aZoom * mBaseMatrixValues[ 5 ] );
            }

            if( aFloats[ 2 ] > 0 )
                aFloats[ 2 ] = -( mViewWidth / 2 );
            else if( aFloats[ 5 ] > 0 )
                aFloats[ 5 ] = -( mViewHeight / 2 );

            return aFloats;
        }

Recommended topics

Hot tags