Changing viewPager swipe direction

Question

I'm using TabLayout and viewPager with an option to swipe the viewPager to the left or right in order to navigate between pages.

My problem is, that my application is RTL based (right-to-left) and the swipe direction is reversed.

I'm trying to change the swipe direction from the default to the reversed version. I've been searching alot on the web and couldn't find a way how to do it.

I'm using android.support.v4.view.ViewPager;

and this is how I initialize my TabLayout with the viewPager:

// View Page Adapter
        final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        final PagerAdapter adapter = new PagerAdapter
                (getSupportFragmentManager(), tabLayout.getTabCount());
        //View Page Adapter Configuration
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        viewPager.setOffscreenPageLimit(3);
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

Summary: Currently, When I'm swiping the viewPager to the left, it shows the next page. in RTL, when you swipe the viewPager to the right, it shows the next page.

It might be hard to understand, but here it is. Swiping right shows the next page

while I need swiping right to show the previous page.

Answer 1

It is the very simple techniqe to change the swipe direction of the Viewpager.

There are two simple step which have to follow you,

1. Change the rotation of the View pager,

viewpager.setRotationY(180);

2. Then again change the direction of the each item view in adapter,

itemView.setRotationY(180);

This is 100% worked for me.

Answer 2

I faced the same problem month ago but I think I found a great solution.

1. Change your TabLayout direction to ltr in xml:

     <android.support.design.widget.TabLayout
        android:id="@+id/tl_activity_main"
        android:layout_below="@id/toolbar_activity_main"
        android:layoutDirection="ltr"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/DisionTabLayout" />

2. Create custom adapter for ViewPager and override methods getItem(int position) and getPageTitle(int position):

    @Override
    public Fragment getItem(int position) {
        if (mIsRtlOrientation && mTabs != null && mTabs.length > 0) {
            return mTabs[mTabs.length - position - 1].getFragment();
        } else {
            return mTabs[position].getFragment();
        }
    }

    @Override
    public int getCount() {
        return mTabs.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        if (mIsRtlOrientation && mTabs != null && mTabs.length > 0) {
            return mTabs[mTabs.length - position - 1].getTitle();
        } else {
            return mTabs[position].getTitle();
        }
    }

3. Set the adapter to ViewPager and then apply this ViewPager to TabLayout.

    private void setAdapters() {
        // initialize adapter
        mTabsAdapter = new TabsAdapter(getSupportFragmentManager(), mTabs, true);
        // set adapter to ViewPager
        vp.setAdapter(mTabsAdapter);
        // set ViewPager to TabLayout
        tl.setupWithViewPager(vp);
        // if RTL orientation, go to last item
        vp.setCurrentItem(vp.getAdapter().getCount() - 1, false);
    }

Answer 3

i know it's late but this is a smart question. as @CommonsWare said it's the matter of reversing the order of items in getItem() method in page adapter. but this isn't enought. as you reverse the order in getitem() method you should also NOT reverse the order in getPageTitle() method. something like this:

public static class AppSectionsPagerAdapter extends FragmentStatePagerAdapter {
        public AppSectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new page1();
                case 1:
                    return new page2();
                case 2:
                    return new page3();
            }
        }

        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return "page 3 title";
                case 1:
                    return "page 2 title";
                case 2:
                    return "page 1 title";
                }
        }

        @Override
        public int getCount() {
            return 3;
        }
    }

now comes the tricky part. you should use this simple method which converts zero based index order reversed using max index and current index.

public int calculateReverse(int maxIndex,int currentIndex){
        return maxIndex-currentIndex;
    }

than you should use this method in onTabSelected() like this: be aware you should use your own max index:

@Override
    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
        mViewPager.setCurrentItem(calculateReverse(2,tab.getPosition()));
    }

the second part is to change page listener on page adapter. once again you should use your own max index number:

mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                actionBar.setSelectedNavigationItem(calculateReverse(2,position));  // reversing the tab selection
            }
        });

i tried to be as descriptive as i can. hope this helps :)

Answer 4

If you are using viewpager2 with fragments. you can use.

<androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        **android:orientation="vertical"**
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

I hope this helps somebody.

Answer 5

You can use ViewPager2, It support right to left direction. to make it possible:

1. Add android:supportsRtl="true" in app Manifest
2. Make viewpager2's parent viewgroup layout direction ltr (android:layoutDirection="ltr")
3. Now set viewpager2's layoutDirection ltr (android:layoutDirection="rtl")
4. also set adapter's layout to layoutDirection ltr (android:layoutDirection="ltr")

Answer 6

So I found that the easiest way for this to work for ViewPager (1) is just to invert the array of items, and then before displaying set the current item of the pager at [array size] position.