Android viewpager with DepthPageTransformer z-index issue

Question

I implemented a viewpager with a DepthPageTransformer , in pages I have some inputs ( radio , check boxs , select options ... ). It works fine except one wired bug: Sometimes when I click on position(x,y) on a page P1 the input in that position of page P2 gets triggered.

P1:

page P1

P2( the one after P1):

P2 the page after p1

Now when I click on this position on page P1 :

enter image description here

I get the select options displayed of page P2:

enter image description here

It's similar to z-index problem in web development.

The code of the DepthPage Transformer is the same as in the documentation : http://developer.android.com/training/animation/screen-slide.html#pagetransformer.

public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
@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.
        view.setAlpha(0);

    } else if (position <= 0) { // [-1,0]
        // Use the default slide transition when moving to the left page
        view.setAlpha(1);
        view.setTranslationX(0);
        view.setScaleX(1);
        view.setScaleY(1);

    } else if (position <= 1) { // (0,1]
        // Fade the page out.
        view.setAlpha(1 - position);

        // Counteract the default slide transition
        view.setTranslationX(pageWidth * -position);

        // Scale the page down (between MIN_SCALE and 1)
        float scaleFactor = MIN_SCALE
                + (1 - MIN_SCALE) * (1 - Math.abs(position));
        view.setScaleX(scaleFactor);
        view.setScaleY(scaleFactor);

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

Any idea on how to solve this overlapping problem ?

score 3 · Accepted Answer · answered Mar 04 '15 at 12:39

Try this:

public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
@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.
    view.setAlpha(0);

} else if (position <= 0) { // [-1,0]
    // Use the default slide transition when moving to the left page
    view.setAlpha(1);
    view.setTranslationX(0);
    view.setScaleX(1);
    view.setScaleY(1);
    // -------- THIS LINE ---
    view.bringToFront();
    // -------- THIS LINE ---

} else if (position <= 1) { // (0,1]
    // Fade the page out.
    view.setAlpha(1 - position);

    // Counteract the default slide transition
    view.setTranslationX(pageWidth * -position);

    // Scale the page down (between MIN_SCALE and 1)
    float scaleFactor = MIN_SCALE
            + (1 - MIN_SCALE) * (1 - Math.abs(position));
    view.setScaleX(scaleFactor);
    view.setScaleY(scaleFactor);

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

I'll try it and reprt back to you ASP , thank you for taking the time and answering :) — zizoujab, Mar 12 '15 at 10:27
`ViewPager` is depricated now . The only I did here was to replace it with new ViewPager2 — CodeToLife, Jul 31 '22 at 11:20

score 2 · Answer 2 · answered Sep 17 '15 at 09:32

2

You just need to reverse draw order:

        mPager.setPageTransformer(true, new DepthPageTransformer());

In any case you can play with code sample here

answered Sep 17 '15 at 09:32

Dzmitry Lukoits

97
7

Bingo! Best solution :) – Marchy Jul 16 '17 at 01:01

score 1 · Answer 3 · answered Apr 23 '15 at 06:24

1

Other solution is use OnPageChangeListener:

pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
    @Override public void onPageSelected(final int position) {
        pager.postDelayed(new Runnable() {
            @Override
            public void run() {
                pagerAdapter.getItem(position).getView().bringToFront();
            }
        }, 300);
    }
    @Override public void onPageScrollStateChanged(int state) { }
});

is more efficient.

answered Apr 23 '15 at 06:24

Kenumir

664
8
24

how this is more efficient than the first one ? – zizoujab Apr 23 '15 at 07:53
In first way view.bringToFront() calls every time when transformPage is invoked. This may be 10 times or more. I tested this on android 4.1 and sometimes layout is blinking. When call in onPageSelected looks ok. – Kenumir Apr 27 '15 at 08:37

Android viewpager with DepthPageTransformer z-index issue

3 Answers3

Linked