androidandroid-viewpagerandroid-tabsandroid-pagetransformer

How to Implement PageTransformer with Swipeable Tabs


In my example code i have three Swipeable Tabs in MainActivity.java namely : Android, IOS and WINDOWS and i am using swipe to switch between Tabs.

Now, i have to implement PageTransformer with Swipeable Tabs, so here i need your help, is it possible, if yes so how ?

MainActivity.java:-

    public class MainActivity extends FragmentActivity {
    ViewPager Tab;
    TabPagerAdapter TabAdapter;
    ActionBar actionBar;

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

        TabAdapter = new TabPagerAdapter(getSupportFragmentManager());

        Tab = (ViewPager)findViewById(R.id.pager);
        Tab.setOnPageChangeListener(
                new ViewPager.SimpleOnPageChangeListener() {
                    @Override
                    public void onPageSelected(int position) {

                        actionBar = getActionBar();
                        actionBar.setSelectedNavigationItem(position);                    
                    }
                });
        Tab.setAdapter(TabAdapter);

        ..............
    }
}

Here is what i want to implement in my program :

enter image description here

and this is how my Tab looks :

enter image description here


Solution

  • I found my solution here, its really easy to implement

    Usage is pretty straightforward, just attach a PageTransformer to the ViewPager:

    viewpager.setPageTransformer(false, new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View page, float position) {
            // do transformation here
            }
    });
    

    rotates the pages around their Z axis by 30 degrees; you don’t need to normalize for this one. The effect is similar to the cover flow UI pattern:

    @Override
    public void transformPage(View page, float position) {
        page.setRotationY(position * -30);
    }
    

    so here is my final code, which i used:

    viewPager = (ViewPager)findViewById(R.id.pager);
    
            viewPager.setOnPageChangeListener(
                    new ViewPager.SimpleOnPageChangeListener() {
                        @Override
                        public void onPageSelected(int position) {                       
                            actionBar = getActionBar();
                            actionBar.setSelectedNavigationItem(position);                    
                        }
                    });
    
            viewPager.setAdapter(tabAdapter);        
            viewPager.setPageTransformer(false, new PageTransformer() {
    
                public void transformPage(View page, float position) {
    
                    page.setRotationY(position * -30); // animation style... change as you want..
                }
            });