ViewPager page curl

Question

simple question, is there ViewPager.PageTransformer that animates a page curl effect?

I've been looking everywhere, but I couldn't find it and wouldn't really know how to implement it myself...

Thanks in advance, Cédric

Answer 1

I think @Cédric was right — it's probably not worth it.

So I managed to get this working, but there's a lot of ugliness in there.

• There's some duct tape in the software architecture. Because page transformers only work on views, the app depends on using a custom layout that can handle drawing the page curl. So the transformer looks like this:

  public static class PageCurlPageTransformer implements PageTransformer {
  
      @Override
      public void transformPage(View page, float position) {
  
          Log.d(TAG, "transformPage, position = " + position + ", page = " + page.getTag(R.id.viewpager));
          if (page instanceof PageCurl) {
              if (position > -1.0F && position < 1.0F) {
                  // hold the page steady and let the views do the work
                  page.setTranslationX(-position * page.getWidth());
              } else {
                  page.setTranslationX(0.0F);
              }
              if (position <= 1.0F && position >= -1.0F) {
                  ((PageCurl) page).setCurlFactor(position);
              }
          }
      }
  

  }

• To get a realistic page-turn reveal, you have to use Canvas.clipPath. I had trouble getting this to clip to the actual path when testing on an emulator. I had to resort to testing on the device to see clipPath work correctly. Even turning off hardware acceleration didn't work on the emulator. This gives me low confidence that this will look right on all devices all the time.

• I just drew the curling corner with dispatchDraw in the custom layout. That's probably not the best place to do it. If I were taking more time, I would probably have a special decor view in the view pager and have that draw the curl.

• You might notice that the paging in reverse is faster than paging forward. You might not like the animation speed in either forward or reverse. Too bad — ViewPager doesn't have any methods to tweak the fling speeds, so you get what you get. This is yet another limitation of using ViewPager for this sort of thing.

You can look at my project as a proof-of-concept that you can indeed get a page curl to work with a view pager and a page transformer. Hopefully this will give you what you need to implement it in your project.

Project is here: https://github.com/klarson2/PageCurlWithPageTransformer

Cheers