How to control viewPages pages from another page

Question

I have a ViewPager with 3 pages with listView in each page. I want to animate listView in a way that when user swipes horizontally for next page the items of listView should come according to the width of next page.

i.e The first item should be pushed in completely ,second should be visible half ,thirst should be visible half of the second and so on.

This type of animation is already in mi3 xiamo for contacts list.

In above image I am swiping in the right direction.Note the 'Recent' list items visibility.

It would be a great help if someone could help me doing this animation.Please share some links or hints on ListView animation according to page change in ViewPager.

Answer 1

Have you ever studied the OnPageChangeListener.onPageScrolled(int position, float positionOffset) method which used as ViewPager's swipe listener? You can do something with positionOffset's value, its a percentage value that from 0 to 1 or reversal, informing us how much body of the coming page displayed, deal with the "Recent Call" List item by that value, set their left-axis in getView() method.

------------------ Update 1 in 2014-10-03 ------------------

I've been try to accomplish this effect, but I can't get that animation work in this time. I already make that ListView informed about the swiping offset (delta) and do whatever I can for their items, it looks going to close the effect we wanted. But the very complicate part is we must figure out how to compatible with swiping or fling by finger and directly switching by method.

I'm try three days to seeking the rule of ViewPager's, checking ViewPager, and ListView's source either, but doesn't return from positive. So I push my project to GitHub.

------------------ Update 2 in 2014-10-04 ------------------

Following GIF would explain the animation exactly.

------------------ Update 3 in 2014-10-07 ------------------

Alright, it appeared I'm failed to fully reproduce this animation. To be a valuable ending, I made my project work at least, also do my best to approaching the original effect. Check my first Update's GitHub project to take the whole work..

Answer 2

You should use a PageTransformer to apply a trasformation to each page of the ViewPager while swiping. The basics are covered in the Android Developer Training.

Below some code that implements what you need in a very simple way:

public class SwipeAnimationActivity extends Activity {

    private static final String[] COUNTRIES = new String[]{
            "Belgium", "France", "Italy", "Germany", "Spain",
            "Austria", "Russia", "Poland", "Croatia", "Greece",
            "Ukraine",
    };

    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_swipe_animation);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        viewPager.setAdapter(createPagerAdapter());
        viewPager.setPageTransformer(false, createPageTransformer());
    }

    private FragmentPagerAdapter createPagerAdapter() {
        return new FragmentPagerAdapter(getFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                ListFragment listFragment = new ListFragment();
                listFragment.setListAdapter(createListAdapter());
                return listFragment;
            }

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

    private ArrayAdapter<String> createListAdapter() {
        return new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, COUNTRIES);
    }

    private ViewPager.PageTransformer createPageTransformer() {
        return new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View page, float position) {
                ListView listView = (ListView) page.findViewById(android.R.id.list);
                int childCount = listView.getChildCount();
                float offset = .5f * listView.getWidth();
                for (int i = 0; i < childCount; i++) {
                    View childView = listView.getChildAt(i);
                    childView.setTranslationX(i * offset * position);
                }
            }
        };
    }

}

You can easily tweak the transformPage(View page, float position) to achieve the effect you need (perhaps using interpolators to enforce some kind of easing for the animation).