ViewPager + Picasso + multiple images from URL String array

Question

Please help me. I'm following the example ViewPagerActivity from sample PhotoView of Chris Banes (https://github.com/chrisbanes/PhotoView) and I want to change the drawable with Picasso URL images. So, I'm trying to put multiple images in HackyViewPager via Picasso String array of urls.

my xml ViewPager:

<my.package.HackyViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="200dp" />

in onCreate:

...      
ViewPager viewPager = (HackyViewPager) findViewById(R.id.view_pager);
viewPager.setAdapter(new SamplePagerAdapter());

I have a String array of URL's obtained from one single String stringDefinitionGemstonesPhoto

String[] strAry = stringDefinitionGemstonesPhoto.split(",");

and the final code in SamplePageAdapter is:

static class SamplePagerAdapter extends PagerAdapter {

    private String stringDefinitionGemstonesPhoto = ("https://geology.com/minerals/photos/calcite-marble-127.jpg, https://geology.com/minerals/photos/calcite-concrete.jpg");
    private  String[] strAry = stringDefinitionGemstonesPhoto.split(",");


    @Override
    public int getCount() {
        return strAry.length;
    }

    @Override
    public View instantiateItem(ViewGroup container, int position) {
        PhotoView photoView = new PhotoView(container.getContext());

        System.out.println(strAry[position]);
        Picasso.get().load(strAry[position]).into(photoView);

        container.addView(photoView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        return photoView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

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

}

Only one image is showing, when I'm sliding the next photo is empty/blank. In the Log system print out the links which are splitted correctly. What is wrong?

GianhTran · Accepted Answer · 2018-12-11T09:58:42.707

I see something wrong, that is

for(int i= 0; i < numbers.length; i++){
                System.out.println(strAry[i]);
                System.out.println(strAry[position]);
                Picasso.get().load(strAry[position]).into(photoView);
            }

should be

            System.out.println(strAry[position]);
            Picasso.get().load(strAry[position]).into(photoView);

UPDATE

I found an issue that Picasso or Glide can not work well in instantiateItem(), see more

So my solution is not using above lib anymore, we try to request url by hand, this way is not better because of performance issues but it's worked.

Here is my solution

class SamplePagerAdapter extends PagerAdapter {

    private String stringDefinitionGemstonesPhoto = ("https://geology.com/minerals/photos/calcite-marble-127.jpg, https://geology.com/minerals/photos/calcite-concrete.jpg");
    private String[] strAry = stringDefinitionGemstonesPhoto.split(",");


    @Override
    public int getCount() {
        return strAry.length;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        PhotoView photoView = new PhotoView(container.getContext());
        try {
            new DownloadImageTask(photoView)
                    .execute(strAry[position]);
        } catch (Exception ex) {
            Log.e("Error", ex.getMessage());
        }

        container.addView(photoView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        return photoView;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((View) object);
    }

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

    public class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
        private ImageView bmImage;

        DownloadImageTask(ImageView bmImage) {
            this.bmImage = bmImage;
        }

        protected Bitmap doInBackground(String... urls) {
            String urlDisplay = urls[0];
            Bitmap myImage = null;
            try {
                InputStream in = new java.net.URL(urlDisplay).openStream();
                myImage = BitmapFactory.decodeStream(in);
            } catch (Exception e) {
                Log.e("Error", e.getMessage());
                e.printStackTrace();
            }
            return myImage;
        }

        protected void onPostExecute(Bitmap result) {
            bmImage.setImageBitmap(result);
        }
    }
}

doesn't work, see my updated question, it shows only one image, but my Log says that I have all 3 URL splitted. — Apopei Andrei Ionut, Dec 11 '18 at 08:16
@ApopeiAndreiIonut are you sure 2nd and 3th url is a valid url? can you show them out? — GianhTran, Dec 11 '18 at 08:24
sure, I updated the code/question, I have only two links to simplify the problem — Apopei Andrei Ionut, Dec 11 '18 at 08:34
@ApopeiAndreiIonut well done, I will create a demo to reproducing your issue and come back later — GianhTran, Dec 11 '18 at 08:42

Uma Achanta · Answer 2 · 2018-12-11T08:16:39.403

2

No need to use numbers array separately , update adapter class

static class SamplePagerAdapter extends PagerAdapter {

    private static String[] strAry = stringDefinitionGemstonesPhoto.split(",");


    @Override
    public int getCount() {
        return strAry.length;
    }

    @Override
    public View instantiateItem(ViewGroup container, int position) {
        PhotoView photoView = new PhotoView(container.getContext());

            System.out.println(strAry[position]);
            Picasso.get().load(strAry[position]).into(photoView);

        container.addView(photoView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        return photoView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

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

}

edited Dec 11 '18 at 08:16

answered Dec 11 '18 at 07:11

Uma Achanta

3,669
4
22
49

When I put that two lines of code (i.e., container.addView... and return photoView;) outside the } ... i get errors Class 'SamplePageAdapter' must either be declared abstract or implement abstract method 'isViewFromObject(View, Object)' in 'PageAdapter'. – Apopei Andrei Ionut Dec 11 '18 at 08:11
sorry its because of one extra closing brace,I edited the code and removed it now. you can check – Uma Achanta Dec 11 '18 at 08:18
It doesn't work yet, I don't see the second image, see my updated question. – Apopei Andrei Ionut Dec 11 '18 at 08:34

ViewPager + Picasso + multiple images from URL String array

2 Answers2