How to make the pages of a ViewPager rotate around a common axis (wheel) upon replacement [Android Studio]?

  • Replies:0
  • OpenNot stickiedUnanswered
  • Forum posts: 2

Jan 23, 2019, 6:07:02 PM via Website

I have been trying to recreate a design from an iOS app that uses the iCarousel wheel effect (ht tps:// imgur .co m/a/53jK6Ls).

The idea is to allow kids to change between different scenarios, each containing different animals.

The animals are represented on a round surface and, as the kids swipe right or left, the globe rotates with the old animals fading out and the new ones fading in (ht tps:// imgur .co m/a/JvusFCu).

Toxic Bakery's ViewPagerTransforms library has an effect called Rotate Down that should help a lot with this, but I have been struggling with setting the right numbers for it to work as I need.

The library can be found here: ht tps:// github .co m/ToxicBakery/ViewPagerTransforms

Below are the original settings, which make each page of the ViewPager kind of roll in independently, instead of rotating around a common axis as if all pages were on a wheel.

public class CustomRotateDownTransformer extends RotateDownTransformer {

private static final float ROT_MOD = -15f;

protected void onTransform(View view, float position) {
    final float width = view.getWidth();
    final float height = view.getHeight();
    final float rotation = ROT_MOD * position * -1.25f;

    view.setPivotX(width * 0.5f);


I've tried the CursorWheelLayout (ht tps:// github .co m/BCsl/CursorWheelLayout), but there are many performance issues while working with images. Cellphones and old tablets run out of memory and crash, while newer devices get super slow.

Any ideas of how to reinvent the wheel hehe or any suggestions on different approaches?

PS: As I'm new here, you must remove the space from the URLs for them to work.


Be the first to answer