Skip to content

📱Tinder like swipeable card view for Android

License

Notifications You must be signed in to change notification settings

jens-muenker/CardStackView

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Logo

Overview

This repository is a fork of CardStackView. I fixed some bugs, updated the dependencies and gradle, and converted the code to Kotlin. In addition, in the changelogs you can see all other features I added.

Example

Usage

  1. Include the library as a local library project in your build.gradle:

    allprojects {
    	repositories {
    		...
    		maven { url 'https://jitpack.io' }
    	}
    }
    
    ...
    
    dependencies {
            implementation 'com.github.jens-muenker:CardStackView:3.0.0'
    }
    
  2. Add a CardStackView to your layout

    <com.yuyakaido.android.cardstackview.CardStackView
                android:id="@+id/card_stack_view"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />
  3. Implement an adapter for your stack view. This should be a (RecyclerView.Adapter). There is a Sample CardStackAdapter in this project. You may also want to use a ListAdapter for less boilerplate code, and automatically handled range updates (especially helpful if your data updates as the user interacts).

  4. Wire up your view with your Adapter:

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

Features

Manual Swipe

ManualSwipe

Automatic Swipe

AutomaticSwipe

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.

Cancel

Rewind

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 Overlay-Left
Right Overlay-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 own interpolator to define the rate of change of alpha.

CardStackLayoutManager.setOverlayInterpolator(LinearInterpolator())

Paging

You can implement paging by using 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 perfomance issue.

Reloading

You can implement reloading by calling RecyclerView.Adapter.notifyDataSetChanged.

Stack From

Default Value Sample
✅ None StackFrom-None
Top StackFrom-Top
Bottom StackFrom-Bottom
Left StackFrom-Left
Right StackFrom-Right
CardStackLayoutManager.setStackFrom(StackFrom.None)

Visible Count

Default Value Sample
2 VisibleCount-2
✅ 3 VisibleCount-3
4 VisibleCount-4
CardStackLayoutManager.setVisibleCount(3)

Translation Interval

Default Value Sample
4dp TranslationInterval-4dp
✅ 8dp TranslationInterval-8dp
12dp TranslationInterval-12dp
CardStackLayoutManager.setTranslationInterval(8.0f)

Scale Interval

Default Value Sample
✅ 95% ScaleInterval-95%
90% ScaleInterval-90%
CardStackLayoutManager.setScaleInterval(0.95f)

Max Degree

Default Value Sample
✅ 20° MaxDegree-20
0° MaxDegree-0
CardStackLayoutManager.setMaxDegree(20.0f)

Swipe Direction

Default Value Sample
✅ Horizontal SwipeDirection-Horizontal
Vertical SwipeDirection-Vertical
Freedom SwipeDirection-Freedom
CardStackLayoutManager.setDirections(Direction.HORIZONTAL)

Swipe Threshold

Default Value Sample
✅ 30% SwipeThreshold-30%
10% SwipeThreshold-10%
CardStackLayoutManager.setSwipeThreshold(0.3f)

Swipe Restriction

CanScrollHorizontal CanScrollVertical Sample
true true SwipeRestriction-NoRestriction
true false SwipeRestriction-CanScrollHorizontalOnly
false true SwipeRestriction-CanScrollVerticalOnly
false false SwipeRestriction-CannotSwipe
CardStackLayoutManager.setCanScrollHorizontal(true)
CardStackLayoutManager.setCanScrollVertical(true)

Swipeable Method

Default Value Sample
✅ AutomaticAndManual SwipeableMethod-AutomaticAndManual
Automatic SwipwableMethod-Automatic
Manual SwipwableMethod-Manual
None SwipwableMethod-None
CardStackLayoutManager.setSwipeableMethod(SwipeableMethod.AutomaticAndManual)

Public Interfaces

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 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.

Changelog

3.0.0

  • updated to newest gradle version
  • updated libraries to newest versions
  • translated code to kotlin

License

This software is licensed under the Apache License, Version 2.0. See the LICENSE file for details.

Copyright 2024, Jens Münker

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

For CardStackView:

Copyright 2018 yuyakaido

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

📱Tinder like swipeable card view for Android

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Kotlin 100.0%