Skip to content

Deprecation warning

This page in the documentation is about Appyx 1.x.

Appyx is now in its 2.x iteration.

To access the 2.x-related pages please check the sidebar or go to:

Documentation root


Implements a dating-cards-like mechanism.

Intended only as an illustration, but it should be easy enough to tailor it to your needs if you find it useful.

Where can I find this NavModel?

The Cards NavModel is not currently published, however you can try it in :samples:app. Launch the sample app and check the Dating cards NavModel item to see it in action.


sealed class State {
    data class Queued(val queueNumber: Int) : State()
    object Bottom : State()
    object Top : State()
    object IndicateLike : State()
    object IndicatePass : State()
    object VoteLike : State()
    object VotePass : State()

State transitions

Constructing Cards

Requires defining items that will be converted to profile cards. The first one in the list will become a Top card, the second one a Bottom card, the rest will be Queued.

class Cards<NavTarget : Any>(
    initialItems: List<NavTarget> = listOf(),
) : BaseNavModel<NavTarget, State>(
    screenResolver = CardsOnScreenResolver,
    finalStates = FINAL_STATES,
    savedStateMap = null
) {
    companion object {
        internal val FINAL_STATES = setOf(VoteLike, VotePass)
        internal val TOP_STATES = setOf(Top, IndicateLike, IndicatePass)

Default on screen resolution

internal object CardsOnScreenResolver : OnScreenStateResolver<State> {
    override fun isOnScreen(state: State): Boolean =
        when (state) {
            is State.Bottom,
            is State.Top,
            is State.IndicateLike,
            is State.IndicatePass -> true
            is State.Queued,
            is State.VoteLike,
            is State.VotePass -> false

Default transition handlers



Adds scale-up, swipe and rotation animations.



Internal operation. Automatically invoked whenever a top card is moved to a vote-related state. Causes all other cards to come forward in the queue, become the Bottom card, then the Top card.

IndicateLike, IndicatePass, VoteLike, VotePass

Transitions the Top card directly to these states.