Tinder Like Swipeable Card View For Android

Great UI is always appreciated in the real world. Tinder with its amazing concept just didn’t stand up because of the concept. The UI inside their application made users engaged. A smooth user-friendly concept, where only a swipe of a card in a particular direction does all the work. The satisfying car swipe engages the users more as it seems infinite. So, we have here a similar card view design for your android project. Swipeable Card View makes it able to achieve the interface of the tinder.

Card views are always a great alternative for android development. There are multiple libraries and codes available to help you with different designs and functionality. Similarly, swipeable card view offers an awesome card UI for your project. Not only it offers to achieve the card swipe of tinder but also has a lot of customization. And, if you’re looking for a tinder interface, you might not want to miss out on this library. The library really proves to stand out among others with all its features. In addition, it offers a variety of customization options for the developers.

Moreover, the Swipeable card is an amazing concept. Not only for tinder but it can boost the user interface in different other aspects. So, this library has made the process of applying the swipe card effect to your projects. You can get a short preview of how it works. However, we will cover all the topics of the library for developers trying to implement the library. Now, let’s move onto the topic, undoubtedly, I can assure you this will be worth your time.

Overview

Here, you can see a glimpse of the projects. An easy swipe of cards in different directions with different other features available. All those animations are customizable, and by default are soothing and outputs a great user interface.

Setup

To set up the library, you can get the code below and apply it.

val cardStackView = findViewById<CardStackView>(R.id.card_stack_view)
cardStackView.layoutManager = CardStackLayoutManager()
cardStackView.adapter = CardStackAdapter()

Features

This offers a variety of features, so it is a bit long. Now, let’s get started with the features. Also, we will cover the customizable option for all the features. So, don’t miss out on this portion.

Manual Swipe

Automatic Swipe

CardStackView.swipe()

You can set custom swipe animation.

val setting = SwipeAnimationSetting.Builder()
        .setDirection(Direction.Right)
        .setDuration(Duration.Normal.duration)
        .setInterpolator(AccelerateInterpolator())
        .build()
CardStackLayoutManager.setSwipeAnimationSetting(setting)
CardStackView.swipe()

Cancel

Manual swipe is canceled when the card is dragged less than threshold.

Rewind

CardStackView.rewind()

You can set custom rewind animation.

val setting = RewindAnimationSetting.Builder()
        .setDirection(Direction.Bottom)
        .setDuration(Duration.Normal.duration)
        .setInterpolator(DecelerateInterpolator())
        .build()
CardStackLayoutManager.setRewindAnimationSetting(setting)
CardStackView.rewind()

Overlay View

Value	Sample
Left
Right

Put overlay view in your item layout of RecyclerView.

<FrameLayout
    android:id="@+id/left_overlay"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Set your left overlay -->

</FrameLayout>

Value	Layout ID
Left	left_overlay
Right	right_overlay
Top	top_overlay
Bottom	bottom_overlay

Overlay Interpolator

You can set your own interpolator to define the rate of change of alpha.

CardStackLayoutManager.setOverlayInterpolator(LinearInterpolator())

Paging

You can implement paging by using the following two ways.

1. Use DiffUtil.

2. Call RecyclerView.Adapter.notifyItemRangeInserted manually.

Caution

You should NOT call RecyclerView.Adapter.notifyDataSetChanged for paging because this method will reset top position and maybe occur a performance issue.

Reloading

You can implement reloading by calling RecyclerView.Adapter.notifyDataSetChanged

Stack From

Default	Value	Sample
✅	None
	Top
	Bottom
	Left
	Right

CardStackLayoutManager.setStackFrom(StackFrom.None)

Visible Count

Default	Value	Sample
	2
✅	3
	4

CardStackLayoutManager.setVisibleCount(3)

Translation Interval

Default	Value	Sample
	4dp
✅	8dp
	12dp

CardStackLayoutManager.setTranslationInterval(8.0f)

Scale Interval

Default	Value	Sample
✅	95%
	90%

CardStackLayoutManager.setScaleInterval(0.95f)

Max Degree

Default	Value	Sample
✅	20°
	0°

CardStackLayoutManager.setMaxDegree(20.0f)

Swipe Direction

Default	Value	Sample
✅	Horizontal
	Vertical
	Freedom

CardStackLayoutManager.setDirections(Direction.HORIZONTAL)

Swipe Threshold

Default	Value	Sample
✅	30%
	10%

CardStackLayoutManager.setSwipeThreshold(0.3f)

Swipe Restriction

CanScrollHorizontal	CanScrollVertical	Sample
true	true
true	false
false	true
false	false

CardStackLayoutManager.setCanScrollHorizontal(true)

CardStackLayoutManager.setCanScrollVertical(true)

Swipeable Method

Default	Value	Sample
✅	AutomaticAndManual
	Automatic
	Manual
	None

 

CardStackLayoutManager.setSwipeableMethod(SwipeableMethod.AutomaticAndManual)

I Hope, the description of the feature made it easy for you. All the customization options are mentioned in the same box. Also, default options were checked marked to keep it easy. You will be able to customize the feature with available values following the codes provide below.

Public Interfaces

This will help you to get knowledge about different methods available. And, also help to understand the library.

Basic usages

Method	Description
CardStackView.swipe()	You can swipe once by calling this method.
CardStackView.rewind()	You can rewind once by calling this method.
CardStackLayoutManager.getTopPosition()	You can get position displayed on top.
CardStackLayoutManager.setStackFrom (StackFrom stackFrom)	You can set StackFrom.
CardStackLayoutManager.setTranslationInterval (float translationInterval)	You can set TranslationInterval.
CardStackLayoutManager.setScaleInterval (float scaleInterval)	You can set ScaleInterval.
CardStackLayoutManager.setSwipeThreshold (float swipeThreshold)	You can set SwipeThreshold.
CardStackLayoutManager.setMaxDegree (float maxDegree)	You can set MaxDegree.
CardStackLayoutManager.setDirections (List directions)	You can set Direction.
CardStackLayoutManager.setCanScrollHorizontal (boolean canScrollHorizontal)	You can set CanScrollHorizontal.
CardStackLayoutManager.setCanScrollVertical (boolean canScrollVertical)	You can set CanScrollVertical.
CardStackLayoutManager.setSwipeAnimationSetting (SwipeAnimationSetting swipeAnimationSetting)	You can set SwipeAnimationSetting.
CardStackLayoutManager.setRewindAnimationSetting (RewindAnimationSetting rewindAnimationSetting)	You can set RewindAnimationSetting.

Advanced usages

Method	Description
CardStackView.smoothScrollToPosition(int position)	You can scroll any position with animation.
CardStackView.scrollToPosition(int position)	You can scroll any position without animation.

Callbacks

Method	Description
CardStackListener.onCardDragging (Direction direction, float ratio)	This method is called while the card is dragging.
CardStackListener.onCardSwiped (Direction direction)	This method is called when the card is swiped.
CardStackListener.onCardRewound()	This method is called when the card is rewinded.
CardStackListener.onCardCanceled()	This method is called when the card is dragged less than the threshold.
CardStackListener.onCardAppeared (View view, int position)	This method is called when the card appeared.
CardStackListener.onCardDisappeared (View view, int position)	This method is called when the card disappeared.

Migration Guide

Migration of Features

1.x	2.x
Move to Origin	Cancel
Reverse	Rewind
ElevationEnabled	Stack From
TranslationDiff	Translation Interval
ScaleDiff	Scale Interval
SwipeEnabled	Swipe Restriction

Migration of Callbacks

1.x	2.x
CardStackView.CardEventListener	CardStackListener
onCardDragging(float percentX, float percentY)	onCardDragging(Direction direction, float ratio)
onCardSwiped(SwipeDirection direction)	onCardSwiped(Direction direction)
onCardReversed()	onCardRewound()
onCardMovedToOrigin()	onCardCanceled()
onCardClicked(int index)	This method is no longer provided. Please implement in your item of RecyclerView.

Installation

The installation also is fairly simple. Just apply the dependencies provided below.

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

Download complete project source code from GitHub