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.

score 1 · Answer 1 · answered Mar 14 '17 at 09:51

1

here is tip for your problem.

Take a frame layout and place a Image view and then view Pager on it. Now prepare a Layout which is having a transparent circle at its center.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>
</FrameLayout>
</LinearLayout>

Now you can change the Image in the main layout on by using the View Pager's addOnPageChangeListener and on scrolling you can get the desired effect.

Use the ViewPager.onPageChangeListener:

viewPager.setOnPageChangeListener(new OnPageChangeListener() {
public void onPageScrollStateChanged(int state) {}
public void onPageScrolled(int position, float positionOffset, int      positionOffsetPixels) {}

public void onPageSelected(int position) {
    // Change your Image here.
}
});

answered Mar 14 '17 at 09:51

jagteshwar751

79
8

Make note that he would also have to use a Layer-List shape drawable for the ImageView to achieve the desired Circle in the center, I would reference the OP to this source. [http://stackoverflow.com/questions/21613308/how-to-draw-a-circle-inside-a-circle-using-android-xml-shapes] – Bradley Wilson Mar 14 '17 at 10:13
I've implemented the transparent circle part, but I fail to implement the smooth transition of background images: onPageSelected won't work because it's a discrete operation you must actually go to the page do get the callback called. What if you scroll a little bit left and you have the half of the circle of the second page visible on your screen as well? – mdavid Mar 14 '17 at 10:46
You can implement the image change part in the onPageScrolled funtion. – jagteshwar751 Mar 14 '17 at 10:57
so you're suggesting to somehow detect if other circle from another page is visible and draw corresponding bitmap? – mdavid Mar 14 '17 at 14:44
I must handle the right splitting of each image in onDraw() for being able to display the right portions of each image for each circle. I just don't know how to handle it – mdavid Mar 14 '17 at 14:45
You can use android DiscreteScrollView library and sync it with view pager to get the desired output. Use DiscreteScrollView in place of ImageView. https://github.com/yarolegovich/DiscreteScrollView – jagteshwar751 Mar 16 '17 at 10:02

Cheticamp · Accepted Answer · 2017-03-15T14:04:59.617

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.

edited Mar 15 '17 at 14:04

answered Mar 15 '17 at 01:33

Cheticamp

50,205
8
64
109

Thanks! It's a very elegant solution. Only the third image isn't being displayed, I'm figuring it out. – mdavid Mar 15 '17 at 20:07

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

2 Answers2