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?
Gradle:
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:
Manual Swipe

Automatic Swipe

Custom animation is available when automatic swiping!
[tmh_article_ads]
CardStackView#swipe(SwipeDirection, AnimatorSet)
Move to Origin

Reverse

CardStackView#reverse();
StackFrom
| Default | Value | Sample |
|---|---|---|
| ✅ | Top | ![]() |
| Bottom | ![]() |
<com.yuyakaido.android.cardstackview.CardStackView
app:stackFrom="top"
or
app:stackFrom="bottom"/>
CardStackView#setStackFrom(StackFrom.Top); or CardStackView#setStackFrom(StackFrom.Bottom);
VisibleCount
| Default | Value | Sample |
|---|---|---|
| ✅ | 3 | ![]() |
| 4 | ![]() |
<com.yuyakaido.android.cardstackview.CardStackView
app:visibleCount="3"
or
app:visibleCount="4"/>
CardStackView#setVisibleCount(3); or CardStackView#setVisibleCount(4);
ElevationEnabled
| Default | Value | Sample |
|---|---|---|
| ✅ | true | ![]() |
| false | ![]() |
<com.yuyakaido.android.cardstackview.CardStackView
app:elevationEnabled="true"
or
app:elevationEnabled="false"/>
CardStackView#setElevationEnabled(true); or CardStackView#setElevationEnabled(false);
TranslationDiff
The unit of TranslationDiff is dp.
| Default | Value | Sample |
|---|---|---|
| 8dp | ![]() |
|
| ✅ | 12dp | ![]() |
| 16dp | ![]() |
<com.yuyakaido.android.cardstackview.CardStackView
app:translationDiff="12"/>
CardStackView#setTranslationDiff(12f);
ScaleDiff
The range of ScaleDiff is 0.0 – 1.0.
| Default | Value | Sample |
|---|---|---|
| ✅ | 0.02 | ![]() |
| 0.1 | ![]() |
<com.yuyakaido.android.cardstackview.CardStackView
app:scaleDiff="0.02"/>
CardStackView#setScaleDiff(0.02f);
Overlay
| Value | Sample |
|---|---|
| Left | ![]() |
| 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);
SwipeEnabled
| Default | Value | Sample |
|---|---|---|
| ✅ | true | ![]() |
| false | ![]() |
<com.yuyakaido.android.cardstackview.CardStackView
app:swipeEnabled="true"
or
app:swipeEnabled="false"/>
CardStackView#setSwipeEnabled(true); or CardStackView#setSwipeEnabled(false);
SwipeDirection
| Default | Value | Sample |
|---|---|---|
| ✅ | Freedom | ![]() |
| Horizontal | ![]() |
|
| 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);
SwipeThreshold
The range of SwipeThreshold is 0.0 – 1.0.
| Default | Value | Sample |
|---|---|---|
| ✅ | 0.75 | ![]() |
| 0.1 | ![]() |
<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.
Download
Please tell me which library you like most for Tinder Swipe effect : Tinder Shuffle or CardStackView





















Share your thoughts