Change the size of ImageView on zooming

Question

I am using chrisbanes PhotoView to implement pinch zoom..Image zooms on pinching and double tapping but i can't see that my image streched to full screen on zooming..on zooming it looks that image zooms inside a box and part of image disappears on zooming...How can i implement image zoom so that height of Image increases on zooming?I am using NetworkImageView ( of Volley library).

NetworkImageView imageView;
 PhotoViewAttacher mAttacher;

                imageView = (NetworkImageView) mImgPagerView.findViewById(R.id.imageitem);

                mAttacher = new PhotoViewAttacher(imageView);

NetworkImageView.java ( of Volley library)

     import android.content.Context;
        import android.graphics.Bitmap;
        import android.text.TextUtils;
        import android.util.AttributeSet;
        import android.widget.ImageView;
        import com.android.volley.toolbox.ImageLoader.ImageContainer;

public class NetwrokImageView extends ImageView {
    /** The URL of the network image to load */
    private String mUrl;
    /**
     * Resource ID of the image to be used as a placeholder until the network image is loaded.
     */
    private int mDefaultImageId;
    /**
     * Resource ID of the image to be used if the network response fails.
     */
    private int mErrorImageId;
    /** Local copy of the ImageLoader. */
    private ImageLoader mImageLoader;
    public NetworkImageView(Context context) {
        this(context, null);
    }
    public NetworkImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public NetworkImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
    /**
     * Sets URL of the image that should be loaded into this view. Note that calling this will
     * immediately either set the cached image (if available) or the default image specified by
     * {@link NetworkImageView#setDefaultImageResId(int)} on the view.
     *
     * NOTE: If applicable, {@link NetworkImageView#setDefaultImageResId(int)} and
     * {@link NetworkImageView#setErrorImageResId(int)} should be called prior to calling
     * this function.
     *
     * @param url The URL that should be loaded into this ImageView.
     * @param imageLoader ImageLoader that will be used to make the request.
     */
    public void setImageUrl(String url, ImageLoader imageLoader) {
        mUrl = url;
        mImageLoader = imageLoader;
// The URL has potentially changed. See if we need to load it.
        loadImageIfNecessary();
    }
    /**
     * Sets the default image resource ID to be used for this view until the attempt to load it
     * completes.
     */
    public void setDefaultImageResId(int defaultImage) {
        mDefaultImageId = defaultImage;
    }
    /**
     * Sets the error image resource ID to be used for this view in the event that the image
     * requested fails to load.
     */
    public void setErrorImageResId(int errorImage) {
        mErrorImageId = errorImage;
    }
    /**
     * Loads the image for the view if it isn't already loaded.
     */
    private void loadImageIfNecessary() {
        int width = getWidth();
        int height = getHeight();
// if the view's bounds aren't known yet, hold off on loading the image.
        if (width == 0 && height == 0) {
            return;
        }
// if the URL to be loaded in this view is empty, cancel any old requests and clear the
// currently loaded image.
        if (TextUtils.isEmpty(mUrl)) {
            ImageContainer oldContainer = (ImageContainer) getTag();
            if (oldContainer != null) {
                oldContainer.cancelRequest();
                setImageBitmap(null);
            }
            return;
        }
        ImageContainer oldContainer = (ImageContainer) getTag();
// if there was an old request in this view, check if it needs to be canceled.
        if (oldContainer != null && oldContainer.getRequestUrl() != null) {
            if (oldContainer.getRequestUrl().equals(mUrl)) {
// if the request is from the same URL, return.
                return;
            } else {
// if there is a pre-existing request, cancel it if it's fetching a different URL.
                oldContainer.cancelRequest();
                setImageBitmap(null);
            }
        }
// The pre-existing content of this view didn't match the current URL. Load the new image
// from the network.
        ImageContainer newContainer = mImageLoader.get(mUrl,
                ImageLoader.getImageListener(this, mDefaultImageId, mErrorImageId));
// update the tag to be the new bitmap container.
        setTag(newContainer);
// look at the contents of the new container. if there is a bitmap, load it.
        final Bitmap bitmap = newContainer.getBitmap();
        if (bitmap != null) {
            setImageBitmap(bitmap);
        }
    }
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        loadImageIfNecessary();
    }
    @Override
    protected void onDetachedFromWindow() {
        ImageContainer oldContainer = (ImageContainer) getTag();
        if (oldContainer != null) {
// If the view was bound to an image request, cancel it and clear
// out the image from the view.
            oldContainer.cancelRequest();
            setImageBitmap(null);
// also clear out the tag so we can reload the image if necessary.
            setTag(null);
        }
        super.onDetachedFromWindow();
    }
    @Override
    protected void drawableStateChanged() {
        super.drawableStateChanged();
        invalidate();
    }
}

build.gradle

compile 'com.github.chrisbanes.photoview:library:+'

xml

<com.xyz.NetworkImageView
            android:id="@+id/imageitem"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="matrix"
            android:layout_gravity="center"
            android:adjustViewBounds="true"
            android:background="@drawable/image_loading" />

ImageView is inside FrameLayout

    <FrameLayout
        android:id="@+id/image_holder"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:background="@color/black"
        >

Image before zooming Image after zooming

Answer 1

Better try a different approach if youre stuck

You can find below a link to a class created by Jason Polites that will allow you to handle pinch zooms on custom ImageViews: https://github.com/jasonpolites/gesture-imageview.

Just include this package into your application and then you will be able to use a custom GestureImaveView in your XML files:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:gesture-image="http://schemas.polites.com/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<com.polites.android.GestureImageView
    android:id="@+id/image"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/image"
    gesture-image:min-scale="0.1"
    gesture-image:max-scale="10.0"
    gesture-image:strict="false"/>

This class handles pinch zooms, but also double taps.

Answer credit goes to Yoann :)

Answer 2

I use imageviewtouch and have same problem. To solve it you can wrap imageview inside layout without any other children. Example :

<LinearLayout
android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="200dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toplayout">

    <com.android.volley.toolbox.NetworkImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="fitCenter"
    android:background="@android:color/transparent"
    android:id="@+id/imageitem"/>
</LinearLayout>

Answer 3

If you wish to change the ImageView's size, you need to change its layoutParams, as I've demonstrated here. You can also change its scale as of Honeycomb.

However, if you wish to just move a rectangle within the image, which also zooms nicely (like other apps that allow to crop), you can use a library like "cropper" or if you don't need the features there you can use a library like TouchImageView

Answer 4

I had faced this issue in photo view image zoom library. i was changed the layout_height is "wrap_content" to "match_parent. It's working fine for me.

https://github.com/chrisbanes/PhotoView

<com.xyz.NetworkImageView
        android:id="@+id/imageitem"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="matrix"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:background="@drawable/image_loading" />

Answer 5

It is because the ImageView has a view height of "wrap_content". Change it to "match_parent" and set the scaleType of the image to be "centerInside" to fix your problem.

Answer 6

I created a fully functional project on github. link in the end of the answer.

Problem elements:

1. Getting touch events and use it's variables to set image zoom level and window. (left, top, right, bottom).

Sample Code: only part of image will be showing at a time. therefore setting android:scaleType="fitCenter" will achieve the zooming.

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

    <ImageView android:id="@+id/imageView"
        android:layout_width="0px"
        android:layout_height="0px"
        android:layout_gravity="center"
        android:scaleType="fitCenter"
        android:background="@android:color/transparent" />

</FrameLayout>

Touch Listener (you can modify this to add your click event)

OnTouchListener MyOnTouchListener = new OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent event) {
        float distx, disty;
        switch(event.getAction() & MotionEvent.ACTION_MASK){   
            case MotionEvent.ACTION_DOWN:
                //A pressed gesture has started, the motion contains the initial starting location.
                touchState = TOUCH;
                currentX = (int) event.getRawX();
                currentY = (int) event.getRawY();
            break;

            case MotionEvent.ACTION_POINTER_DOWN:
                //A non-primary pointer has gone down.
                touchState = PINCH;
                //Get the distance when the second pointer touch
                distx = event.getX(0) - event.getX(1);
                disty = event.getY(0) - event.getY(1);

                dist0 = (float) Math.sqrt(distx * distx + disty * disty);
                distLast = dist0;
            break;

            case MotionEvent.ACTION_MOVE:
                //A change has happened during a press gesture (between ACTION_DOWN and ACTION_UP).
                if(touchState == PINCH){
                    // pinch started calculate scale step.
                    //Get the current distance
                    distx = event.getX(0) - event.getX(1);
                    disty = event.getY(0) - event.getY(1);
                    distCurrent = (float) Math.sqrt(distx * distx + disty * disty);
                    if (Math.abs(distCurrent-distLast) >= 35) // check sensitivity
                    {
                        stepScale = distCurrent/dist0;
                        distLast = distCurrent;
                        drawMatrix(); // draw new image
                    }
                }
                else
                {
                    // move started.
                    if (currentX==-1 && currentY==-1) 
                    {
                        // first move after touch down
                        currentX = (int) event.getRawX();
                        currentY = (int) event.getRawY();
                    }
                    else
                    {
                        // calculate move window variable.
                        int x2 = (int) event.getRawX();
                        int y2 = (int) event.getRawY();
                        int dx = (currentX - x2);
                        int dy = (currentY - y2);
                        left += dx;
                        top += dy;
                        currentX = x2;
                        currentY = y2;
                        drawMatrix(); // draw new image window
                    }
                }
            break;

            case MotionEvent.ACTION_UP:
                //A pressed gesture has finished.

                touchState = IDLE;
            break;

            case MotionEvent.ACTION_POINTER_UP:
                //A non-primary pointer has gone up.
                if (touchState == PINCH)
                {
                    // pinch ended. reset variable.
                }
                touchState = TOUCH;
            break;
        }
        return true;
    }
};

2. Since zooming required. I assume that we are using high quality images.

Therefore, loading the full sized quality image when zoomed out won't benefit, since the user won't recognise the small details. But it will increase memory usage and could crash for very large images.

Solution Trick: On zooming out load larger window with lower quality. On zoom in load smaller window with higher quality.

The proposed solution checks the current zoom level and image window required and based on that gets only part of the image with specific quality using BitmapRegionDecoder and BitmapFactory.

Sample Code:

Initialise image decoder that is going to be used later to ask for a part of the image:

    InputStream is = null;
    bitmapRegionDecoder = null;

    try {
        is = getAssets().open(res_id); // get image stream from assets. only the stream, no mem usage
        bitmapRegionDecoder = BitmapRegionDecoder.newInstance(is, false);

    } catch (IOException e) {
        e.printStackTrace();
    }

    bounds = new BitmapFactory.Options();
    bounds.inJustDecodeBounds = true; // only specs needed. no image yet!
    BitmapFactory.decodeStream(is, null, bounds); // get image specs.

    try {
        is.close(); // close stream no longer needed.
    } catch (IOException e) {
        e.printStackTrace();
    }

Ask for image with quality and window:

    Rect pRect = new Rect(left, top, left + newWidth, top + newHeight);
    BitmapFactory.Options bounds = new BitmapFactory.Options();
    int inSampleSize = 1;
    if (tempScale <= 2.75) // you can map scale with quality better than this.
        inSampleSize = 2;

    bounds.inSampleSize = inSampleSize; // set image quality. takes binary steps only. 1, 2, 4, 8 . .
    bm = bitmapRegionDecoder.decodeRegion(pRect, bounds);
    imageView.setImageBitmap(bm);

project on github.