How to make a circular view pager in android?

Viewed 2191

enter image description here 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);
            }
    }
2 Answers

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.

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
      }

    })
Related