This code seems to somehow get over the issue "Bitmap too large to be uploaded into a texture". I tried this code with 12MP (4000+ pixels) bitmap and it just works! But once I use the same library in my own app, and "Bitmap too large..." error is back. Where is the trick? I've been googleing this for days.

It would be great if there were a provision for set zoom programmatically.
New feature request.

hi, i´ve been trying your code and it works perfectly when its on a normal layout, but when you put it inside a Gallery its not fling the image.

Hi, thanks for this neat solution.

Is it possible to let images be scaled to fit by default? I have some images that are (quite a bit) smaller than the screen, but I want them to scale up to the size of the display.

Thanks,

Sander

With the master branch version zooming the image was also increasing the imageview size so that it fills the entire screen. Now when i zoom, the image is scaling but the imageview stays the same size.

In below images notice the black space above and below the imageview which remains also when the image is zoomed.

Normal size image :

Zoomed image :

Activity layout xml can be found here - http://pastebin.com/jNNm1Zf3
The ViewPager adapter has the same implementation as in here - http://stackoverflow.com/questions/20943831/view-pager-imageview-pinch-zoom-rotation

Device is Galaxy S3. Android 4.1.2.

Inside a "android.support.v4.view.ViewPager" i instantiate several layouts like this one
´´´
< LinearLayout xmlns:android='http://schemas.android.com/apk/res/android'
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

< com.gilead.calculator.android.views.TouchImageView
    android:id="@+id/pag1"
    android:tag="article_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/pag1" />

Example:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#000000"
        android:gravity="center_horizontal">
    </ImageView>

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:layout_marginBottom="20dip"
        android:background="#AA000000"
        android:padding="12dip"
        android:textColor="#ffffffff" />

</FrameLayout>

Hi.
When testing the view on a HTC Desire everything goes well.
However, when testing on a HTC One X or a Asus Transformer Prime (tablet) the bottom part of the image is cropped.
Could it be a density issue?

My code is as simple as dialog_touch_image_view.setImageBitmap(bm);

i have done zoom in and zoom out part successfully its zooming images but i am failed to scroll the zoom image can someone please help me to resolve issue of "Scrolling"

Get where the user is touching in the image (x,y) with the image reference in any zoom?
Is it possible?

Hi,

Is it possible to change the image but keeps the zoom variable?
My programs need to refresh the image with the new image with same size (i only edit the previous image by using canvas) which i did by using setImageBitmap.
The problem is the image resize to it's original size.
is there any way to keep the image zoomed?

thank you

It is not an issue, just lack of knowledge, How can I do to load a jpg, set fitwidth and let the user to scroll vertical, pan and zoom? Is there some documentation, I couldn't find. Many thanks

Hi, pls help me, how i can get scroll position (x and y) after i scroll zoomed image?

Hello, thanks for this great piece of code, it is really doing fantastic. Now I would like (ad need) to add new functionality to it, to be able to get the pixel color, touched by the user, of the shown image. I have been trying to do this in several ways, but I always get wrong values for the pixel, or errors, etc... Could somebody help please?.

I modified the sharedConstructing() method like follows, and the rest of the code just remains the same:

private void sharedConstructing(Context context) {
    super.setClickable(true);
    this.context = context;
    mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
    matrix = new Matrix();
    m = new float[9];

    setImageMatrix(matrix);
    setScaleType(ScaleType.MATRIX);    

    setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            mScaleDetector.onTouchEvent(event);
            PointF curr = new PointF(event.getX(), event.getY());

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:    

                    //---- START MODIFIED CODE ----
                    Drawable imgDrawable = getDrawable();
                    Bitmap mutableBitmap = Bitmap.createBitmap(getWidth(),
                                                               getHeight(),
                                                               Bitmap.Config.ARGB_8888);
                    Canvas canvas = new Canvas(mutableBitmap);
                    imgDrawable.draw(canvas);

                    int pixel = mutableBitmap.getPixel((int)event.getX(), (int)event.getY());

                    Log.i("PIXEL COLOR", ""+pixel);

                    int alpha = Color.alpha(pixel);
                    int red = Color.red(pixel);
                    int blue = Color.blue(pixel);
                    int green = Color.green(pixel);
                    String color = String.format("#%02X%02X%02X%02X", alpha, red, green, blue);
                    Log.i("RGB", color);

                    float[] hsv = new float[3];
                    Color.RGBToHSV(red, green, blue, hsv);
                    Log.i("HSV_H", "Hue=" + hsv[0]);
                    Log.i("HSV_H", "Saturation=" + hsv[1]);
                    Log.i("HSV_H", "Value=" + hsv[2]);       
                    //---- END MODIFIED CODE ----

                    last.set(curr);
                    start.set(last);
                    mode = DRAG;

                    break;

                case MotionEvent.ACTION_MOVE:
                    if (mode == DRAG) {
                        float deltaX = curr.x - last.x;
                        float deltaY = curr.y - last.y;
                        float fixTransX = getFixDragTrans(deltaX, viewWidth, origWidth * saveScale);
                        float fixTransY = getFixDragTrans(deltaY, viewHeight, origHeight * saveScale);
                        matrix.postTranslate(fixTransX, fixTransY);
                        fixTrans();
                        last.set(curr.x, curr.y);
                    }
                    break;

                case MotionEvent.ACTION_UP:
                    mode = NONE;
                    int xDiff = (int) Math.abs(curr.x - start.x);
                    int yDiff = (int) Math.abs(curr.y - start.y);
                    if (xDiff < CLICK && yDiff < CLICK)
                        performClick();
                    break;

                case MotionEvent.ACTION_POINTER_UP:
                    mode = NONE;
                    break;
            }

            setImageMatrix(matrix);
            invalidate();
            return true; // indicate event was handled
        }

    });

after the zoom i will required to again original size of image (i.e reset again ) without using touch screen

There's no LICENSE file included. Please include one so everyone knows what limitations there are in using the code.

Thanks

Hi:
When I set image to TouchImageView, it's centered and it's scaled to fit the screen. I want this image be centered, but not scaled initially, I want the original size, and when de user do touch control, zoom in/out the image
How I can do this?

I would like to impose fitxy behaviour in the initial display of the image. The current settings scales it well the image's width but doesn't display well the height of the image. often you can see a black portion on the top and bottom of the imageview.

Thanks in advance.

In touchImageView, Line 198:
if (oldMeasuredHeight == viewWidth && oldMeasuredHeight == viewHeight
should be
if (oldMeasuredWidth == viewWidth && oldMeasuredHeight == viewHeight

Let me first start off by saying thank you for making this, it has been very helpful for me. In the app I'm designing I want to have the ability to draw where ever I zoom in. To do that I need to know where in the view I'm currently zoomed into. I was wondering what the best way to get the top left hand coordinates for the zoomed view in relation to the unzoomed view. So essentially when normalizedScale != 1 what are the top left cords of the view in relation to when normalizedScale = 1.

Thanks

When you pinch in portrait mode, the image correctly zooms in. In landscape mode however, it won't because you need to pinch horizontally. It should not matter what the orientation of the device is. Pinching and moving your fingers away from some point should zoom in regardless how you hold the device.

Please see the following link.
http://stackoverflow.com/q/13918488/1410561

Hi! Sorry for a dumb question, but, how can I get the resulted image offset in comparison to the original? In pixels. For instance, I dragged an image or zoomed it and the left corner of its visible part is not the same as it was. How can I get the coordinates of the resultied image left corner? Thanks a lot.

I have a problem with using your imageview and dialog

dialog layout:

<com.smartmore.retiwt.extend.TouchImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="@string/hello_world"
    android:id="@+id/image_dialog"
    android:adjustViewBounds="true"
    />

dialog class:

public class ImageDialog extends Dialog{

private String source;
private TouchImageView image;

public ImageDialog(Context context, final String source) {
    super(context);
    // TODO Auto-generated constructor stub
    this.source = source;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    requestWindowFeature(Window.FEATURE_NO_TITLE);

    setContentView(R.layout.image_dialog);
    image = (TouchImageView) findViewById(R.id.image_dialog);
    ImageMgr.getInstance().displayImage(source, image);
    image.setMaxZoom(4f);

    getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

    WindowManager.LayoutParams params = this.getWindow().getAttributes();
    params.width = ViewGroup.LayoutParams.MATCH_PARENT;
    this.getWindow().setAttributes(params);
}

}

this problem shows only in portrait mode

With default parameter the zooming is very slow on TF101 (Tablet).

Changing to
float mScaleFactor = (float)Math.min(Math.max(.5f, detector.getScaleFactor()), 1.5f);

Fix the problem, maybe the speed limit for scaling should be different for phone and tablets.

That's the exception I get when I use the class without setting any images. Although this (no image) might be not the expected use case of this class, maybe it is still possible to avoid the crash?

Can you please explain how to bind XY coordinates and scale factor to another ImageView in the same layout? I'm using TouchImageView for a map with a placeholder on it. The placeholder (imageview) must scale and move with the map.

Not really an issue, but need help for understand..

http://stackoverflow.com/questions/13982426/how-to-sync-touchimageview-to-zoom-and-scroll-more-than-1-control-at-a-time

Currently the image does not slide when zooming in and flinging the image. Sliding to a resting position would make the image feel more tactile.

I see that the problem of not being able to scroll the imageview horizontally in a viewpager has been fixed for devices with an API level from 14 and above. Can this also be fixed for older devices?

The touchImageView is not Supported with layoutInflater. It checks for the width and height at the earliest meanwhile it was not attached to the parent.

hi, i´ve been trying your code and it works perfectly when its on a normal layout, but when you put it inside a scrollview its not setting the image.

These ScaleTypes are the remaining types yet to be supported by TouchImageView.

@MikeOrtiz I found that when the screen rotates, the image doesn't get resized maintaining aspect ratio. it has blank area on the top, that's why it creates problem positioning the image. It was positioned centerInParent. Probably have to rewrite the onMeasure method.

Hey Mike,
I am using your Imageview class in my project all gesture working properly but when i am trying to drag other view on image view , image view getting invisible or null ?
so do you have any solution for this ?

I could not set the default zoom size for an image. For instance I'd like my image to zoom in to a particular amount in the onCreate() of my activity, without the user having to double tap / zoom in to the image.

Is there any way for me to to this? If not could you please add it in a future release?

Thanks!

Hi,
I am using this TouchImageView for displaying the images through InputStream (sockets) continuously. But I have observed different behavior after Zoom In.

1. In Samsung galaxy tab2(android 4.0.4) device: After Zoom in the image, next images (input stream receiving from server socket) are also displayed in Zoom in mode.
2. In Acer Iconia Tab(android 3.0.3) device: After Zoom in the image, For Next image(Input stream from server socket) Zoom outs and displayed in normal mode. But I need same behavior as Samsung tablet.

I am using TouchImageView to display images that I had previously been displaying with ImageView. Thank you very much for this great tool!!

I have to initialize the TouchImageView with the pan and zoom values from a previous use, or a minimum and/or default zoom value. I currently do this by injecting gestures with a timer which is certainly not optimal. Can you tell me how to initialize a new TouchImageView with pan and zoom values from a previous TouchImageView.

Thanks!

• David

Hi,
Sorry before if my question is very basic.
I'm new to android and i want to add zooming function for my image which i can swap by pressing a button.
therefore, my UI consist of a button and the image only.
but your code put the zoomable image directly to the layout by using "setContentView(img)"
i try to change the code in order to be able to zoom by changing:

ImageView img2 = (ImageView) findViewById(R.id.image);
img2.setImageDrawable(img.getDrawable());
setContentView(R.layout.main);

where image is an imageview in my main.xml
i also try few other ways but nothing seems working..
and from what i read, your readme say that your code can be added to xml layout already. how am i suppose to do that?
any help will be really appreciated.. thanks..

I have downloaded the sample code for TouchImageView and set the minScale to .80 to be able to shrink the image.
The image shrinks, but causes the image to align to the bottom or top of the screen, and not move fluently like when image is enlarged.

Is shrinking supported in Touchview? If not, is there a way to fix this?

Regards,
Rune

@MikeOrtiz The double tap has introduced another BUG. If you double tap on an ImageView to zoom it, then set another picture on that ImageView dynamically, the image doesn't show up if it is has different orientation (portrait/landscape).

When the image get zoom to 4f, the image rendered is shown in blur format.

How to get rid of such blurriness of image must be added to you code too.

image is blank. i'm using this image,
https://www.google.com/images/srpr/logo3w.png

if i comment out the code in onMeasure() after the "Center the image" comment, the image shows, but perhaps the bottom 20% of the image is truncated. i don't know how / if this is related to the blank image problem.

sorry to file a bug, i wanted to just ask you about it but i didn't know how to accomplish that.

I am using the the following in my Android Manifest
the image view activity.
android:configChanges="orientation|screenSize"

I am also handling the method
@OverRide
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
}

Thanks for the code. I'm using it for an app and I noticed that it when I tried using Drawable objects rather than Bitmaps, it didn't work. The fix is pretty obvious: add the following in TouchImageView.java.

@Override
public void setImageDrawable(Drawable d){
    super.setImageDrawable(d);
    if(d != null){
        bmWidth = d.getIntrinsicWidth();
        bmHeight = d.getIntrinsicHeight();
    }
}

I am using a TF101 (tablet):

• Maximum zoom,
• Go to bottom right
• Unzoom Maximum
• Black edge appear on right

If you unzoom a little then move again, the black edge disappear.

Hi Mike!
First of all thank you for your excellent work!
I use your TouchImageView and for some reason I have to check whether the image is currently zoomed or not. I woundered myself that I wasn't able to find out how to check this. Could you give some advice, please? I need something that indicates that the image is in it's "original" scaling state (image doesn't get smaller any more when zooming out).

Thank you in advance!

This is no a issue, sorry but I don't know where I can write.
I'm using your TouchImageView but I need some clarifications. I've TouchImageView and a transaprent View upon this in which I can draw 2 points over the image. I'd like to move this two points consistently when zooming and moving image. I would like to know where I need to invoke a mine methods in my view which moves the points.

I guess that in public boolean onScale(ScaleGestureDetector detector) {} I should do something:
imageMovingCallback.onScale(mScaleFactor); and imageMovingCallback.onTranslate(x, y);

but I see that in TouchImageView are made several transformation on matrix and my attempts to do this don't work fine and point don't move consistently with the motion of the image.

Thanks

Iam using a set of this imageview and swipe on to next once i zoomed an image and move to next and come back again to the zoomed image it disappears , if i shirk the zoom it comes again

Hi I am using universal image downloader open source library to display images in grid view. When you click on the image on the grid, it shows in bigger format.

I am trying to get zoom functionality work by using TouchImageView library.
I have added package com.example.touch in my src which has one file i.e. ImageViewTouch.java
Here is the xml file code:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="1dip" >

<com.example.touch.TouchImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:adjustViewBounds="true"/>

<ProgressBar
    android:id="@+id/loading"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:visibility="gone" />

Now in the code, I use the TouchViewImage as follows:

@OverRide
public Object instantiateItem(ViewGroup view, int position) {
View imageLayout = inflater.inflate(R.layout.activity_item_pager_image, view, false);
//img = findViewById(R.id.snoop);

         TouchImageView vOne  = (TouchImageView) imageLayout.findViewById(R.id.image);

final ProgressBar spinner = (ProgressBar) imageLayout.findViewById(R.id.loading);
imageLoader.displayImage(Constants.imageList.get(position), vOne, options, new SimpleImageLoadingListener() {
@OverRide
public void onLoadingStarted(String imageUri, View view) {
spinner.setVisibility(View.VISIBLE);
}

            @Override
            public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
                String message = null;
                switch (failReason) { }
                Toast.makeText(ImagePagerActivity.this, message, Toast.LENGTH_SHORT).show();

                spinner.setVisibility(View.GONE);
            }

            @Override
            public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                spinner.setVisibility(View.GONE);
            //  bitmapImage = loadedImage;
                ;
            }
        });

        ((ViewPager) view).addView(imageLayout, 0);
        imagePosition=position;

// Toast toast = Toast.makeText(getBaseContext(), "Position is " + position,
// Toast.LENGTH_LONG);
// toast.show();
return imageLayout;
}

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view.equals(object);
    }

    @Override
    public void restoreState(Parcelable state, ClassLoader loader) {
    }
    @Override
    public void setPrimaryItem(ViewGroup container, int position, Object object) {
        mCurrentView = (View)object;
    }

    @Override
    public Parcelable saveState() {
        return null;
    }

    @Override
    public void startUpdate(View container) {
    }
}

}

The problem is that when i click on the thumb in grid, i get the following error:

04-04 19:57:11.827: E/AndroidRuntime(12445): FATAL EXCEPTION: main
04-04 19:57:11.827: E/AndroidRuntime(12445): android.view.InflateException: Binary XML file line #8: Error inflating class com.example.touch.TouchImageView
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.LayoutInflater.createView(LayoutInflater.java:596)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:687)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.LayoutInflater.rInflate(LayoutInflater.java:746)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
04-04 19:57:11.827: E/AndroidRuntime(12445): at com.nostra13.example.universalimageloader.ImagePagerActivity$ImagePagerAdapter.instantiateItem(ImagePagerActivity.java:480)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.support.v4.view.ViewPager.addNewItem(ViewPager.java:692)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.support.v4.view.ViewPager.populate(ViewPager.java:821)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.support.v4.view.ViewPager.populate(ViewPager.java:772)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.support.v4.view.ViewPager.onMeasure(ViewPager.java:1234)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.View.measure(View.java:15473)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5056)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.View.measure(View.java:15473)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.widget.LinearLayout.measureVertical(LinearLayout.java:833)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.widget.LinearLayout.onMeasure(LinearLayout.java:574)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.View.measure(View.java:15473)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5056)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
04-04 19:57:11.827: E/AndroidRuntime(12445): at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2361)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.View.measure(View.java:15473)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:1974)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1217)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1390)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1112)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:4472)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.Choreographer$CallbackRecord.run(Choreographer.java:725)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.Choreographer.doCallbacks(Choreographer.java:555)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.Choreographer.doFrame(Choreographer.java:525)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:711)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.os.Handler.handleCallback(Handler.java:615)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.os.Handler.dispatchMessage(Handler.java:92)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.os.Looper.loop(Looper.java:137)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.app.ActivityThread.main(ActivityThread.java:4898)
04-04 19:57:11.827: E/AndroidRuntime(12445): at java.lang.reflect.Method.invokeNative(Native Method)
04-04 19:57:11.827: E/AndroidRuntime(12445): at java.lang.reflect.Method.invoke(Method.java:511)
04-04 19:57:11.827: E/AndroidRuntime(12445): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1006)
04-04 19:57:11.827: E/AndroidRuntime(12445): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:773)
04-04 19:57:11.827: E/AndroidRuntime(12445): at dalvik.system.NativeStart.main(Native Method)
04-04 19:57:11.827: E/AndroidRuntime(12445): Caused by: java.lang.NoSuchMethodException: [class android.content.Context, interface android.util.AttributeSet]
04-04 19:57:11.827: E/AndroidRuntime(12445): at java.lang.Class.getConstructorOrMethod(Class.java:460)
04-04 19:57:11.827: E/AndroidRuntime(12445): at java.lang.Class.getConstructor(Class.java:431)
04-04 19:57:11.827: E/AndroidRuntime(12445): at android.view.LayoutInflater.createView(LayoutInflater.java:561)
04-04 19:57:11.827: E/AndroidRuntime(12445): ... 38 more

Please help me remove this