viewpager not working properly

Question

I have used the code below and Its loading the image all the time I mean after every swipe .Also the 1st image is never displayed the first time but after I swipe till the end on the list and get back then it loads .Is my implementation right beacause I fell its not?the code is working but its not perfect .I really appreciate any help with regard to this code or topic .Thanks in Advance.

MainActivity:

public class MainActivity extends Activity {

      final String[] page_titles = new String[]{"Title1", "Title2", "Title3", "Title4", "Title5"};
        //this will go the description TextView
            final String[] desc = new String[]{
                "desc1",
                "desc2",
                "desc3",
                "desc4",
                "desc5"
        };


            ImageView im;

            String[] urls = {
                    "1.jpg",
                    "2.jpg",
                    "3.jpg",
                    "4.jpg",
            };

    ViewPager vp;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

         //Instantiating the adapter
        myAdaptertest1 mAdapter = new myAdaptertest1(this);

        vp=(ViewPager)findViewById(R.id.pager);

        vp.setAdapter(mAdapter);

        ////////




    }

Adapter:

    private class myAdaptertest1 extends PagerAdapter{

        Context context;

        public myAdaptertest1(Context c){
            this.context = c;
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
              return page_titles.length;
        }

        @Override
        public boolean isViewFromObject(View v, Object o) {
            // TODO Auto-generated method stub
              return v.equals(o);
        }





        public Object instantiateItem(View pager, int position) {
            final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View vi = inflater.inflate(R.layout.page, null, false);

            TextView title = (TextView)vi.findViewById(R.id.tvTitle);
            TextView description = (TextView) vi.findViewById(R.id.tvdesc);

             im = (ImageView)vi.findViewById(R.id.imageView1);


            title.setText(page_titles[position]);
            description.setText(desc[position]);

                       String rt = urls[position];

                        MyTask task = new MyTask();
                        task.execute(rt); 
            //This is very important
            ( (ViewPager) pager ).addView( vi, 0 );

            return vi;
        }

        @Override
        public void destroyItem(View pager, int position, Object view) {
            ((ViewPager) pager).removeView((View) view);
        }


    }

MyTask:

    private class MyTask extends AsyncTask<String, Void, Drawable> {

         ProgressDialog pd;


         @Override
        protected void onPreExecute() {
            // TODO Auto-generated method stub
            super.onPreExecute();


            pd = ProgressDialog.show(MainActivity.this, "Working..", "Getting image", true, false);
        }

        protected Drawable doInBackground(String... url) {
                try {
                    InputStream is = (InputStream) new URL(url[0]).getContent();
                    Drawable d = Drawable.createFromStream(is, "src name");
                    return d;
                } catch (Exception e) {
                    System.out.println("Exception = " + e);
                    return null;
                }
         }

         protected void onProgressUpdate(Void... progress) {
         }

         protected void onPostExecute(Drawable result) {
             /* Image loaded...*/
             pd.dismiss();

             im.setImageDrawable(result);

         }
    }

}

LOGCAT:

 FATAL EXCEPTION: main
 Process: com.example., PID: 26715
 java.lang.IllegalStateException: ImageLoader must be init with configuration before using
    at com.nostra13.universalimageloader.core.ImageLoader.checkConfiguration(ImageLoader.java:560)
    at com.nostra13.universalimageloader.core.ImageLoader.displayImage(ImageLoader.java:206)
    at com.nostra13.universalimageloader.core.ImageLoader.displayImage(ImageLoader.java:284)
    at com.example..MainActivity$myAdaptertest1.instantiateItem(MainActivity.java:112)
    at android.support.v4.view.PagerAdapter.instantiateItem(PagerAdapter.java:110)
    at android.support.v4.view.ViewPager.addNewItem(ViewPager.java:832)
    at android.support.v4.view.ViewPager.populate(ViewPager.java:982)
    at android.support.v4.view.ViewPager.populate(ViewPager.java:914)
    at android.support.v4.view.ViewPager.onMeasure(ViewPager.java:1436)
    at android.view.View.measure(View.java:16497)
    at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
    at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404)
    at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
    at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
    at android.view.View.measure(View.java:16497)
    at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
    at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
    at android.view.View.measure(View.java:16497)
    at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
    at com.android.internal.widget.ActionBarOverlayLayout.onMeasure(ActionBarOverlayLayout.java:327)
    at android.view.View.measure(View.java:16497)
    at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
    at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
    at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2291)
    at android.view.View.measure(View.java:16497)
    at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:1916)
    at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1113)
    at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1295)
    at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1000)
    at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5670)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:761)
    at android.view.Choreographer.doCallbacks(Choreographer.java:574)
    at android.view.Choreographer.doFrame(Choreographer.java:544)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:747)
    at android.os.Handler.handleCallback(Handler.java:733)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:136)
    at android.app.ActivityThread.main(ActivityThread.java:5017)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:515)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:779)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:595)
    at dalvik.system.NativeStart.main(Native Method)

Answer 1

The problem is every time instantiateItem is called im changes and by the time your task is finished for the first item instantiateItem has been called for 2nd or maybe 3rd item and hence your im variable is having reference of that so when you call im.setImageDrawable() it is getting called on wrong imageview object.

Try using universal image loader instead of staring your own task

reference:

https://github.com/nostra13/Android-Universal-Image-Loader

This will make sure your image is not loaded every-time you swipe

Add the library in your project and change your code as following:

private class myAdaptertest1 extends PagerAdapter{

    Context context;
    ImageLoader imageLoader;
    public myAdaptertest1(Context c){
        this.context = c;

   DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()
    .cacheInMemory(true)
    .cacheOnDisc(true)
    .build();
    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getApplicationContext())
    .defaultDisplayImageOptions(defaultOptions)
    .build();
       imageLoader=  ImageLoader.getInstance();
        imageLoader.init(config);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
          return page_titles.length;
    }

    @Override
    public boolean isViewFromObject(View v, Object o) {
        // TODO Auto-generated method stub
          return v.equals(o);
    }





    public Object instantiateItem(View pager, int position) {
        final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View vi = inflater.inflate(R.layout.page, null, false);

        TextView title = (TextView)vi.findViewById(R.id.tvTitle);
        TextView description = (TextView) vi.findViewById(R.id.tvdesc);

         im = (ImageView)vi.findViewById(R.id.imageView1);


        title.setText(page_titles[position]);
        description.setText(desc[position]);

                   String rt = urls[position];
        imageLoader.displayImage(rt, im);//<---here just call this function
        //This is very important
        ( (ViewPager) pager ).addView( vi, 0 );

        return vi;
    }

    @Override
    public void destroyItem(View pager, int position, Object view) {
        ((ViewPager) pager).removeView((View) view);
    }