How to implement android view pager with relaying background images for each page?

Question

Please look through the following view pager: View Pager with relaying background images

How can I implement this. I've tried to extend ViewPager and override onDraw() but I fail to achieve the behavior observed in the gif.

I've implemented the view with transparent circle which is being scrolled over the background. My main problem is the drawing part of the background images: smooth transition, cases when half of the circle of the other page is also visible when page is slightly being scrolled left or right, etc.

Answer 1

Update: The example project is here on GitHub.

You can implement what you are looking for by using the ClipDrawable class. Each image is placed into an ImageView within the CoordinatorLayout stacked one upon the other. By using the ViewPager callback methods, you can control how much of each ClipDrawable is shown based on the offset reported by the ViewPager.

Here are some screen shots of moving through three pages in a sample project. I did not implement the moving circle, but I think you have that figured out.

I hope this is what you are looking for.

Demo here.