A Jetpack Compose Modifier that enables Tinder-like card gestures.

Overview

Compose Tinder Card

Banner image

A Jetpack Compose Modifier that enables Tinder-like card gestures.

Demo

Click the play button to see the Modifier.swipeableCard() in action:

demo.mp4

How to Install via Gradle

Add the following code in your app/build.gradle file:

repositories {
...
mavenCentral()
}

dependencies {
    implementation 'com.alexstyl.swipeablecard:swipeablecard:0.1.0'
}

How to use

Add the Modifier.swipeableCard() into your @Composable function to enable Tinder-like card gestures:

val state = rememberSwipeableCardState()

Box(
    modifier = Modifier
        .fillMaxSize()
        .swipableCard(
            state = state,
            onSwiped = { direction ->
                println("The card was swiped to $direction")
            },
            onSwipeCancel = {
                println("The swiping was cancelled")
            }
        )
) {
  // contents ...
}

The SwipeableCardState gives you access to the card's offset so that you can create advanced animations according to the amount of swiping done.

The swipedDirection gives you the direction the card has been fully swiped.

How to swipe programmatically

Use the SwipeableCardState to swipe to a specific direction without a gesture:

val state = rememberSwipeableCardState()

// pass the state in your Modifier.swipeableCard(state)

val scope = rememberCoroutineScope()
Button(
    onClick = {
        scope.launch {
            state.swipe(Direction.Right)
        }
    }
) {
    Text("Like")
}

The swipe() suspend function will return, as soon as the swipe animation is finished.

How to detect that a card has been swiped away

Use the SwipeableCardState.swipedDirection. You may want to combine it with a LaunchedEffect() in order to receive a callback when your card is swiped away (using a gesture or programmatically):

LaunchedEffect(state.swipedDirection){
    if(state.swipedDirection!=null) {
        println("The card was swiped to ${state.swipedDirection!!}")
    }
}

Can I swipe towards any direction?

Yes. By default only horizontal swiping is allowed (left & right).

To control which directions need to be blocked, pass the respective Direction to the blockedDirections parameter of the Modifier.

val state = rememberSwipeableCardState()

Box(
    modifier = Modifier
        .swipableCard(
            // prevent swiping downwards. 
            blockedDirections = listOf(Direction.Down),
            state = state,
            onSwiped = { direction ->
                // ...
            },
            onSwipeCancel = {
                // ...
            }
        )
) {
  // contents ...
}

Demo app included

Checkout the app's MainActivity.kt to see a fully functioning example of usage.

How to build the library locally

Include the following snippet in your local.gradle file and do a Gradle Sync:

sonatypeStagingProfileId=
ossrhUsername=
ossrhPassword=
signing.keyId=
signing.key=
signing.password=

The above parameters are used for publishing the library and are not required for development.

Not accepting non-bug fix contributions

Until the API is in stable state (1.0.0 release), I won't be accepting any contributions other than bug fixes.

If you have an idea, question or feedback, open a new issue.

License

Apache 2.0. See the LICENSE file for details.

Author

Made by Alex Styl. Follow me on Twitter for updates.

Inspired by Twyper, Tinder-Like & react-tinder-card

You might also like...
FullMangement - an application that helps you manage your tasks effectively. built with the latest tachs like Compose UI, Jetpack libraries, and MVVM design pattern.
FullMangement - an application that helps you manage your tasks effectively. built with the latest tachs like Compose UI, Jetpack libraries, and MVVM design pattern.

Full Management is an application that helps you manage your tasks effectively. built with the latest tachs like Compose UI, Jetpack libraries and MVVM design pattern.

A Coordinator Layout-like component in Jetpack Compose.
A Coordinator Layout-like component in Jetpack Compose.

CollapsingToolbarInCompose Branches master: Initial code. column_version: Resulting code using a Column. 🚧 lazycolumn_version: Resulting code using a

Jetpack Compose is like Android XML

Jetpack Compose is like Android XML

Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop πŸš€, using Canvas API 🎨
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop πŸš€, using Canvas API 🎨

🐜 🐜 🐜 Compose flocking Ants(boids) 🐜 🐜 🐜 Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop πŸš€ , usi

A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Comments
  • Concurrent Execution Exception issue

    Concurrent Execution Exception issue

    Hello, @alexstyl this is such a good library and I want to inform you that I faced the issue of "concurrent execution exception" which happens when the user continues to swipe too many times. This issue is because the list is modified every time. I am just informing you in case you find a solution then solved it. So that other users don't face the same problem.

    more info required 
    opened by yagnikv33 3
  • Not able to swipe more than one card

    Not able to swipe more than one card

    Hi there! I am very new to Jetpack Compose and am trying to use your library. However, when I use this code, I can't swipe more than the first one. How do I fix it?

    @Composable
    fun SwipableCard(name: String) {
        val state = rememberSwipeableCardState()
        Box(
            modifier = Modifier
                .fillMaxSize()
                .swipableCard(
                    state = state,
                    onSwiped = { direction ->
                        println("The card was swiped to $direction") },
                    onSwipeCancel = {
                        println("The swiping was cancelled")
                    }
                )
                .background(Color.Magenta)
        ) {
            // contents ...
            Greeting(name = name)
        }
    }
    

    Called with:

        for (name:String in names.reversed()) {
            SwipableCard(name)
        }
    }
    
    opened by Mcrich23 1
Releases(0.1.0)
  • 0.1.0(Aug 23, 2022)

    What's new

    • Can now swipe to any direction (Up, Down, Left, Right). (https://github.com/alexstyl/compose-tinder-card/issues/1)
    • New parameter blockedDirection added: Allows you block swiping towards specific directions. By default, only horizontal swipes are allowed.
    Source code(tar.gz)
    Source code(zip)
  • 0.0.1(Aug 21, 2022)

    Initial release

    How to use

    Add the Modifier.swipeableCard() into your @Composable function to enable Tinder-like card gestures:

    val state = rememberSwipeableCardState()
    
    Box(
        modifier = Modifier
            .fillMaxSize()
            .swipableCard(
                state = state,
                onSwiped = { direction ->
                    println("The card was swiped to $direction")
                },
                onSwipeCancel = {
                    println("The swiping was cancelled")
                }
            )
    ) {
      // contents ...
    }
    

    The SwipeableCardState gives you access to the card's offset so that you can create advanced animations according to the amount of swiping done.

    The swipedDirection gives you the direction the card has been fully swiped.

    How to swipe programmatically

    Use the SwipeableCardState to swipe to a specific direction without a gesture:

    val state = rememberSwipeableCardState()
    
    // pass the state in your Modifier.swipeableCard(state)
    
    val scope = rememberCoroutineScope()
    Button(
        onClick = {
            scope.launch {
                state.swipe(Direction.Right)
            }
        }
    ) {
        Text("Like")
    }
    

    The swipe() suspend function will return, as soon as the swipe animation is finished.

    How to detect that a card has been swiped away

    Use the SwipeableCardState.swipedDirection. You may want to combine it with a LaunchedEffect() in order to receive a callback when your card is swiped away (using a gesture or programmatically):

    LaunchedEffect(state.swipedDirection){
        if(state.swipedDirection!=null) {
            println("The card was swiped to ${state.swipedDirection!!}")
        }
    }
    
    Source code(tar.gz)
    Source code(zip)
Owner
Alex Styl
Building OSS for Android & Jetpack Compose.
Alex Styl
A Jetpack Compose modifier enabling reordering in a LazyList.

Compose LazyList reorder A Jetpack Compose modifier enabling reordering in a LazyList. Download repositories { maven { setUrl("https://jitpack.io"

Andre Claßen 398 Jan 6, 2023
Explode compose elements on click! Just add explodeOnClick() modifier!

compose-explode Explode compose elements on click! Just add explodeOnClick() modifier! Inspired from ExplosionField Getting started Go to library/expl

Nikhil Chaudhari 33 Jan 8, 2023
Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Shivaraj M Patil 1 Apr 13, 2022
A library that enables reuse of Material themes defined in XML for theming in Jetpack Compose.

MDC-Android Compose Theme Adapter A library that enables reuse of Material Components for Android XML themes for theming in Jetpack Compose. The basis

Material Components 409 Dec 24, 2022
A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

Roman Levinzon 59 Oct 19, 2022
πŸš€πŸŒ†πŸ™ Display differences or animate progress between 2 images or Composables with overlay and customization options, zoom, pan gestures, and progress to observe properties for animating before-after progress

Compose Before-After Composables to display Images, or Composables as before and after composables to display differences or animate progress between

Smart Tool Factory 56 Dec 22, 2022
Scratch Card Effect in Jetpack Compose πŸš€

Scratch Card Effect ?? Description Demonstrating scratching gift/cashback coupon like effect in Jetpack Compose ?? Motivation and Context Having Fun i

Vivek Sharma 63 Oct 6, 2022
ComposeCreditCardView - Jetpack Compose Credit Card View Library

ComposeCreditCardView Jetpack Compose Credit Card View Library Screenshots ??  

Umut Soysal 5 Sep 19, 2022
a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens

This library provides a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens without all the boilerplate

Bernat BorrΓ‘s Paronella 178 Jan 4, 2023
Example Jetpack Compose Android App, that uses the newest mechanisms, like StateFlow, SharedFlow, etc. to manage states and handle events. ViewModel, UI and Screenshot tests included :)

AndroidMVIExample Example Jetpack Compose Android App, that uses the newest mechanisms, like StateFlow, SharedFlow, etc. to manage states and handle e

Patryk Kosieradzki 55 Nov 18, 2022