Why is the color transition animation wrong when ViewPager scroll left?

Question

I put a ViewPager with transparent background over another background view, and when the ViewPager scrolls, I change the background view's color with a smooth color transition, for example:

1. On page 1, the background is RED.
2. When ViewPager scrolls from page 1 to page 2, I replace the background with a LayerDrawable, RED on top, BLUE at the bottom.
3. During scroll, I reduced the alpha of top layer, showing a transition from RED to BLUE.
4. Finally, on page 2, after scrolling finishes, I change background to BLUE.

It works as expected when I scroll from left to right, but when I scroll left, it seems the bottom and up layers are reversed.

Here is my code:

private int[] colors = {Color.BLUE, Color.RED, Color.GREEN, Color.CYAN};
private int currentPage;
private LayerDrawable layersDrawable;
@Override
public void onPageScrollStateChanged(int state) {
    if(state==ViewPager.SCROLL_STATE_DRAGGING){

    }else if(state==ViewPager.SCROLL_STATE_IDLE){
        currentPage = pager.getCurrentItem();
        setBackground(new ColorDrawable(colors[currentPage%4]));
        layersDrawable = null;
    }
}
@Override
public void onPageScrolled(int pos, float positionOffset, int positionPixels) {
    if(positionOffset==0) return;
    if(layersDrawable==null){
        int bottomColor;
        Log.i("POSITION", currentPage+" "+pos);
        if(pos<currentPage){
            //scroll left
            bottomColor = colors[(currentPage+3)%4];
        }else{
            bottomColor = colors[(currentPage+1)%4];
        }
        ColorDrawable bottom = new ColorDrawable(bottomColor);
        ColorDrawable top = new ColorDrawable(colors[currentPage%4]);
        Log.i("COLOR", "TOP:"+colors[currentPage%4]);
        Drawable[] layers = {bottom, top};
        layersDrawable = new LayerDrawable(layers);
        setBackground(layersDrawable);
    }
    ColorDrawable top = (ColorDrawable)layersDrawable.getDrawable(1);
    top.setAlpha((int)(255*(1-positionOffset)));
}

This is really weird... Can you figure out what I did wrong?

Answer 1

It was stupid of me, I found out positionOffset is actually the percentage of page on the left shown, so when scrolling left,

top.setAlpha((int)(255*(1-positionOffset)));

should be changed to:

top.setAlpha((int)(255*positionOffset));