Infinite Auto Scrolling using Android View Pager

Recently , I have implemented a concept of infinite scrolling in android. This is not much difficult task but it’s tricky . I have implemented it by View pager using Paging Adapter .  Anyone can do it by  view pager adapter like FragmentStatePagerAdapter. I have used one more thing which is View Pager Indicator .

                View Pager with Indicators

To implement it  , take android View Pager and  Frame Layout  for indicators in activity XML :

 < RelativeLayout
 android: layout_width = "match_parent"
 android: layout_height = "0dp"
 android: layout_weight = "2"
 android: background = "@color/colorWhite" >

      < android.support.v4.view.ViewPager
         android: id = "@+id/viewPager"
         android: layout_width = "match_parent"
         android: layout_height = "match_parent" />
   
      // Indicator layout 
      < FrameLayout
         android: id = "@+id/pagesIndicator"
         android: layout_width = "match_parent"
         android: layout_height = "30dp"
         android: layout_alignParentBottom = "true"
         android: layout_centerHorizontal = "true"
         android: gravity = "center"
         android: orientation = "horizontal" />


  < /RelativeLayout>

In your Activity , prepare data for view pager and set a suitable adapter in it .You need to set your view pager in LoopingCirclePageIndicator .

{
    ViewPagerAdaptor viewPagerAdapter = new ViewPagerAdaptor();
    
     // View Initialization
    
     ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
     ViewGroup mFrameLayout = (ViewGroup) findViewById(R.id.pagesIndiactor);
    
     //prepare data for view pager
    
     viewPager.setAdapter(viewPagerAdapter);
    
     // this class for indicators
    
     LoopingCirclePageIndicator circlePageIndicator = new LoopingCirclePageIndicator(this);
     circlePageIndicator.setFillColor(getResources().getColor(R.color.colorPrimary, null));
    
     circlePageIndicator.setViewPager(viewPager);
     mFrameLayout.addView(circlePageIndicator); 
 }

Here , One new class is introduced which is LoopingCirclePageIndicator .This class is handling all the possible situations of view pager current page selection using one interface LoopingPagerAdapter .You can refer this code from these links :

1. LoopingCirclePageIndicator

2.  LoopingPagerAdapter

In general , getCount() method of adapter returns object size but  in this case we are going to implement infinite scrolling , that’s why  we will use INTEGER.MAX_VALUE in getCount() method . There is one more method  getRealCount() , which returns real size of your object for view pager indicators.

Actually , we create a new page every time for infinite scrolling in adapter.

private class ViewPagerAdaptor extends
                               PagerAdapter implements  
                               LoopingPagerAdapter
 {

     private List < String > imageUrlList;
     private ImageLoader imageLoader;
    
     ViewPagerAdaptor() 
     {
         imageLoader = new ImageLoader(RenewUpgradeActivity.this, R.drawable.placeholder_image_user_media_large, false, AppContentConstant.CACHING_SIZE);
     }
    
     void setImageUrlList(List < String > imageUrlList) 
     {
       this.imageUrlList = imageUrlList;
     }
    
    
     public int getCount() 
     {
       return Integer.MAX_VALUE;
     }
    
    
     @Override
     public Object instantiateItem(ViewGroup container, int position) 
     {
          View itemView = LayoutInflater.from(RenewUpgradeActivity.this).inflate(R.layout.layout_renew_upgrade_pager, container, false);
          ImageView imageView = (ImageView) itemView.findViewById(R.id.imageViewCoupon);
          String imageUrl = imageUrlList.get(index);
          imageLoader.displayImage(imageUrl, imageView, true);
          container.addView(itemView);
        
          return itemView;
     }
    
     @Override
     public boolean isViewFromObject(View view, Object object) 
     {
         return view == object;
     }
    
     @Override
     public void destroyItem(ViewGroup container, int position, Object object) 
     {
        container.removeView((LinearLayout) object);
     }
    
     @Override
     public Parcelable saveState() 
     {
        return null;
     }
    
     public int getRealCount() 
     {
        return imageUrlList.size();
     }
}

Auto Scroll View Pager Implementation

Now let’s discuss most challenging functionality that I enjoyed exploring and implementing on my own  . Here is the code to do the same after setting adapter in view pager.

private int currentPage = 0; 
 private void setupAutoPager()
    {
        final Handler handler = new Handler();

        final Runnable update = new Runnable() {
            public void run()
            {

             viewPager.setCurrentItem(currentPage, true);
                if(currentPage == Integer.MAX_VALUE)
                {
                    currentPage = 0;
                }
                else
                {
                    ++currentPage ;
                }
            }
        };


        timer = new Timer();
        timer.schedule(new TimerTask() {

            @Override
            public void run() {
                handler.post(update);
            }
        }, 500, 2500);
    }

 

All suggestions are welcome 🙂 .

 

Leave a Reply