├── .gitignore ├── .idea ├── .gitignore ├── compiler.xml ├── gradle.xml ├── misc.xml └── vcs.xml ├── README.md ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ └── main │ ├── AndroidManifest.xml │ └── res │ ├── drawable-v24 │ └── ic_launcher_foreground.xml │ ├── drawable │ └── ic_launcher_background.xml │ ├── mipmap-anydpi-v26 │ ├── ic_launcher.xml │ └── ic_launcher_round.xml │ ├── mipmap-hdpi │ ├── ic_launcher.webp │ └── ic_launcher_round.webp │ ├── mipmap-mdpi │ ├── ic_launcher.webp │ └── ic_launcher_round.webp │ ├── mipmap-xhdpi │ ├── ic_launcher.webp │ └── ic_launcher_round.webp │ ├── mipmap-xxhdpi │ ├── ic_launcher.webp │ └── ic_launcher_round.webp │ ├── mipmap-xxxhdpi │ ├── ic_launcher.webp │ └── ic_launcher_round.webp │ └── values │ └── strings.xml ├── build.gradle ├── cardstack ├── .gitignore ├── build.gradle ├── consumer-rules.pro └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── com │ └── omercemcicekli │ └── cardstack │ ├── Alignments.kt │ ├── AnimationStyles.kt │ ├── CardStack.kt │ └── Orientation.kt ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/caches 5 | /.idea/libraries 6 | /.idea/modules.xml 7 | /.idea/workspace.xml 8 | /.idea/navEditor.xml 9 | /.idea/assetWizardSettings.xml 10 | .DS_Store 11 | /build 12 | /captures 13 | .externalNativeBuild 14 | .cxx 15 | local.properties 16 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 20 | 21 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CardStack 2 | 3 | [![](https://jitpack.io/v/omercemcicekli/CardStack.svg)](https://jitpack.io/#omercemcicekli/CardStack) 4 | 5 | A hobby project of mine needed Jetpack Compose Cards stacked on top of another. As I finished up the code, I decided to polish and release it as a library so here it is. 6 | 7 | ### Usage 8 | 9 | You can define a composable and create as many cards as you want by giving a card count. 10 | 11 | ```kotlin 12 | val drawables = listOf(R.drawable.first, R.drawable.second, R.drawable.third, R.drawable.fourth) 13 | 14 | CardStack( 15 | { index -> 16 | Image( 17 | painterResource(id = drawables[index]), 18 | contentDescription = "Same Card Type with Different Image", 19 | contentScale = ContentScale.Crop, 20 | modifier = Modifier.size(196.dp, 196.dp) 21 | ) 22 | }, 23 | cardCount = drawables.size 24 | ) 25 | ``` 26 | 27 | ![Alt Text](https://media.giphy.com/media/4XHSwUus1A71tOOnnA/giphy.gif) 28 | 29 | You can also define list of composables and create different card layouts. 30 | 31 | ```kotlin 32 | CardStack( 33 | listOf( 34 | { 35 | Text( 36 | text = "First Card", 37 | textAlign = TextAlign.Center, 38 | modifier = Modifier.size(196.dp) 39 | ) 40 | }, 41 | { 42 | Image( 43 | painterResource(id = R.drawable.second), 44 | contentDescription = "Second Card Image", 45 | contentScale = ContentScale.Crop, 46 | modifier = Modifier.size(196.dp) 47 | ) 48 | }, 49 | { 50 | Column( 51 | horizontalAlignment = Alignment.CenterHorizontally, 52 | modifier = Modifier.size(196.dp) 53 | ) { 54 | Text( 55 | text = "Third Card With Button", 56 | textAlign = TextAlign.Center 57 | ) 58 | Button(onClick = {}) { Text(text = "Button Text") } 59 | } 60 | }, 61 | { 62 | Image( 63 | painterResource(id = R.drawable.fourth), 64 | contentDescription = "Fourth Card Image", 65 | contentScale = ContentScale.Crop, 66 | modifier = Modifier.size(196.dp) 67 | ) 68 | }) 69 | ) 70 | ``` 71 | 72 | ![Alt Text](https://media.giphy.com/media/0csGgiP6l8tqVTGa6H/giphy.gif) 73 | 74 | 75 | ### Customization 76 | 77 | You can define; 78 | 79 | * Card shape 80 | * Card border 81 | * Card elevation 82 | * Padding between cards 83 | * Animation duration 84 | * Orientation 85 | 86 | ```kotlin 87 | CardStack( 88 | .., 89 | cardCount = drawables.size, 90 | cardShape = CircleShape, 91 | cardBorder = BorderStroke(2.dp, Color.White), 92 | cardElevation = 10.dp, 93 | paddingBetweenCards = 10.dp, 94 | animationDuration = 250, 95 | orientation = Orientation.Horizontal( 96 | alignment = HorizontalAlignment.EndToStart, 97 | animationStyle = HorizontalAnimationStyle.FromBottom 98 | ) 99 | ) 100 | ``` 101 | 102 | ![Alt Text](https://media.giphy.com/media/OyIkBjyyKSJ2VJTDQo/giphy.gif) 103 | 104 | ### Get the Library 105 | 106 |
107 | 
108 | allprojects {
109 | 	repositories {
110 | 		maven { url 'https://jitpack.io' }
111 | 	}
112 | }
113 | 	
114 | 115 |
116 | 
117 | implementation 'com.github.omercemcicekli:CardStack:0.0.6'
118 | 	
119 | 120 | ### License 121 | 122 |
123 | 
124 | The MIT License (MIT)
125 | 	
126 | Copyright (c) 2022 Omer Cem Cicekli
127 | 	
128 | Permission is hereby granted, free of charge, to any person obtaining a copy
129 | of this software and associated documentation files (the "Software"), to deal
130 | in the Software without restriction, including without limitation the rights
131 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
132 | copies of the Software, and to permit persons to whom the Software is
133 | furnished to do so, subject to the following conditions:
134 | 	
135 | The above copyright notice and this permission notice shall be included in all
136 | copies or substantial portions of the Software.
137 | 	
138 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
139 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
140 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
141 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
142 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
143 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
144 | SOFTWARE.
145 | 	
146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id 'com.android.application' 3 | id 'org.jetbrains.kotlin.android' 4 | } 5 | 6 | android { 7 | compileSdk 32 8 | 9 | defaultConfig { 10 | applicationId "com.omercemcicekli.cardstack" 11 | minSdk 23 12 | targetSdk 32 13 | versionCode 1 14 | versionName "1.0" 15 | 16 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 17 | } 18 | 19 | buildTypes { 20 | release { 21 | minifyEnabled true 22 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' 23 | } 24 | } 25 | 26 | compileOptions { 27 | sourceCompatibility JavaVersion.VERSION_1_8 28 | targetCompatibility JavaVersion.VERSION_1_8 29 | } 30 | 31 | kotlinOptions { 32 | jvmTarget = '1.8' 33 | } 34 | 35 | buildFeatures { 36 | compose true 37 | } 38 | 39 | composeOptions { 40 | kotlinCompilerExtensionVersion compose_version 41 | } 42 | } 43 | 44 | dependencies { 45 | } -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 11 | 12 | -------------------------------------------------------------------------------- /app/src/main/res/drawable-v24/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 18 | 21 | 22 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/app/src/main/res/mipmap-hdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/app/src/main/res/mipmap-mdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/app/src/main/res/mipmap-xhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | CardStack 3 | -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | compose_version = '1.1.1' 4 | } 5 | } 6 | plugins { 7 | id 'com.android.application' version '7.1.2' apply false 8 | id 'com.android.library' version '7.1.2' apply false 9 | id 'org.jetbrains.kotlin.android' version '1.6.10' apply false 10 | } 11 | 12 | task clean(type: Delete) { 13 | delete rootProject.buildDir 14 | } -------------------------------------------------------------------------------- /cardstack/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /cardstack/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id 'com.android.library' 3 | id 'org.jetbrains.kotlin.android' 4 | id 'maven-publish' 5 | } 6 | 7 | group = 'com.omercemcicekli' 8 | version = '0.0.6' 9 | 10 | android { 11 | compileSdk 32 12 | 13 | defaultConfig { 14 | minSdk 23 15 | targetSdk 32 16 | versionCode 1 17 | versionName "0.0.6" 18 | } 19 | 20 | buildTypes { 21 | release { 22 | minifyEnabled false 23 | } 24 | } 25 | 26 | kotlinOptions { 27 | jvmTarget = '1.8' 28 | } 29 | 30 | buildFeatures { 31 | compose true 32 | } 33 | 34 | composeOptions { 35 | kotlinCompilerExtensionVersion compose_version 36 | } 37 | 38 | android { 39 | publishing { 40 | singleVariant("release") { 41 | withSourcesJar() 42 | } 43 | } 44 | } 45 | } 46 | 47 | dependencies { 48 | implementation "androidx.compose.ui:ui:$compose_version" 49 | implementation "androidx.compose.material:material:$compose_version" 50 | } 51 | 52 | afterEvaluate { 53 | publishing { 54 | publications { 55 | // Creates a Maven publication called "release". 56 | release(MavenPublication) { 57 | from components.release 58 | groupId = 'com.omercemcicekli' 59 | artifactId = 'cardstack' 60 | version = '0.0.6' 61 | } 62 | } 63 | } 64 | } -------------------------------------------------------------------------------- /cardstack/consumer-rules.pro: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/cardstack/consumer-rules.pro -------------------------------------------------------------------------------- /cardstack/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /cardstack/src/main/java/com/omercemcicekli/cardstack/Alignments.kt: -------------------------------------------------------------------------------- 1 | package com.omercemcicekli.cardstack 2 | 3 | enum class VerticalAlignment { 4 | TopToBottom, 5 | BottomToTop, 6 | } 7 | 8 | enum class HorizontalAlignment { 9 | StartToEnd, 10 | EndToStart, 11 | } -------------------------------------------------------------------------------- /cardstack/src/main/java/com/omercemcicekli/cardstack/AnimationStyles.kt: -------------------------------------------------------------------------------- 1 | package com.omercemcicekli.cardstack 2 | 3 | enum class VerticalAnimationStyle { 4 | ToRight, 5 | ToLeft, 6 | } 7 | 8 | enum class HorizontalAnimationStyle { 9 | FromTop, 10 | FromBottom 11 | } -------------------------------------------------------------------------------- /cardstack/src/main/java/com/omercemcicekli/cardstack/CardStack.kt: -------------------------------------------------------------------------------- 1 | package com.omercemcicekli.cardstack 2 | 3 | import androidx.compose.animation.core.* 4 | import androidx.compose.foundation.BorderStroke 5 | import androidx.compose.foundation.layout.Box 6 | import androidx.compose.foundation.layout.PaddingValues 7 | import androidx.compose.foundation.layout.offset 8 | import androidx.compose.foundation.layout.padding 9 | import androidx.compose.material.Card 10 | import androidx.compose.material.ExperimentalMaterialApi 11 | import androidx.compose.material.MaterialTheme 12 | import androidx.compose.runtime.* 13 | import androidx.compose.runtime.saveable.rememberSaveable 14 | import androidx.compose.ui.Alignment 15 | import androidx.compose.ui.Modifier 16 | import androidx.compose.ui.draw.rotate 17 | import androidx.compose.ui.graphics.Shape 18 | import androidx.compose.ui.layout.onSizeChanged 19 | import androidx.compose.ui.unit.Dp 20 | import androidx.compose.ui.unit.IntOffset 21 | import androidx.compose.ui.unit.dp 22 | import androidx.compose.ui.zIndex 23 | import kotlinx.coroutines.CoroutineScope 24 | import kotlinx.coroutines.async 25 | import kotlinx.coroutines.awaitAll 26 | import kotlinx.coroutines.launch 27 | 28 | private const val rotationValue = 45f 29 | private const val defaultAnimationDuration = 300 30 | private val defaultPaddingBetweenItems = 8.dp 31 | private val defaultCardElevation = 1.dp 32 | 33 | @ExperimentalMaterialApi 34 | @Composable 35 | fun CardStack( 36 | cardContents: List<@Composable (Int) -> Unit>, 37 | cardElevation: Dp = defaultCardElevation, 38 | paddingBetweenCards: Dp = defaultPaddingBetweenItems, 39 | animationDuration: Int = defaultAnimationDuration, 40 | cardShape: Shape = MaterialTheme.shapes.medium, 41 | cardBorder: BorderStroke? = null, 42 | onCardClick: ((Int) -> Unit)? = null, 43 | orientation: Orientation = Orientation.Vertical() 44 | ) { 45 | checkPadding(paddingBetweenCards) 46 | checkAnimationDuration(animationDuration) 47 | 48 | val cardCount = cardContents.size 49 | 50 | val runAnimations = animationDuration > 0 51 | val coroutineScope = rememberCoroutineScope() 52 | 53 | var selectedIndex by rememberSaveable { mutableStateOf(0) } 54 | 55 | val contentAlignment = getContentAlignment(orientation) 56 | 57 | val rotationValue = getRotation(orientation) 58 | 59 | Box(contentAlignment = contentAlignment) { 60 | cardContents.forEachIndexed { index, _ -> 61 | ShowCard( 62 | coroutineScope, 63 | runAnimations, 64 | selectedIndex, 65 | index, 66 | cardCount, 67 | paddingBetweenCards, 68 | animationDuration, 69 | rotationValue, 70 | orientation, 71 | cardElevation, 72 | cardShape, 73 | cardBorder, 74 | onCardClick, 75 | { cardContents[index](index) }, 76 | { selectedIndex = it }) 77 | } 78 | } 79 | } 80 | 81 | @ExperimentalMaterialApi 82 | @Composable 83 | fun CardStack( 84 | cardContent: @Composable (Int) -> Unit, 85 | cardCount: Int, 86 | cardElevation: Dp = defaultCardElevation, 87 | paddingBetweenCards: Dp = defaultPaddingBetweenItems, 88 | animationDuration: Int = defaultAnimationDuration, 89 | cardShape: Shape = MaterialTheme.shapes.medium, 90 | cardBorder: BorderStroke? = null, 91 | onCardClick: ((Int) -> Unit)? = null, 92 | orientation: Orientation = Orientation.Vertical() 93 | ) { 94 | checkCardCount(cardCount) 95 | checkPadding(paddingBetweenCards) 96 | checkAnimationDuration(animationDuration) 97 | 98 | val runAnimations = animationDuration > 0 99 | val coroutineScope = rememberCoroutineScope() 100 | 101 | var selectedIndex by rememberSaveable { mutableStateOf(0) } 102 | 103 | val contentAlignment = getContentAlignment(orientation) 104 | 105 | val rotationValue = getRotation(orientation) 106 | 107 | Box(contentAlignment = contentAlignment) { 108 | (0 until cardCount).forEachIndexed { index, _ -> 109 | ShowCard( 110 | coroutineScope, 111 | runAnimations, 112 | selectedIndex, 113 | index, 114 | cardCount, 115 | paddingBetweenCards, 116 | animationDuration, 117 | rotationValue, 118 | orientation, 119 | cardElevation, 120 | cardShape, 121 | cardBorder, 122 | onCardClick, 123 | { cardContent(index) }, 124 | { selectedIndex = it }) 125 | } 126 | } 127 | } 128 | 129 | private fun checkCardCount(cardCount: Int) { 130 | if (cardCount < 2) 131 | throw IllegalArgumentException("Can't use 1 or less card count.") 132 | } 133 | 134 | private fun checkPadding(paddingBetweenCards: Dp) { 135 | if (paddingBetweenCards <= 0.dp) 136 | throw IllegalArgumentException("Can't use 0 or less for padding between cards.") 137 | } 138 | 139 | private fun checkAnimationDuration(animationDuration: Int) { 140 | if (animationDuration < 1) 141 | throw IllegalArgumentException("Can't use 0 or less for animation duration.") 142 | } 143 | 144 | private fun getContentAlignment(orientation: Orientation): Alignment { 145 | return when(orientation) { 146 | is Orientation.Vertical -> { 147 | if(orientation.alignment == VerticalAlignment.TopToBottom) 148 | Alignment.TopCenter 149 | else 150 | Alignment.BottomCenter 151 | } 152 | 153 | is Orientation.Horizontal -> { 154 | if(orientation.alignment == HorizontalAlignment.StartToEnd) 155 | Alignment.CenterStart 156 | else 157 | Alignment.CenterEnd 158 | } 159 | } 160 | } 161 | 162 | private fun getRotation(orientation: Orientation): Float { 163 | return when(orientation) { 164 | is Orientation.Vertical -> if(orientation.animationStyle == VerticalAnimationStyle.ToRight) 165 | rotationValue 166 | else 167 | -rotationValue 168 | is Orientation.Horizontal -> if(orientation.animationStyle == HorizontalAnimationStyle.FromTop) 169 | -rotationValue 170 | else 171 | rotationValue 172 | } 173 | } 174 | 175 | @ExperimentalMaterialApi 176 | @Composable 177 | private fun ShowCard( 178 | coroutineScope: CoroutineScope, 179 | runAnimations: Boolean, 180 | selectedIndex: Int, 181 | index: Int, 182 | cardCount: Int, 183 | paddingBetweenCards: Dp, 184 | animationDuration: Int, 185 | rotationValue: Float, 186 | orientation: Orientation, 187 | cardElevation: Dp, 188 | cardShape: Shape, 189 | cardBorder: BorderStroke?, 190 | onCardClick: ((Int) -> Unit)? = null, 191 | composable: @Composable (Int) -> Unit, 192 | newIndexBlock: (Int) -> Unit 193 | ) { 194 | var itemPxSize = 0 195 | 196 | val padding = when { 197 | selectedIndex == index -> 0.dp 198 | selectedIndex < index -> ((index - selectedIndex) * paddingBetweenCards.value).dp 199 | selectedIndex > index -> ((cardCount - selectedIndex + index) * paddingBetweenCards.value).dp 200 | else -> throw IllegalStateException() 201 | } 202 | 203 | val paddingAnimation by animateDpAsState(padding, tween(animationDuration, easing = FastOutSlowInEasing)) 204 | val offsetAnimation = remember { Animatable(0f) } 205 | val rotateAnimation = remember { Animatable(0f) } 206 | 207 | val offsetValues = when (orientation) { 208 | is Orientation.Vertical -> { 209 | IntOffset( 210 | if (orientation.animationStyle == VerticalAnimationStyle.ToRight) 211 | offsetAnimation.value.toInt() 212 | else 213 | -offsetAnimation.value.toInt(), 0 214 | ) 215 | } 216 | is Orientation.Horizontal -> { 217 | IntOffset( 218 | 0, if (orientation.animationStyle == HorizontalAnimationStyle.FromTop) 219 | -offsetAnimation.value.toInt() 220 | else 221 | offsetAnimation.value.toInt() 222 | ) 223 | } 224 | } 225 | 226 | val paddingModifier = when { 227 | orientation is Orientation.Vertical && orientation.alignment == VerticalAlignment.TopToBottom -> PaddingValues(top = paddingAnimation) 228 | orientation is Orientation.Vertical && orientation.alignment == VerticalAlignment.BottomToTop -> PaddingValues(bottom = paddingAnimation) 229 | orientation is Orientation.Horizontal && orientation.alignment == HorizontalAlignment.StartToEnd -> PaddingValues(start = paddingAnimation) 230 | else -> PaddingValues(end = paddingAnimation) 231 | } 232 | 233 | val modifier = Modifier 234 | .padding(paddingModifier) 235 | .zIndex(-padding.value) 236 | .offset { offsetValues } 237 | .rotate(rotateAnimation.value) 238 | .onSizeChanged { 239 | itemPxSize = if (orientation is Orientation.Vertical) { 240 | if (itemPxSize > it.width) 241 | itemPxSize 242 | else 243 | it.width 244 | } else { 245 | if (itemPxSize > it.height) 246 | itemPxSize 247 | else 248 | it.height 249 | } 250 | } 251 | 252 | Card(elevation = cardElevation, 253 | shape = cardShape, 254 | modifier = modifier, 255 | border = cardBorder, 256 | onClick = { 257 | if(cardCount > 1 && selectedIndex == index) { 258 | onCardClick?.invoke(index) 259 | animateOnClick(coroutineScope, itemPxSize, runAnimations, animationDuration, rotationValue, index, cardCount, offsetAnimation, rotateAnimation, newIndexBlock) 260 | } 261 | } 262 | ) { 263 | composable.invoke(index) 264 | } 265 | } 266 | 267 | private fun animateOnClick( 268 | coroutineScope: CoroutineScope, 269 | pxValue: Int, 270 | runAnimations: Boolean, 271 | animationDuration: Int, 272 | rotationValue: Float, 273 | index: Int, 274 | cardCount: Int, 275 | offsetAnimation: Animatable, 276 | rotateAnimation: Animatable, 277 | newIndexBlock: (Int) -> Unit 278 | ) { 279 | val spec: TweenSpec = tween(animationDuration, easing = FastOutLinearInEasing) 280 | 281 | coroutineScope.launch { 282 | if (runAnimations) 283 | offsetAnimation.animateTo(pxValue.toFloat(), spec) 284 | 285 | val newIndex = if (cardCount > index + 1) 286 | index + 1 287 | else 288 | 0 289 | 290 | newIndexBlock.invoke(newIndex) 291 | 292 | if(runAnimations) { 293 | rotateAnimation.animateTo(rotationValue, spec) 294 | launch { rotateAnimation.animateTo(0f, spec) } 295 | launch { offsetAnimation.animateTo(0f, spec) } 296 | } 297 | } 298 | } 299 | 300 | 301 | 302 | 303 | -------------------------------------------------------------------------------- /cardstack/src/main/java/com/omercemcicekli/cardstack/Orientation.kt: -------------------------------------------------------------------------------- 1 | package com.omercemcicekli.cardstack 2 | 3 | sealed class Orientation { 4 | data class Vertical(val alignment: VerticalAlignment = VerticalAlignment.TopToBottom, 5 | val animationStyle: VerticalAnimationStyle = VerticalAnimationStyle.ToRight 6 | ) : Orientation() 7 | 8 | data class Horizontal(val alignment: HorizontalAlignment = HorizontalAlignment.StartToEnd, 9 | val animationStyle: HorizontalAnimationStyle = HorizontalAnimationStyle.FromTop 10 | ) : Orientation() 11 | } -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | # IDE (e.g. Android Studio) users: 3 | # Gradle settings configured through the IDE *will override* 4 | # any settings specified in this file. 5 | # For more details on how to configure your build environment visit 6 | # http://www.gradle.org/docs/current/userguide/build_environment.html 7 | # Specifies the JVM arguments used for the daemon process. 8 | # The setting is particularly useful for tweaking memory settings. 9 | org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8 10 | # When configured, Gradle will run in incubating parallel mode. 11 | # This option should only be used with decoupled projects. More details, visit 12 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 13 | # org.gradle.parallel=true 14 | # AndroidX package structure to make it clearer which packages are bundled with the 15 | # Android operating system, and which are packaged with your app"s APK 16 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 17 | android.useAndroidX=true 18 | # Kotlin code style for this project: "official" or "obsolete": 19 | kotlin.code.style=official 20 | # Enables namespacing of each library's R class so that its R class includes only the 21 | # resources declared in the library itself and none from the library's dependencies, 22 | # thereby reducing the size of the R class for that library 23 | android.nonTransitiveRClass=true -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omercemcicekli/CardStack/d72d4268fa40e83ec6d8b0544b412be6a012bc02/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Sun Apr 17 14:45:55 TRT 2022 2 | distributionBase=GRADLE_USER_HOME 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-bin.zip 4 | distributionPath=wrapper/dists 5 | zipStorePath=wrapper/dists 6 | zipStoreBase=GRADLE_USER_HOME 7 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 4 | # Copyright 2015 the original author or authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | ## 21 | ## Gradle start up script for UN*X 22 | ## 23 | ############################################################################## 24 | 25 | # Attempt to set APP_HOME 26 | # Resolve links: $0 may be a link 27 | PRG="$0" 28 | # Need this for relative symlinks. 29 | while [ -h "$PRG" ] ; do 30 | ls=`ls -ld "$PRG"` 31 | link=`expr "$ls" : '.*-> \(.*\)$'` 32 | if expr "$link" : '/.*' > /dev/null; then 33 | PRG="$link" 34 | else 35 | PRG=`dirname "$PRG"`"/$link" 36 | fi 37 | done 38 | SAVED="`pwd`" 39 | cd "`dirname \"$PRG\"`/" >/dev/null 40 | APP_HOME="`pwd -P`" 41 | cd "$SAVED" >/dev/null 42 | 43 | APP_NAME="Gradle" 44 | APP_BASE_NAME=`basename "$0"` 45 | 46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 48 | 49 | # Use the maximum available, or set MAX_FD != -1 to use that value. 50 | MAX_FD="maximum" 51 | 52 | warn () { 53 | echo "$*" 54 | } 55 | 56 | die () { 57 | echo 58 | echo "$*" 59 | echo 60 | exit 1 61 | } 62 | 63 | # OS specific support (must be 'true' or 'false'). 64 | cygwin=false 65 | msys=false 66 | darwin=false 67 | nonstop=false 68 | case "`uname`" in 69 | CYGWIN* ) 70 | cygwin=true 71 | ;; 72 | Darwin* ) 73 | darwin=true 74 | ;; 75 | MINGW* ) 76 | msys=true 77 | ;; 78 | NONSTOP* ) 79 | nonstop=true 80 | ;; 81 | esac 82 | 83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 84 | 85 | 86 | # Determine the Java command to use to start the JVM. 87 | if [ -n "$JAVA_HOME" ] ; then 88 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 89 | # IBM's JDK on AIX uses strange locations for the executables 90 | JAVACMD="$JAVA_HOME/jre/sh/java" 91 | else 92 | JAVACMD="$JAVA_HOME/bin/java" 93 | fi 94 | if [ ! -x "$JAVACMD" ] ; then 95 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 96 | 97 | Please set the JAVA_HOME variable in your environment to match the 98 | location of your Java installation." 99 | fi 100 | else 101 | JAVACMD="java" 102 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 103 | 104 | Please set the JAVA_HOME variable in your environment to match the 105 | location of your Java installation." 106 | fi 107 | 108 | # Increase the maximum file descriptors if we can. 109 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 110 | MAX_FD_LIMIT=`ulimit -H -n` 111 | if [ $? -eq 0 ] ; then 112 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 113 | MAX_FD="$MAX_FD_LIMIT" 114 | fi 115 | ulimit -n $MAX_FD 116 | if [ $? -ne 0 ] ; then 117 | warn "Could not set maximum file descriptor limit: $MAX_FD" 118 | fi 119 | else 120 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 121 | fi 122 | fi 123 | 124 | # For Darwin, add options to specify how the application appears in the dock 125 | if $darwin; then 126 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 127 | fi 128 | 129 | # For Cygwin or MSYS, switch paths to Windows format before running java 130 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then 131 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 132 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 133 | 134 | JAVACMD=`cygpath --unix "$JAVACMD"` 135 | 136 | # We build the pattern for arguments to be converted via cygpath 137 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 138 | SEP="" 139 | for dir in $ROOTDIRSRAW ; do 140 | ROOTDIRS="$ROOTDIRS$SEP$dir" 141 | SEP="|" 142 | done 143 | OURCYGPATTERN="(^($ROOTDIRS))" 144 | # Add a user-defined pattern to the cygpath arguments 145 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 146 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 147 | fi 148 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 149 | i=0 150 | for arg in "$@" ; do 151 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 152 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 153 | 154 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 155 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 156 | else 157 | eval `echo args$i`="\"$arg\"" 158 | fi 159 | i=`expr $i + 1` 160 | done 161 | case $i in 162 | 0) set -- ;; 163 | 1) set -- "$args0" ;; 164 | 2) set -- "$args0" "$args1" ;; 165 | 3) set -- "$args0" "$args1" "$args2" ;; 166 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;; 167 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 168 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 169 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 170 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 171 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 172 | esac 173 | fi 174 | 175 | # Escape application args 176 | save () { 177 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 178 | echo " " 179 | } 180 | APP_ARGS=`save "$@"` 181 | 182 | # Collect all arguments for the java command, following the shell quoting and substitution rules 183 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 184 | 185 | exec "$JAVACMD" "$@" 186 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | pluginManagement { 2 | repositories { 3 | gradlePluginPortal() 4 | google() 5 | mavenCentral() 6 | } 7 | } 8 | dependencyResolutionManagement { 9 | repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) 10 | repositories { 11 | google() 12 | mavenCentral() 13 | } 14 | } 15 | rootProject.name = "CardStack" 16 | include ':app' 17 | include ':cardstack' 18 | --------------------------------------------------------------------------------