androidandroid-viewpagerpicassoandroid-photoview

ViewPager + Picasso + multiple images from URL String array


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?


Solution

  • 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);
            }
        }
    }