Moving view items using ViewPager.PageTransformer()

Question

I'm working on an intro on my app. When it first launches, you should see a card in the middle of the screen. When you move the viewpager page to the next position (from 1 to 2), that card should animate down and to the left off the screen.

I did a bunch of searching and came to the conclusion that the PageTransformer is where I need to be looking.

The problem is that I can't really find any docs on the pageTransformer other than working with transition animations which I'm not trying to do.

Can anybody point me to a good example or tutorial for what I'm trying to accomplish OR does anybody have a better option than pageTransformer?

I can get the element to move, but I can't figure out where the starting position is coming from (if I do a setX before setting the transformer, it's seemingly ignored).

Here's what I have in code:

   package com.example.myapplication.app;

import android.app.Activity;
import android.graphics.Point;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.*;
import android.view.animation.LinearInterpolator;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;


public class MainActivity extends ActionBarActivity {

    private static final int NUM_PAGES = 5;

    View card1;

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

        RelativeLayout papa = (RelativeLayout) findViewById(R.id.mainLayout);
        card1 = getLayoutInflater().inflate(R.layout.small_card, papa, false);

        papa.addView(card1);

        ViewPager pager = (ViewPager) findViewById(R.id.pager);
        pager.setAdapter(new ScreenSlidePagerAdapter(getSupportFragmentManager()));
        pager.setPageTransformer(true, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View view, float position) {
                int pageWidth = view.getWidth();

                if (position <= -1) { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                } else if (position <= 1) { // [-1,1]
                    card1.setTranslationX(-(position) * (pageWidth + card1.getWidth()));

                } else { // (1,+Infinity]
                    // This page is way off-screen to the right.
                }
            }
        });

        pager.setCurrentItem(1);
    }

    private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
        public ScreenSlidePagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return new ViewPagerFragment();
        }

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

Do you want the card to remain on the page after user has scrolled the page? — user3806339
I want it to go from the center of the screen towards the bottom left, ending off screen — Psest328
You can add animation on the card using pagetransformer. Here is an example that I have found: medium.com/@BashaChris/…. They show different translation been attached to different views in the page — user3806339

Yvan RAJAONARIVONY Yvan RAJAONARIVONY · Accepted Answer · 2014-12-17T15:09:08

-4

votes

Try this library. It should do it easily. https://github.com/rajyvan/Android-EasyTransformPager

Moving view items using ViewPager.PageTransformer()

1 Answers