ImageView resizing while scaling

Question

I use chrisbanes PhotoView to implement zoom. Zoom increases the zoom and double-click, but I don’t see that my image is stretched to full screen when zooming. When scaling, it looks like the image is scaled inside the box and part of the image disappears when scaling ... How can I implement image scaling so that the image height increases with scaling? I am using NetworkImageView (from the Volley library).

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

NetworkImageView.java (from 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 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 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 scaling Image after scaling

Answer 1

Better try a different approach if you are stuck

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

Just include this package in your application, and then you can use the 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 scaling as well as double taps.

The answer to the loan Yoann :)

Answer 2

I highly recommend taking a look at Photo View:

https://github.com/chrisbanes/PhotoView

It was developed by Chris Banes, who is one of the real developers who worked on the Android development team, so you won’t be mistaken here. This library will save you a ton of headaches.

Use is as simple as:

 ImageView mImageView; PhotoViewAttacher mAttacher; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Any implementation of ImageView can be used! mImageView = (ImageView) findViewById(R.id.iv_photo); // Set the Drawable displayed Drawable bitmap = getResources().getDrawable(R.drawable.wallpaper); mImageView.setImageDrawable(bitmap); // Attach a PhotoViewAttacher, which takes care of all of the zooming functionality. mAttacher = new PhotoViewAttacher(mImageView); } 

Answer 3

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

Elements of the problem:

1. Getting touch events and using its variables to set the zoom level of the image and window. (left, top, right, bottom).

Code example: only part of the image is shown. therefore setting android:scaleType="fitCenter" will scale.

 <?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 change this to add a 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. Because scaling is required. I assume we use high quality images.

Therefore, when downloading full-sized image quality while zooming out, this will not be useful, since the user will not recognize small details. But this will increase memory usage and may crash for very large images.

Trick Solution: When zoomed in, a larger window is displayed with lower quality When zooming in on a smaller image with higher quality.

The proposed solution checks the current zoom level and the required image window and, on the basis of this, receives only part of the image with a certain quality using BitmapRegionDecoder and BitmapFactory .

Code example:

Initialize the image decoder, which will be used later to request 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(); } 

Request 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 .

Answer 4

If you want to resize the ImageView, you need to resize its layoutParams, as I demonstrated here . You can also change its scale as a cell.

However, if you just want to move the rectangle inside the image, which also scales well (for example, other applications that allow you to crop), you can use a library, for example cropper ", or if you do not need functions there, you can use a library, for example TouchImageView

Answer 5

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

Answer 6

The problem is that when using NetworkImageView doesn't behave the same as ImageView, I solve it by creating an XML design for the portrait and landscape

PORTRAIT

layout / item_image.xml

height = "match_parent" and width = "wrap_content", important scaleType = "fitCenter"

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

Land

layout / plot /item_image.xml

now in the earth layout height = "wrap_content" and width = "match_parent", always scaleType = "fitCenter"

  <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"/> 

It is also important to instantiate the PhotoViewAttacher after assigning the resource to the NetworkImageView control.

  NetworkImageView imageView; PhotoViewAttacher mAttacher; imageView = (NetworkImageView) mImgPagerView.findViewById(R.id.imageitem); //firts set the image resources, i'm using Android Volley Request ImageLoader imageLoader = MySocialMediaSingleton.getInstance(context).getImageLoader(); imageView.setImageUrl(url, imageLoader); //next create instance of PhotoViewAttecher mAttacher = new PhotoViewAttacher(imageView); mAttacher.update(); 

Answer 7

I am using imageviewtouch and have the same problem. To solve this problem, you can wrap the imageview in a layout without 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>