androidandroid-viewpagercoverflow

Cover Flow feature using view pager android


I have to implement cover flow feature in my app similar to mobikwik app cover flow

mobiwik app cover flow and with similar transaction.

I have already tried with Android CoverFlow widget library and few others. But nothing working as expected.

How i can achieve this type of view using ViewPager?


Solution

  • I have created my class ZoomOutPageTransformer,which is implementing PageTransformer and this set into the pager using setPageTransformer() method. Please check bellow ZoomOutPageTransformer.class -

    public class ZoomOutPageTransformer implements PageTransformer {
        private static float MIN_SCALE = 1f;
        private static final float MIN_ALPHA = 0.7f;
    
    
        public ZoomOutPageTransformer(boolean isZoomEnable) {
            if (isZoomEnable) {
                MIN_SCALE = 0.85f;
            } else {
                MIN_SCALE = 1f;
            }
        }
    
        public void transformPage(View view, float position) {
            int pageWidth = view.getWidth();
            int pageHeight = view.getHeight();
            float vertMargin = pageHeight * (1 - MIN_SCALE) / 2;
            float horzMargin = pageWidth * (1 - MIN_SCALE) / 2;
            view.setScaleX(MIN_SCALE);
            view.setScaleY(MIN_SCALE);
            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                view.setAlpha(MIN_ALPHA);
                view.setTranslationX(horzMargin - vertMargin / 2);
    
    
            } else if (position <= 1) { // [-1,1]
                // Modify the default slide transition to shrink the page as well
                float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
                vertMargin = pageHeight * (1 - scaleFactor) / 2;
                horzMargin = pageWidth * (1 - scaleFactor) / 2;
                if (position < 0) {
                    view.setTranslationX(horzMargin - vertMargin / 2);
                } else {
                    view.setTranslationX(-horzMargin + vertMargin / 2);
                }
    
                // Scale the page down (between MIN_SCALE and 1)
                view.setScaleX(scaleFactor);
                view.setScaleY(scaleFactor);
    
                // Fade the page relative to its size.
                view.setAlpha(MIN_ALPHA +
                        (scaleFactor - MIN_SCALE) /
                                (1 - MIN_SCALE) * (1 - MIN_ALPHA));
    
            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
                view.setAlpha(MIN_ALPHA);
                view.setTranslationX(-horzMargin + vertMargin / 2);
    
            }
        }
    }
    

    and in PagerActivity.java -

    public class PagerActivity extends Activity {
    
        ViewPager pager;
    
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
    
            pager = (ViewPager) findViewById(R.id.viewPager);
    //        mContainer.setViewPager(pager);
            PagerAdapter adapter = new MyPagerAdapter();
            pager.setPageTransformer(true, new ZoomOutPageTransformer(true));
            pager.setAdapter(adapter);
            //Necessary or the pager will only have one extra page to show
            // make this at least however many pages you can see
    //        pager.setOffscreenPageLimit(adapter.getCount());
            pager.setOffscreenPageLimit(3);
            //A little space between pages
            pager.setPageMargin((int) getResources().getDimension(R.dimen.dimen_20));
            //If hardware acceleration is enabled, you should also remove
            // clipping on the pager for its children.
            pager.setClipChildren(false);
        }
        //Nothing special about this adapter, just throwing up colored views for demo
        private class MyPagerAdapter extends PagerAdapter {
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                TextView view = new TextView(PagerActivity.this);
                view.setText("Item " + position);
                view.setGravity(Gravity.CENTER);
                view.setBackgroundColor(Color.argb(255, position * 50, position * 10, position * 50));
                container.addView(view);
                return view;
            }
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((View) object);
            }
            @Override
            public int getCount() {
                return 9;
            }
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return (view == object);
            }
        }
    }
    

    in main.xml -

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <FrameLayout
            android:id="@+id/pager_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:background="#CCC"
            android:clipChildren="false">
            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager"
                android:clipChildren="false"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:layout_marginLeft="@dimen/dimen_50"
                android:layout_marginRight="@dimen/dimen_50" />
        </FrameLayout>
    </RelativeLayout>
    

    it works for me.