CODEWITHSUNDEEP
androidimageanimationandroid-viewpagerswipe
LuminiousAndroid
LuminiousAndroid

Reputation: 1577

Animation, swipe image over another image

How can I implement swipe of one image on another likewise the attached image.

In image one can see that background image is static, and user can able to swipe another image. Its a screenshot of housing.com app.

Can anyone help me in this. enter image description here Note: tried for viewpager, jazzyviewpager, Parallex view but no success

Upvotes: 1

Views: 479

Answers (2)

d.k.
d.k.

Reputation: 415

Use custom Viewpager(jazzy viewpager library with stack effect and disable zoomout functionality inside this) to acheive this.

Upvotes: 1

LuminiousAndroid
LuminiousAndroid

Reputation: 1577

So after so many days of search n implementations I got this exactly.

Steps to achieve: 1. Implement Viewpager. 2. User custom view pager with transition. 3. The most important one, Implement clipDrawable to clip drawable on upcoming page on view pager.

Here is the Scale transformation class uses clipdrawable : public class ScalePageTransformer implements PageTransformer { private static final float SCALE_FACTOR = 0.95f;

    private final ViewPager mViewPager;

    public ScalePageTransformer(ViewPager viewPager) {
        this.mViewPager = viewPager;
    }

    @Override
    public void transformPage(View page, float position){
        View mainLayout = page.findViewById(R.id.bg_rel);
        ClipDrawable clipDrawable = (ClipDrawable) mainLayout.getBackground();
        if (position <= 0){
            // apply zoom effect and offset translation only for pages to
            // the left
            //              final float transformValue = Math.abs(Math.abs(position) - 1) * (1.0f - SCALE_FACTOR) + SCALE_FACTOR;
            int pageWidth = mViewPager.getWidth();
            final float translateValue = position* -pageWidth;
            //              page.setScaleX(transformValue);
            //              page.setScaleY(transformValue);
            if (translateValue > -pageWidth){
                page.setTranslationX(translateValue);
            } else {
                page.setTranslationX(0);
            }
            clipDrawable.setLevel(10000);
        } else {
            //entering view
            int level = (int) ((1 - position) * 10000);
            clipDrawable.setLevel(level);
            mainLayout.setTranslationX(-1 * position * page.getWidth());
        }
    }
}

rel_bg: My main layout having drawables.

Hope it helps for somebody.

Upvotes: 0

Related Questions