How to implement Pinch Zoom in Picasso library?

Alec picture Alec · Jan 25, 2015 · Viewed 10.5k times · Source

I'm using Picasso library in my current project http://square.github.io/picasso/ . Everything is working fine but I just can't figure out how to implement Pinch Zoom for all images that are being loaded from URL. To be honest I don't even know where to place the onClickListener. My application have several fragments and each of them have 2 Tabs, first Tab has a ListView and the second tab has some pictures displayed in a GridView:

Bmw.java

public class Bmw2 extends Fragment {

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(com.zenyt.R.layout.bmw2, container, false);

        GridView gv = (GridView) rootView.findViewById(R.id.grid_view);
        gv.setAdapter(new com.zenyt.SampleGridViewAdapter(getActivity()));
        gv.setOnScrollListener(new SampleScrollListener(getActivity()));


        return rootView;
    }

SampleGridViewAdapter

public final class SampleGridViewAdapter extends BaseAdapter {
    private final Context context;
    private final List<String> urls = new ArrayList<String>();

    public SampleGridViewAdapter(Context context) {
        this.context = context;

        // Ensure we get a different ordering of images on each run.
        Collections.addAll(urls, Data.URLS);
        Collections.shuffle(urls);

    }

    @Override public View getView(int position, View convertView, ViewGroup parent) {
        SquaredImageView view = (SquaredImageView) convertView;
        if (view == null) {
            view = new SquaredImageView(context);
            view.setScaleType(CENTER_CROP);
        }

        // Get the image URL for the current position.
        String url = getItem(position);

        // Trigger the download of the URL asynchronously into the image view.
        Picasso.with(context) //
                .load(url) //
                .placeholder(R.drawable.placeholder) //
                .error(R.drawable.error) //
                .fit() //
                .tag(context) //
                .into(view);

        return view;
    }

    @Override public int getCount() {
        return urls.size();
    }

    @Override public String getItem(int position) {
        return urls.get(position);
    }

    @Override public long getItemId(int position) {
        return position;
    }
}

Data.java

final class Data {
    static final String BASE = "http://www.hdcarwallpapers.com/walls/";
    static final String BASE2 = "http://www3.cellsea.com//content/wallpaper/";
    static final String EXT = ".jpg";
    static final String[] URLS = {
            BASE + "prior_design_audi_r8_gt850-wide" + EXT,
            BASE + "2015_audi_rs6_avant_exclusive-wide" + EXT,
            BASE + "2015_audi_tt_coupe_quattro-wide" + EXT,
            BASE + "2015_audi_tt_coupe_quattro-wide" + EXT,
            BASE + "2014_audi_prologue_concept_4-wide" + EXT,
            BASE2 + "2010/WP4ce483c6efa9d" + EXT,

    };

    private Data() {
        // No instances.
    }
}

Sorry for my english.

Answer

Nikola Despotoski picture Nikola Despotoski · Jan 27, 2015

Picasso library is used only to load the images from network.

You need to address your request with other library such as PhotoView or any other that support actions on images.