CardStackView : Tinder like Swipeable CardView

0
3396
How to Create Tinder like swipeable card view for Android?
How to Create Tinder like swipeable card view for Android?

In my previous article we discuss about Tinder like SwipeView in Android which is a quit simple and today i came with another library on Tinder like UI which give you power to create Tinder like Swipeable CardView named as CardStackView .

Obviously you think when we have TinderShuffle library then whats new in CardStackView library ?

You can find out the answer when you go down. Let move on to implementation of CardStackView  Android library.

How to Create Tinder like Swipeable CardView?

1Gradle:

Firstly you need to add below code in your app gradle

dependencies {
    compile "com.yuyakaido.android:card-stack-view:${LatestVersion}"
}

And now i give the answer of your above question. See the features of this library:

2Manual Swipe

ManualSwipe

3Automatic Swipe

AutomaticSwipe

Custom animation is available when automatic swiping!

CardStackView#swipe(SwipeDirection, AnimatorSet)

4Move to Origin

MoveToOrigin

5Reverse

Reverse

CardStackView#reverse();

6StackFrom

Default Value Sample
Top StackFrom-Top
Bottom StackFrom-Bottom
<com.yuyakaido.android.cardstackview.CardStackView
    app:stackFrom="top"
    or
    app:stackFrom="bottom"/>
CardStackView#setStackFrom(StackFrom.Top);
or
CardStackView#setStackFrom(StackFrom.Bottom);

7VisibleCount

Default Value Sample
3 VisibleCount-3
4 VisibleCount-4
<com.yuyakaido.android.cardstackview.CardStackView
    app:visibleCount="3"
    or
    app:visibleCount="4"/>
CardStackView#setVisibleCount(3);
or
CardStackView#setVisibleCount(4);

8ElevationEnabled

Default Value Sample
true ElevationEnabled
false ElevationDisabled
<com.yuyakaido.android.cardstackview.CardStackView
    app:elevationEnabled="true"
    or
    app:elevationEnabled="false"/>
CardStackView#setElevationEnabled(true);
or
CardStackView#setElevationEnabled(false);

9TranslationDiff

The unit of TranslationDiff is dp.

Default Value Sample
8dp TranslationDiff-18
12dp TranslationDiff-12
16dp TranslationDiff-16
<com.yuyakaido.android.cardstackview.CardStackView
    app:translationDiff="12"/>
CardStackView#setTranslationDiff(12f);

10ScaleDiff

The range of ScaleDiff is 0.0 – 1.0.

Default Value Sample
0.02 ScaleDiff-2
0.1 ScaleDiff-10
<com.yuyakaido.android.cardstackview.CardStackView
    app:scaleDiff="0.02"/>
CardStackView#setScaleDiff(0.02f);

11Overlay

Value Sample
Left Overlay-Left
Right Overlay-Right
<com.yuyakaido.android.cardstackview.CardStackView
    app:leftOverlay="@layout/overlay_left"
    or
    app:rightOverlay="@layout/overlay_right"/>
CardStackView#setLeftOverlay(R.layout.overlay_left);
or
CardStackView#setRightOverlay(R.layout.overlay_right);

12SwipeEnabled

Default Value Sample
true SwipeEnabled
false SwipeDisabled
<com.yuyakaido.android.cardstackview.CardStackView
    app:swipeEnabled="true"
    or
    app:swipeEnabled="false"/>
CardStackView#setSwipeEnabled(true);
or
CardStackView#setSwipeEnabled(false);

13SwipeDirection

Default Value Sample
Freedom SwipeDirection-Freedom
Horizontal SwipeDirection-Horizontal
Vertical SwipeDirection-Vertical
<com.yuyakaido.android.cardstackview.CardStackView
    app:swipeDirection="freedom"
    or
    app:swipeDirection="horizontal"
    or
    app:swipeDirection="vertical"/>
CardStackView#setSwipeDirection(SwipeDirection.FREEDOM);
or
CardStackView#setSwipeDirection(SwipeDirection.HORIZONTAL);
or
CardStackView#setSwipeDirection(SwipeDirection.VERTICAL);

14SwipeThreshold

The range of SwipeThreshold is 0.0 – 1.0.

Default Value Sample
0.75 SwipeThreshold-75%
0.1 SwipeThreshold-10%
<com.yuyakaido.android.cardstackview.CardStackView
    app:swipeThreshold="0.75"/>
CardStackView#setSwipeThreshold(0.75f);

That’s it.

If you got any problem or confusion you can download demo project below or comment.

15Download

Please tell me which library you like most for Tinder Swipe effect : Tinder Shuffle or CardStackView

Share your thoughts

Loading Facebook Comments ...
Loading Disqus Comments ...