feat: Added entry animations for carts and cart items

Enhanced user experience with smooth animations: - Implemented entry animations for carts and cart items to create a more engaging user interface.
D4rK7355608 · Nov 22, 2024 · c123f1e · c123f1e
1 parent 75a2e07
commit c123f1e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 53 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -15,7 +15,7 @@ android {
         applicationId = "com.d4rk.cartcalculator"
         minSdk = 23
         targetSdk = 35
-        versionCode = 68
+        versionCode = 69
         versionName = "1.1.1"
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
         resourceConfigurations += listOf(

diff --git a/app/src/main/kotlin/com/d4rk/cartcalculator/ui/screens/cart/CartScreen.kt b/app/src/main/kotlin/com/d4rk/cartcalculator/ui/screens/cart/CartScreen.kt
@@ -2,6 +2,7 @@ package com.d4rk.cartcalculator.ui.screens.cart
 
 import android.view.SoundEffectConstants
 import android.view.View
+import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
@@ -92,29 +93,29 @@ fun CartScreen(activity : CartActivity , cartId : Int) {
     val dataStore = DataStore.getInstance(context)
 
     Box(modifier = Modifier.fillMaxSize()) {
-        Scaffold(
-            modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection) ,
-            topBar = {
-                LargeTopAppBar(title = {
-                    Text(
-                        text = uiState.cart?.name ?: stringResource(id = R.string.shopping_cart)
-                    )
-                } , navigationIcon = {
-                    IconButton(onClick = {
-                        activity.finish()
-                    }) {
-                        Icon(Icons.AutoMirrored.Filled.ArrowBack , contentDescription = null)
-                    }
-                } , actions = {
-                    IconButton(onClick = {
-                        viewModel.toggleOpenDialog()
-                    }) {
-                        Icon(
-                            Icons.Outlined.AddShoppingCart , contentDescription = null ,
-                        )
-                    }
-                } , scrollBehavior = scrollBehavior)
-            }) { paddingValues ->
+        Scaffold(modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection) ,
+                 topBar = {
+                     LargeTopAppBar(title = {
+                         Text(
+                             text = uiState.cart?.name
+                                 ?: stringResource(id = R.string.shopping_cart)
+                         )
+                     } , navigationIcon = {
+                         IconButton(onClick = {
+                             activity.finish()
+                         }) {
+                             Icon(Icons.AutoMirrored.Filled.ArrowBack , contentDescription = null)
+                         }
+                     } , actions = {
+                         IconButton(onClick = {
+                             viewModel.toggleOpenDialog()
+                         }) {
+                             Icon(
+                                 Icons.Outlined.AddShoppingCart , contentDescription = null ,
+                             )
+                         }
+                     } , scrollBehavior = scrollBehavior)
+                 }) { paddingValues ->
             Box(
                 modifier = Modifier
                         .padding(paddingValues)
@@ -152,21 +153,25 @@ fun CartScreen(activity : CartActivity , cartId : Int) {
                                                     .animateItem()
                                         )
                                     }
-                                    itemsIndexed(items = checkedItems ,
-                                                 key = { _ , item -> item.itemId }) { index , cartItem ->
+                                    itemsIndexed(
+                                        items = checkedItems ,
+                                        key = { _ , item -> item.itemId }) { index , cartItem ->
                                         val isVisible = visibilityStates.getOrElse(index) { false }
-                                        CartItemComposable(
-                                            viewModel = viewModel ,
-                                            cartItem = cartItem ,
-                                            onMinusClick = { viewModel.decreaseQuantity(cartItem) } ,
-                                            onPlusClick = { viewModel.increaseQuantity(cartItem) } ,
-                                            uiState = uiState ,
-                                            modifier = Modifier
-                                                    .animateItem()
-                                                    .animateVisibility(
-                                                        visible = isVisible , index = index
-                                                    )
-                                        )
+                                        CartItemComposable(viewModel = viewModel ,
+                                                           cartItem = cartItem ,
+                                                           onMinusClick = {
+                                                               viewModel.decreaseQuantity(cartItem)
+                                                           } ,
+                                                           onPlusClick = {
+                                                               viewModel.increaseQuantity(cartItem)
+                                                           } ,
+                                                           uiState = uiState ,
+                                                           modifier = Modifier
+                                                                   .animateItem()
+                                                                   .animateVisibility(
+                                                                       visible = isVisible ,
+                                                                       index = index
+                                                                   ))
                                     }
                                 }
 
@@ -180,21 +185,25 @@ fun CartScreen(activity : CartActivity , cartId : Int) {
                                                     .animateItem()
                                         )
                                     }
-                                    itemsIndexed(items = uncheckedItems ,
-                                                 key = { _ , item -> item.itemId }) { index , cartItem ->
+                                    itemsIndexed(
+                                        items = uncheckedItems ,
+                                        key = { _ , item -> item.itemId }) { index , cartItem ->
                                         val isVisible = visibilityStates.getOrElse(index) { false }
-                                        CartItemComposable(
-                                            viewModel = viewModel ,
-                                            cartItem = cartItem ,
-                                            onMinusClick = { viewModel.decreaseQuantity(cartItem) } ,
-                                            onPlusClick = { viewModel.increaseQuantity(cartItem) } ,
-                                            uiState = uiState ,
-                                            modifier = Modifier
-                                                    .animateItem()
-                                                    .animateVisibility(
-                                                        visible = isVisible , index = index
-                                                    )
-                                        )
+                                        CartItemComposable(viewModel = viewModel ,
+                                                           cartItem = cartItem ,
+                                                           onMinusClick = {
+                                                               viewModel.decreaseQuantity(cartItem)
+                                                           } ,
+                                                           onPlusClick = {
+                                                               viewModel.increaseQuantity(cartItem)
+                                                           } ,
+                                                           uiState = uiState ,
+                                                           modifier = Modifier
+                                                                   .animateItem()
+                                                                   .animateVisibility(
+                                                                       visible = isVisible ,
+                                                                       index = index
+                                                                   ))
                                     }
                                 }
                             }
@@ -420,7 +429,9 @@ fun CartItemComposable(
                                       Text(
                                           text = quantityState.toString() ,
                                           style = MaterialTheme.typography.bodyMedium ,
-                                          modifier = Modifier.padding(horizontal = 16.dp)
+                                          modifier = Modifier
+                                                  .padding(horizontal = 16.dp)
+                                                  .animateContentSize()
                                       )
 
                                       IconButton(modifier = Modifier.bounceClick() , onClick = {

diff --git a/app/src/main/kotlin/com/d4rk/cartcalculator/ui/screens/cart/CartViewModel.kt b/app/src/main/kotlin/com/d4rk/cartcalculator/ui/screens/cart/CartViewModel.kt
@@ -72,6 +72,7 @@ class CartViewModel(application : Application) : BaseViewModel(application) {
                 calculateTotalPrice()
             }
         }
+        initializeVisibilityStates()
     }
 
     fun increaseQuantity(cartItem : ShoppingCartItemsTable) {

diff --git a/app/src/main/kotlin/com/d4rk/cartcalculator/ui/screens/home/HomeViewModel.kt b/app/src/main/kotlin/com/d4rk/cartcalculator/ui/screens/home/HomeViewModel.kt
@@ -61,6 +61,7 @@ class HomeViewModel(application : Application) : BaseViewModel(application) {
                     currentState.copy(carts = (currentState.carts + addedCart).toMutableList())
                 }
             }
+            initializeVisibilityStates()
         }
     }
-Original file line number
+Diff line change
@@ Expand Up @@
                     calculateTotalPrice()
                 }
             }
+            initializeVisibilityStates()
         }
         fun increaseQuantity(cartItem : ShoppingCartItemsTable) {
@@ Expand Down @@