Reverse drawing order at the half of ViewPager

Question

I have the following ViewPager:

I am trying to build a cover-flow-view. Which means that the position and the size of the views in the ViewPager change depending on touch input.

Everything works just fine with my implementation except for the drawing order of the views.

I can either call pager.setPageTransformer(false,PageTransformer()) which looks like in the image above, or setPageTransformer(true, PageTransformer()) which would reverse the drawing order.

The problem is, that i need the middle view(green) to be in front of its neighbours(blue,gray).

I read some posts about view.bringToFront() but I couldn't find a solution with that approach. A middle-view-to-front-solution would be cool, but this would only work if there are three views visible at a time. With five views the fifth view would still overlap the fourth view. (confusing, isn't it?^^)

By the way, my minSdk is 16 to 18 so elevation(Lollipop) is not possible.

Here is my current PageTransformer

class PageTransformer() : ViewPager.PageTransformer {
    val MIN_SCALE = 0.75f

    override fun transformPage(view: View, position: Float) {
        val pageWidth = view.width
        val pageHeight = view.height
        var vertMargin = pageHeight * (1 - MIN_SCALE) / 2
        var horzMargin = pageWidth * (1 - MIN_SCALE) / 2
        view.scaleX = MIN_SCALE
        view.scaleY = MIN_SCALE
        if (position < -2) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.translationX = horzMargin - vertMargin / 2
        } else if (position <= 2) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            val scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position))
            vertMargin = pageHeight * (1 - scaleFactor) / 2
            horzMargin = pageWidth * (1 - scaleFactor) / 2
            if (position < 0) {
                view.translationX = horzMargin - vertMargin / 2
            } else {
                view.translationX = -horzMargin + vertMargin / 2
            }
            // Scale the page down (between MIN_SCALE and 1)
            view.scaleX = scaleFactor
            view.scaleY = scaleFactor
            view.rotationY = position * -30
        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.translationX = -horzMargin + vertMargin / 2
        }
    }
}

Summing this up, I need a ViewPager which reverses its drawing order after the current Item.

Note: I have already tried every available library, but nothing worked.

I hope there is a genius who can help me :)

Can you a pencil sketch of whats your need? I don't quite understand it — Mani, Jul 30 '17 at 02:24
the gray view overlaps the green one bevause drawing order is left to right. i want a middle-to-side order. — Appyx, Jul 30 '17 at 11:09

score 1 · Answer 1 · answered Nov 03 '17 at 15:31

you can overwrite the getChildDrawingOrder of the viewpager class: Like so

@Override
protected int getChildDrawingOrder (int childCount, int i) {
    int j = getCurrentItem ();
    if (i == j) {
        return childCount - 1;
    }

    if (i == childCount - 1) {
        return j;
    }

    if (j == 0) {
        if (i == 1) {
            i = 2;
        } else if (i == 2) {
            i = 1;
        }
    }

    return super.getChildDrawingOrder (childCount, i);
}

Reverse drawing order at the half of ViewPager

1 Answers1