Android ViewPager - Smooth Transition for this Design

Question

I can't really figure out the math to do smooth transition for the following design. Any help would be greatly appreciated :).

During transition, the pages are jumping up and down but I would like them to be smooth instead.

Design

Transition

Relavent ViewPage code:

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

    final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
    PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager());
    viewPager.setAdapter(pagerAdapter);
    viewPager.setOffscreenPageLimit(3);
    viewPager.setPageMargin(100);
    viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View page, float position) {
            int pageWidth = viewPager.getMeasuredWidth() - viewPager.getPaddingLeft() - viewPager.getPaddingRight();
            int pageHeight = viewPager.getHeight();
            int paddingLeft = viewPager.getPaddingLeft();
            float transformPos = (float) (page.getLeft() - (viewPager.getScrollX() + paddingLeft)) / pageWidth;

            final float normalizedposition = Math.abs(Math.abs(transformPos) - 1);
            page.setAlpha(normalizedposition + 0.5f);

            if (transformPos < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                page.setTranslationY(0);
            } else if (transformPos <= 1) { // [-1,1]
                page.setTranslationY(-pageHeight / 10);

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


        }
    });

}

Note: 'transformPos' is used to address this bug - https://code.google.com/p/android/issues/detail?id=64046

My ViewPager

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="260dp"
    android:layout_centerInParent="true"
    android:clipToPadding="false"
    android:paddingLeft="80dp"
    android:paddingRight="80dp"/>

Full Source - https://github.com/krishnaraj/ViewPagerSample

@MarkGilchrist When you swipe left /right, the transition is not smooth. — Krishnaraj, Sep 04 '15 at 03:38
Maybe you should upload your sample project to github, so it would be easier for people to check how not **smooth** it is — Derek Fung, Sep 04 '15 at 03:54

score 6 · Accepted Answer · answered Sep 04 '15 at 07:51

Try this

    viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View page, float position) {
            int pageWidth = viewPager.getMeasuredWidth() - viewPager.getPaddingLeft() - viewPager.getPaddingRight();
            int pageHeight = viewPager.getHeight();
            int paddingLeft = viewPager.getPaddingLeft();
            float transformPos = (float) (page.getLeft() - (viewPager.getScrollX() + paddingLeft)) / pageWidth;

            final float normalizedposition = Math.abs(Math.abs(transformPos) - 1);
            page.setAlpha(normalizedposition + 0.5f);

            int max = -pageHeight / 10;

            if (transformPos < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                page.setTranslationY(0);
            } else if (transformPos <= 1) { // [-1,1]
                page.setTranslationY(max * (1-Math.abs(transformPos)));

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


        }
    });

Works prefect! blipinsk's answer too works well but accepting this because of shorter code :) — Krishnaraj, Sep 04 '15 at 12:24

score 1 · Answer 2 · answered Sep 04 '15 at 07:55

1

Change your if to:

float upTranslation = -pageHeight / 10f;
if (transformPos < -1) {// [-Infinity,-1)
    page.setTranslationY(0);
} else if (transformPos < 0) { // [-1,0)
    float translationY = upTranslation * (transformPos + 1f);
    page.setTranslationY(translationY);
} else if (transformPos == 0) { // 0
    page.setTranslationY(upTranslation);
} else if (transformPos <= 1) { // (0,1]
    float translationY = upTranslation * (1f - transformPos);
    page.setTranslationY(translationY);
} else { // (1,+Infinity]
    page.setTranslationY(0);
}

answered Sep 04 '15 at 07:55

Bartek Lipinski

30,698
10
94
132

Works well but couldn't find any noticeable difference in the final transition between this and Derek Fung's answer. – Krishnaraj Sep 04 '15 at 12:26
1

It works exactly the same (my code is just probably a little bit more self-explanatory). To be honest I posted the answer without looking if any other correct answer came up since I started writing my answer. But as I can see Derek Fung posted his answer before me, so he deserves the credit :). Cheers! – Bartek Lipinski Sep 04 '15 at 13:02

Rohit Jagtap · Answer 3 · 2015-09-04T07:57:07.563

If you really not need the pageTransformer, use below code

    viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
    @Override
    public void transformPage(View page, float position) {
        if(position==1){

            int pageWidth = viewPager.getMeasuredWidth() - viewPager.getPaddingLeft() - viewPager.getPaddingRight();
            int pageHeight = viewPager.getHeight();
            int paddingLeft = viewPager.getPaddingLeft();
            float transformPos = (float) (page.getLeft() - (viewPager.getScrollX() + paddingLeft)) / pageWidth;

            final float normalizedposition = Math.abs(Math.abs(transformPos) - 1);
            page.setAlpha(normalizedposition + 0.5f);

            if (transformPos < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                page.setTranslationY(0);
            } else if (transformPos <= 1) { // [-1,1]
                page.setTranslationY(-pageHeight / 10);

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

and try again...

Ok, seems there is some misunderstanding. I actually need the center tab to be higher than the preview tabs ( see updated static image above ). — Krishnaraj, Sep 04 '15 at 07:48
Okay then in the method above you have position, just put if(position==1){} and move all the code from this method inside it, check the updated answer — Rohit Jagtap, Sep 04 '15 at 07:55

Android ViewPager - Smooth Transition for this Design

3 Answers3

Linked