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.

Rump

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..

Taxicab

Yes I do have studied about the OnPageChangeListner .But I dont know how to deal with the next page's view from there.It would be a great help if you could give me some link or an example about this.As to how I set the items value from OnPageScrolled.Thanks – Rump

yes, it's hard to synchronize the positionOffset's value to that ListView because it inside a Fragment, i'm sorry i have no idea for how to achieve this. But i've done an enhance ViewPager before, you can figure out how to deal with positionOffset in the "Indicator Test" snippet, just download my sample apk then examine that. – Taxicab

It's not clear the exact behavior of the animation you're trying to do(a better explanation than that image would be nice). Anyway have a look at this code github.com/luksprog/DroidPlayground/blob/… (what I understood from the question). – Faucet

@Luksprog thank you for reply me, i've appended a gif to explain this question, please check it. :-) – Taxicab

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).

Absher

it was appreciatively to tell there have PageTransformer we can use, i believe that was the key point to achieve this animation. According to the original animation, it only happen with the coming page, whatever the direction how to change, the starting page never feel. I've paid quite test in transformPage(), but i couldn't figure out how to recognizing which page is starting page and which page is coming page, especially the swipe direction change frequently. please help me with this, thank you so much. – Taxicab