TouchImageView zoom scaled to frame with Picasso

Question

I was using Universal Image Loader library to load a set of images and TouchImageView to allow zooming. I decided to replace Universal Image Loader with picasso. Everything worked fine except now the image zooms around a frame which is slightly bigger than the image.

@Override
    public Object instantiateItem(ViewGroup view, int position) {
        View imageLayout = inflater.inflate(R.layout.item_pager_image, view, false);
        assert imageLayout != null;
        TouchImageView imageView = (TouchImageView) imageLayout.findViewById(R.id.image);
        final ProgressBar spinner = (ProgressBar) imageLayout.findViewById(R.id.loading);
        spinner.setVisibility(View.INVISIBLE);
        Picasso.with(getApplicationContext()).setIndicatorsEnabled(false);
        Picasso.with(getApplicationContext()).load(images[position]).into(imageView,new Callback() {

            @Override
            public void onSuccess() {
                spinner.setVisibility(View.GONE);        
            }

            @Override
            public void onError() {

            }
        });
        view.addView(imageLayout, 0);
        return imageLayout;

I have been breaking my head over a few hours for this. Is this some issue TouchImageView has with Picasso? Any help would be appreciable. Thanks.

Or you can do one thing.. imageView.setScaleType(ScaleType.Fit_XY) — Chiradeep, Sep 16 '14 at 13:39
Its happening because of image view scaling.Scale to fit XY. It wont go out from the frame — Chiradeep, Sep 16 '14 at 13:40
@FunLove Thanks for the suggestion but doing imageView.setScaleType(ScaleType.FIT_XY) stopped zooming in my case. — rmad, Sep 16 '14 at 13:55
I had similiar problems with this library If I remember correctly but I am using now https://github.com/sephiroth74/ImageViewZoom for a long time which works fine with picasso. — Yuraj, Sep 16 '14 at 19:41
@Yuraj Hey, thanks for the suggestion. Can you tell me how to implement the library. I am using eclipse and need a jar to implement this. — rmad, Sep 17 '14 at 11:15
It should work with gradle and maven. But you could just clone repo and copy this directory https://github.com/sephiroth74/ImageViewZoom/tree/master/library/src/main/java/it/sephiroth/android/library/imagezoom into your project and then you can use It. — Yuraj, Sep 17 '14 at 19:43
@Yuraj I am implementing this. All I did was to add the library, and replace TouchImageView to ImageViewTouch type image. Did that both in xml and in java code. However now it shows up a blank screen. — rmad, Sep 18 '14 at 10:36
It is not same as TouchImageView please look at demo: https://github.com/sephiroth74/ImageViewZoom/tree/master/demo — Yuraj, Sep 18 '14 at 10:40
@Yuraj I looked at the demo. But what fixed things was changing height and width from wrap-content to fill parent. Now zoom within frame works using TouchImageView also. — rmad, Sep 18 '14 at 13:18

score 5 · Answer 1 · answered Apr 19 '16 at 14:02

Mahram Foadi posted here a great solution that work for me too:

Picasso.with(context).load (someUri).into(new Target () {
   @Override
    public void onBitmapLoaded (final Bitmap bitmap,
        final Picasso.LoadedFrom loadedFrom) {
        someTouchImageView.setImageBitmap (bitmap);
    }

   @Override
    public void onBitmapFailed (final Drawable drawable) {
       Log.d(TAG, "Failed");
    }

   @Override
   public void onPrepareLoad (final Drawable drawable) {
        someTouchImageView.setImageDrawable (drawable);
   }
});

Hope this helps other people like us to use TouchImageView with Picasso ;)

link to TouchImageView https://github.com/MikeOrtiz/TouchImageView/blob/master/src/com/ortiz/touch/TouchImageView.java — cpt. Sparrow, Jun 30 '17 at 05:46

score 0 · Answer 2 · answered Sep 18 '14 at 13:19

0

I figured out the whole issue somehow got fixed when I set the image width and height from wrap_content to fill_parent.

answered Sep 18 '14 at 13:19

rmad

31
1
2

score 0 · Answer 3 · answered Apr 22 '16 at 15:40

Here is if you are using Glide. Glide is faster in loading than picasso and cheaper in memory consuming

Glide.with(context).load(url).asBitmap().into(new SimpleTarget<Bitmap>() {
    @Override
    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
        someTouchImageView.setImageBitmap(resource);
    }
});

score 0 · Answer 4 · answered Aug 16 '22 at 16:01

For those who still run into this problem.

As inspired by a comment in this issue:

It's because needs View size and it's not available in TouchImageView implementation before bitmap is set

Load the image after the TouchImageView is created using .post().

Kotlin code:

touchImageView.post { // Load the image when the view is ready
    Picasso.get()
        .load(file)
        .placeholder(R.drawable.image_placeholder)
        .into(touchImageView)
}

Java code:

// Load the image when the view is ready
touchImageView.post(new Runnable() {
    @Override
    public void run() {
    Picasso.get()
        .load(file)
        .placeholder(R.drawable.image_placeholder)
        .into(touchImageView)
    }
});

TouchImageView zoom scaled to frame with Picasso

4 Answers4

Kotlin code:

Java code: