Author: Nick Bradbury

A recent addition I made to the Reader in WordPress for Android is the ability to swipe through articles, which is a pretty standard thing on Android thanks to the ViewPager.

But after using it a while, I decided I wasn’t happy with the default swipe animation, so I created a custom PageTransformer to provide a different one.

I then added the ability to swipe through photos in an article, and again I wasn’t happy with the default animation. Rather than create another PageTransformer, I changed the one I’d already coded so it could provide a number of different animations.

Here’s a video demo:

The source code for this custom PageTransformer, which is part of the open source WordPress for Android app, is below.

[code language=”java” collapse=”false”]
package org.wordpress.android.ui.reader;

import android.support.v4.view.ViewPager;
import android.view.View;

/*
* ViewPager transformation animation invoked when a visible/attached page is scrolled – before
* changing this, first see https://code.google.com/p/android/issues/detail?id=58918#c5
* tl;dr make sure to remove X translation when a page is no longer fully visible
*
* Usage: viewPager.setPageTransformer(false, new ReaderViewPagerTransformer(TransformType.FLOW));
*/
class ReaderViewPagerTransformer implements ViewPager.PageTransformer {
static enum TransformType {
FLOW,
DEPTH,
ZOOM,
SLIDE_OVER
}
private final TransformType mTransformType;

ReaderViewPagerTransformer(TransformType transformType) {
mTransformType = transformType;
}

private static final float MIN_SCALE_DEPTH = 0.75f;
private static final float MIN_SCALE_ZOOM = 0.85f;
private static final float MIN_ALPHA_ZOOM = 0.5f;
private static final float SCALE_FACTOR_SLIDE = 0.85f;
private static final float MIN_ALPHA_SLIDE = 0.35f;

public void transformPage(View page, float position) {
final float alpha;
final float scale;
final float translationX;

switch (mTransformType) {
case FLOW:
page.setRotationY(position * -30f);
return;

case SLIDE_OVER:
if (position < 0 && position > -1) {
// this is the page to the left
scale = Math.abs(Math.abs(position) – 1) * (1.0f – SCALE_FACTOR_SLIDE) + SCALE_FACTOR_SLIDE;
alpha = Math.max(MIN_ALPHA_SLIDE, 1 – Math.abs(position));
int pageWidth = page.getWidth();
float translateValue = position * -pageWidth;
if (translateValue > -pageWidth) {
translationX = translateValue;
} else {
translationX = 0;
}
} else {
alpha = 1;
scale = 1;
translationX = 0;
}
break;

case DEPTH:
if (position > 0 && position < 1) {
// moving to the right
alpha = (1 – position);
scale = MIN_SCALE_DEPTH + (1 – MIN_SCALE_DEPTH) * (1 – Math.abs(position));
translationX = (page.getWidth() * -position);
} else {
// use default for all other cases
alpha = 1;
scale = 1;
translationX = 0;
}
break;

case ZOOM:
if (position >= -1 && position <= 1) {
scale = Math.max(MIN_SCALE_ZOOM, 1 – Math.abs(position));
alpha = MIN_ALPHA_ZOOM +
(scale – MIN_SCALE_ZOOM) / (1 – MIN_SCALE_ZOOM) * (1 – MIN_ALPHA_ZOOM);
float vMargin = page.getHeight() * (1 – scale) / 2;
float hMargin = page.getWidth() * (1 – scale) / 2;
if (position < 0) {
translationX = (hMargin – vMargin / 2);
} else {
translationX = (-hMargin + vMargin / 2);
}
} else {
alpha = 1;
scale = 1;
translationX = 0;
}
break;

default:
return;
}

page.setAlpha(alpha);
page.setTranslationX(translationX);
page.setScaleX(scale);
page.setScaleY(scale);
}
}
[/code]