CardStackView

Overview

Contents

• Setup
• Features
  • Manual Swipe
  • Automatic Swipe
  • Cancel
  • Rewind
  • Overlay View
  • Overlay Interpolator
  • Paging
  • Reloading
  • Stack From
  • Visible Count
  • Translation Interval
  • Scale Interval
  • Swipe Threshold
  • Max Degree
  • Swipe Direction
  • Swipe Restriction
  • Swipeable Method
• Public Interfaces
• Callbacks
• Migration Guide
• Installation
• License

Setup

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

Features

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

Public Interfaces

Basic usages

| Method | Description | | :---- | :---- | | CardStackView.swipe() | You can swipe once by calling this method. | | CardStackView.rewind() | You