From add048f0b6c7f7b14d5704d4ab93569fd4a505a2 Mon Sep 17 00:00:00 2001 From: Aritra Das Date: Fri, 15 Sep 2023 13:05:47 +0530 Subject: [PATCH 1/9] Added text duration in cvv field --- .../src/main/java/com/aritra/compose_cards/ui/CreditCard.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt b/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt index f42c8c0..303f53a 100644 --- a/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt +++ b/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt @@ -239,7 +239,7 @@ fun CreditCard( style = MaterialTheme.typography.h6, color = Color.White, modifier = Modifier - .animateContentSize() + .animateContentSize(TweenSpec(300)) .padding(vertical = 4.dp, horizontal = 16.dp) ) From 05b4e0fa3c38071c37cd1366ecd429db56d59fa6 Mon Sep 17 00:00:00 2001 From: Aritra Das Date: Fri, 15 Sep 2023 16:05:32 +0530 Subject: [PATCH 2/9] Masked the CVV --- .../main/java/com/aritra/compose_cards/ui/CreditCard.kt | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt b/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt index 303f53a..8f17ae1 100644 --- a/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt +++ b/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt @@ -49,8 +49,9 @@ fun CreditCard( var backSwitch by remember { mutableStateOf(false) } var cardType by remember { mutableStateOf(Card.None) } val length = if (cardNumber.text.length > 16) 16 else cardNumber.text.length - val maskedNumber = - remember { "*****************" }.replaceRange(0..length, cardNumber.text.take(16)) + val maskedNumber = remember { "*****************" }.replaceRange(0..length, cardNumber.text.take(16)) + val cvv = if (cardCVV.text.length > 3) 3 else cardCVV.text.length + val maskedCVV = remember { "*".repeat(3) }.replaceRange(0 until cvv, cardCVV.text.take(3)) // Switch to back side of the card depending on the cvv number if (cardCVV.text.length == 1 && !backSwitch) { @@ -235,7 +236,7 @@ fun CreditCard( contentAlignment = Alignment.Center ) { Text( - text = cardCVV.text, + text = maskedCVV, style = MaterialTheme.typography.h6, color = Color.White, modifier = Modifier From 18b0bbec3c59ac6d6362ac35c9fcdb73c053b30c Mon Sep 17 00:00:00 2001 From: Aritra Das Date: Fri, 15 Sep 2023 17:09:32 +0530 Subject: [PATCH 3/9] Added proper documentation --- .../com/aritra/compose_cards/ui/CreditCard.kt | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt b/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt index 8f17ae1..78d378f 100644 --- a/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt +++ b/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt @@ -38,6 +38,16 @@ import androidx.compose.ui.unit.dp import androidx.constraintlayout.compose.ConstraintLayout import com.aritra.compose_cards.R +/** + * Composable function to display a Credit Card view with animated flip functionality. + * + * @param cardNumber The text input for the credit card number. + * @param holderName The text input for the cardholder's name. + * @param expiryDate The text input for the card's expiry date. + * @param cardCVV The text input for the card's CVV (Card Verification Value) number. + */ + + @Composable fun CreditCard( cardNumber: TextFieldValue, @@ -46,14 +56,21 @@ fun CreditCard( cardCVV: TextFieldValue ) { + // Mutable state to track the flip state of the card var backSwitch by remember { mutableStateOf(false) } + + // Mutable state to track the detected card type (Visa, Mastercard, etc.) var cardType by remember { mutableStateOf(Card.None) } + + // Calculate the length of the card number and mask it for display val length = if (cardNumber.text.length > 16) 16 else cardNumber.text.length val maskedNumber = remember { "*****************" }.replaceRange(0..length, cardNumber.text.take(16)) + + val cvv = if (cardCVV.text.length > 3) 3 else cardCVV.text.length val maskedCVV = remember { "*".repeat(3) }.replaceRange(0 until cvv, cardCVV.text.take(3)) - // Switch to back side of the card depending on the cvv number + // Determine whether to switch to the back side of the card based on CVV length if (cardCVV.text.length == 1 && !backSwitch) { backSwitch = true } else if (cardCVV.text.length == 2) { @@ -62,7 +79,7 @@ fun CreditCard( backSwitch = false } - // Show card type logo depending on the card number + // Detect and set the card type logo based on the card number's first digit cardType = when { cardNumber.text.isNotEmpty() -> { when (cardNumber.text[0]) { // // Taking the first digits for identifying which card is it @@ -77,8 +94,7 @@ fun CreditCard( else -> Card.None } - // Set Card Color according to the card type - + // Set the card's background color based on its type val animatedColor = animateColorAsState( targetValue = if (cardType == Card.Visa) { From 9a59ca58833482c1e8d777482ffcfc8a22b8d2f9 Mon Sep 17 00:00:00 2001 From: Aritra Das Date: Sun, 17 Sep 2023 15:29:06 +0530 Subject: [PATCH 4/9] Fixed the paddings --- .../main/java/com/aritra/compose_cards/ui/CreditCard.kt | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt b/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt index 78d378f..6e2c2d9 100644 --- a/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt +++ b/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt @@ -118,7 +118,7 @@ fun CreditCard( .fillMaxWidth() .height(200.dp) .graphicsLayer( - rotationY = animateFloatAsState(if (backSwitch) 180f else 0f).value, + rotationY = animateFloatAsState(if (backSwitch) 180f else 0f, label = "").value, translationY = 0f ) .clickable { @@ -140,7 +140,7 @@ fun CreditCard( AnimatedVisibility(visible = cardType != Card.None, modifier = Modifier - .padding(16.dp) + .padding(start = 12.dp,bottom = 10.dp) .constrainAs(cardImage) { start.linkTo(parent.start) top.linkTo(parent.top) @@ -153,11 +153,12 @@ fun CreditCard( Text( text = maskedNumber.chunked(4).joinToString(" "), - style = MaterialTheme.typography.h6, + style = MaterialTheme.typography.h5, maxLines = 1, color = Color.White, modifier = Modifier .animateContentSize(spring()) + .padding(bottom = 10.dp) .constrainAs(number) { linkTo( start = parent.start, From 93e3ccf86a313080f6a4694f9600384e93bbf99a Mon Sep 17 00:00:00 2001 From: Aritra Das Date: Sun, 17 Sep 2023 22:01:53 +0530 Subject: [PATCH 5/9] Optimized the code --- .../java/com/aritra/compose_cards/ui/CreditCard.kt | 14 +++----------- .../java/com/aritra/compose_cards/util/Card.kt | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 11 deletions(-) create mode 100644 compose_cards/src/main/java/com/aritra/compose_cards/util/Card.kt diff --git a/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt b/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt index 6e2c2d9..2f830f3 100644 --- a/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt +++ b/compose_cards/src/main/java/com/aritra/compose_cards/ui/CreditCard.kt @@ -37,6 +37,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.constraintlayout.compose.ConstraintLayout import com.aritra.compose_cards.R +import com.aritra.compose_cards.util.Card /** * Composable function to display a Credit Card view with animated flip functionality. @@ -158,7 +159,7 @@ fun CreditCard( color = Color.White, modifier = Modifier .animateContentSize(spring()) - .padding(bottom = 10.dp) + .padding(bottom = 20.dp) .constrainAs(number) { linkTo( start = parent.start, @@ -267,16 +268,7 @@ fun CreditCard( } } -enum class Card( - val title: String, - @DrawableRes val image: Int -) { - None("", R.drawable.ic_visa), - Visa("", R.drawable.ic_visa), - Mastercard("", R.drawable.ic_mastercard), - RuPay("", R.drawable.rupay_logo), - AmericanExpress("", R.drawable.amex_logo) -} + @Preview @Composable diff --git a/compose_cards/src/main/java/com/aritra/compose_cards/util/Card.kt b/compose_cards/src/main/java/com/aritra/compose_cards/util/Card.kt new file mode 100644 index 0000000..7cd9a32 --- /dev/null +++ b/compose_cards/src/main/java/com/aritra/compose_cards/util/Card.kt @@ -0,0 +1,14 @@ +package com.aritra.compose_cards.util + +import androidx.annotation.DrawableRes +import com.aritra.compose_cards.R + +enum class Card( + @DrawableRes val image: Int +) { + None(R.drawable.ic_visa), + Visa(R.drawable.ic_visa), + Mastercard(R.drawable.ic_mastercard), + RuPay(R.drawable.rupay_logo), + AmericanExpress(R.drawable.amex_logo) +} \ No newline at end of file From e3043717fefc5969f2d12863cbdab5e7c6f50a6a Mon Sep 17 00:00:00 2001 From: Aritra Das Date: Sun, 17 Sep 2023 23:58:50 +0530 Subject: [PATCH 6/9] Slowed the time duration of flip animation --- .idea/inspectionProfiles/Project_Default.xml | 9 +++++ .../com/aritra/compose_cards/ui/CreditCard.kt | 35 ++++++++++++------- 2 files changed, 31 insertions(+), 13 deletions(-) diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml index 103e00c..44ca2d9 100644 --- a/.idea/inspectionProfiles/Project_Default.xml +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -3,30 +3,39 @@