How to make a circular view pager in android?

Question

How to jump from the zeroth index of viewpager to the last index of the view pager? That is how to make the view pager circular? I want jump to last index if the user swipes left and from the last page if the user swipes right, it should jump to the first page.

Java File 
package com.example.hakimi.firebasemessaging;

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.eftimoff.viewpagertransformers.CubeInTransformer;
import com.eftimoff.viewpagertransformers.DefaultTransformer;
import com.eftimoff.viewpagertransformers.DrawFromBackTransformer;
import com.eftimoff.viewpagertransformers.RotateUpTransformer;
import com.eftimoff.viewpagertransformers.StackTransformer;
import com.eftimoff.viewpagertransformers.TabletTransformer;

import java.util.ArrayList;

    public class NewsCardView extends AppCompatActivity {
        private CustomPagerAdapter mCustomPagerAdapter;
        private ViewPager mViewPager;
        private ArrayList<NewsModel> arrayList = MainActivity.mArrayList;


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



            Bundle bundle = getIntent().getExtras();
            int id = bundle.getInt("id");


            mCustomPagerAdapter = new CustomPagerAdapter(this,arrayList,mViewPager);





            mViewPager = (ViewPager) findViewById(R.id.pager);
            mViewPager.setAdapter(mCustomPagerAdapter);


            mViewPager.setPageTransformer(true, new TabletTransformer());

            mViewPager.setCurrentItem(id);


            mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    if(position==mViewPager.getAdapter().getCount()-1){
                     /*   Intent reg = new
                                Intent(Illustrations.this,Register_Page.class);*/
                     //   startActivity(reg);
                    }

                }

                @Override
                public void onPageScrollStateChanged(int arg0) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void onPageScrolled(int arg0, float arg1, int arg2) {
                    // TODO Auto-generated method stub

                }


            });

        }


        }


Xml file

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/relativeLayout">


        <android.support.v4.view.ViewPager
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            >
        </android.support.v4.view.ViewPager>

    </RelativeLayout>




Adapter

    class CustomPagerAdapter extends PagerAdapter {
            Context mContext;
            LayoutInflater mLayoutInflater;


        private int[] pageIDsArray;
        private int count;


        ArrayList<NewsModel> news;


    public CustomPagerAdapter(Context context,ArrayList<NewsModel> news,final ViewPager pager) {
        this.news=news;



            mContext = context;
            mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
            View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);

            ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
          //  imageView.setImageResource(mResources[position]);
        TextView newstitle,newsdes;

        TextView gotosrc;

        newstitle=(TextView) itemView.findViewById(R.id.pagertitle);
        newsdes=(TextView) itemView.findViewById(R.id.pagerdes);

        newsdes.setMovementMethod(new ScrollingMovementMethod());

        gotosrc=(TextView) itemView.findViewById(R.id.tvsrc);


        gotosrc.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent=new Intent(mContext,WebViewActivity.class);
                mContext.startActivity(intent);

            }
        });

        newstitle.setText(news.get(position).getNewsTitle());
        newsdes.setText(news.get(position).getNewsData());

        String imgurll=news.get(position).getNewsImgUrl();

        Picasso.with(mContext)
                .load(imgurll)
                .resize(300, 250)
                .centerCrop()
                .into(imageView);

            container.addView(itemView);

            return itemView;
            }

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

Possible duplicate of [ViewPager as a circular queue / wrapping](https://stackoverflow.com/questions/7546224/viewpager-as-a-circular-queue-wrapping) — DeKaNszn, Jul 10 '17 at 12:05
you have to return infinite (or very large) count of your adapter, and then when initializing page do the following: for example, you have 10 items. So when you show the 11th (the position will be 10), you do `position = position % realCount`. your `realCount` is 10, so you get position = 10 % 10 = 0. And then you instantiate it like it is 1st item — Vladyslav Matviienko, Jul 10 '17 at 12:06
please provide the image what you want .. your circular viewPager should look like — cpt. Sparrow, Jul 10 '17 at 12:09
Where should i write this "position = position % realCount" ??? — Pooja Pachchigar, Jul 10 '17 at 12:16

score 1 · Answer 1 · answered Jun 28 '19 at 06:04

With the example of having views A, B, C, add the views like this: C, A, B, C, A. Then set the current page to page 1 (which is view A).

You will need to detect, using code like that below, when the ViewPager stops scrolling on page 0 or page 4. If it does, switch to the opposite page that contains the same visual content without animation so the change is instant.

Here's the code to detect when scrolling stops on a page and switches to the "opposite" page:

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        public void onPageScrollStateChanged(int state) {
            if (state == ViewPager.SCROLL_STATE_IDLE) {
                if( newPage != lastPage ) {
                    lastPage = newPage;
                    if( newPage == 4 )
                        viewPager.setCurrentItem( 1, false );
                    else if( newPage == 0 )
                        viewPager.setCurrentItem( 3, false );
                 }
            }
        }

        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        public void onPageSelected(int position) {
            newPage = position;
        }
    });

For example, if the user stops scrolling on page 0, switch to page 3, both of which look like "C". It's not perfect and doesn't handle the user trying to scroll multiple pages at the same time. But is a workable solution.

I'm sorry for not including that info. Both would be set to 1 if I remember correctly. You would need to scroll to the correct starting page, number 1, right when the entire view is displayed the first time. — David Rector, Jun 29 '21 at 18:05

score 0 · Answer 2 · answered Feb 12 '20 at 05:46

please try this one. Sure, it will work like as you expected.

viewPager?.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
      var currentPage : Int = 0
      var mPreviousPosition : Int = 0
      var mIsEndOfCycle = false
      override fun onPageScrollStateChanged(state: Int) {
        val pageCount = viewPager?.adapter?.count
        if (state == ViewPager.SCROLL_STATE_IDLE) {
          if (mPreviousPosition == currentPage && !mIsEndOfCycle) {
            if (currentPage == 0) {
              pageCount?.minus(1)?.let { viewPager?.setCurrentItem(it, false) };
            } else {
              viewPager?.setCurrentItem(0, false);
            }
            mIsEndOfCycle = true;
          } else {
            mIsEndOfCycle = false;
          }
          mPreviousPosition = currentPage;
        }
      }

      override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {}

      override fun onPageSelected(position: Int) {
        currentPage = position
      }

    })

How to make a circular view pager in android?

2 Answers2