Skip to content

mejdi14/Card-Switcher

Repository files navigation

Welcome to Card Switcher Library 👋

gitmoji-changelog gitmoji-changelog License: MIT

✨ Demo

🎨Design inspiration

many thanks goes to Kim Baschet for the beautiful design and animation

Installation

Add this in your root build.gradle file (not your module build.gradle file):

allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
	}
}

🔨Dependency

Add this to your module's build.gradle file (make sure the version matches the JitPack badge above):

dependencies {
	...
	implementation 'com.github.mejdi14:Card-Switcher:1.0.1'
}

🔥How to use

     SwitchedCard(SwitchedCardsData(
                            cardModifier = Modifier.size(200.dp, 350.dp),
                            triggerOnClick = false,
                            listener = animationListener,
                            topCardContent = { triggerAnimation ->
                                CardContent(
                                    imageResId = R.drawable.dog,
                                    text = "Main Card",
                                    onClick = triggerAnimation
                                )
                            },
                            bottomCardContent = { triggerAnimation ->
                                CardContent(
                                    imageResId = R.drawable.dog,
                                    text = "Details Card",
                                    onClick = triggerAnimation
                                )
                            }
                        ))

Animation Listener

 val animationListener = object : SwitchedCardAnimationListener {
                            override fun onAnimationStart() {
                                // Animation started
                            }

                            override fun onAnimationEnd() {
                                // Animation finished
                            }
                        }

Animation duration

 .animationDuration

Hold animation duration after separation

 .timeBetweenAnimations

swipe option

 .enableSwipe
 .swipeSensibility

trigger the animation start with a swipe gesture

animation direction

 .animationDirection

the default behaviour is that the top card goes right and the bottom card goes left when they separate, you can reverse that

Default click behaviour to trigger animation

 .triggerOnClick

setting this value true will make the animation start when clicking on one of the cards it's set to false by default so that you can start the animation from another composable using 'triggerAnimation' like in the example

🤝 Contributing

Contributions, issues and feature requests are welcome.
Feel free to check [issues page] if you want to contribute.

Author

👤 Mejdi Hafiane

Show your support

Please ⭐️ this repository if this project helped you!

📝 License

Copyright © 2019 Mejdi Hafiane.
This project is MIT licensed.