CODEWITHSUNDEEP
androidandroid-viewpager
user2635088
user2635088

Reputation: 1618

Android Viewpager tinder like UI with 3D card stack appearance

I'm trying to create a tinder-like UI in android using the ViewPager.

I have looked at this library: https://github.com/kikoso/Swipeable-Cards, but I'd like to be able to see the previous card once I swipe right, hence the preference for a ViewPager.

The specific UI detail I am looking for is:

Stacking of images with the outline of the next view underneath the current view. I have been able to achieve the stacking of views through the ViewPager.PageTransformer interface, but I am unable to get the outline of the stack of the subsequent views inside the pager - the part that gives it a 3d look - like over here - card stacked on top of another card - http://i1.cdnds.net/14/38/300x522/friends-tinder-profiles-ross.jpg

Here is my pageTransform method

public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();

    if (position < -1) { // [-Infinity,-1)
        // This page is way off-screen to the left.
        view.setAlpha(0);

    } else if (position <= 0) { // [-1,0]
        // Use the default slide transition when moving to the left page
        view.setAlpha(1);
        view.setTranslationX(0);
        view.setScaleX(1);
        view.setScaleY(1);
        view.setRotation(90*(position));

    } else if (position < 1) { // (0,1]
        // Fade the page out.
        view.setAlpha(1);

        // Counteract the default slide transition
        view.setTranslationX(pageWidth * -position);

        view.setScaleX(1);
        view.setScaleY(1);

    } else if (position==1) {
        view.setAlpha(1);
//      view.setPadding(0,15,0,0);
    }
    else { // (1,+Infinity]
        // This page is way off-screen to the right.
        view.setAlpha(0);
    }
}

Is this possible with the viewPager?

Upvotes: 8

Views: 4603

Answers (3)

user8285830
user8285830

Reputation: 1

You can easily do this using the Android Library Truffle-Shuffle. You can add X number of cards with any xml content inside of the cards. https://github.com/intuit/truffle-shuffle

Upvotes: -1

user2635088
user2635088

Reputation: 1618

So this was the way that I set it up - its a little hacky because I manually trigger the transformPage method as mentioned in my comment here:

Android ViewPager manually call PageTransformer transformPage

BUT, it works!

@Override
public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();

    if (position < -1) { // [-Infinity,-1)
        // This page is way off-screen to the left.
        view.setAlpha(0);

    } else if (position <= 0) { // [-1,0]
        // Use the default slide transition when moving to the left page
        view.setAlpha(1);
        view.setTranslationX(0);
        view.setTranslationY(0);
        view.setScaleX(1);
        view.setScaleY(1);
        view.setRotation(90*(position));

    } else if (position < 1) { // (0,1]
        // Fade the page out.
        view.setAlpha(1);
        view.setRotation(0);

        // Counteract the default slide transition
        view.setTranslationX(pageWidth * -position);
        view.setTranslationY(50*position);

        view.setScaleX(Math.max(0.9f, (1 - position)));
        view.setScaleY(Math.max(0.9f, (1 - position)));
        CardView cv = (CardView)view.findViewById(R.id.card_view);
        cv.setPadding(0,0,0,0);

    } else if (position==1) {
        view.setAlpha(1);
        view.setTranslationX(pageWidth*-position);
        view.setTranslationY(50*position);

        view.setScaleX(Math.max(0.9f, (1 - position)));
        view.setScaleY(Math.max(0.9f, (1 - position)));

    }

    else { // (1,+Infinity]
        // This page is way off-screen to the right.
        view.setAlpha(1);
    }
}

Upvotes: 3

BurtK
BurtK

Reputation: 1036

You can not implement tinder effect with PageTransformer interface because the position value is just 1 axis value. You should have other values like touch point coordinates in x, y axis because tinder effect uses trigonometrical functions.

Upvotes: 0

Related Questions