Smoother HomeUI Scroll and Animation

app/src/main/java/com/ivy/wallet/Constants.kt

@@ -28,4 +28,7 @@ object Constants {
         "https://github.com/ILIYANGERMANOV/ivy-wallet#contributors-see-graph"
 
     const val USER_INACTIVITY_TIME_LIMIT = 60  //Time in seconds
+
+    const val SWIPE_DOWN_THRESHOLD_OPEN_MORE_MENU = 200
+    const val SWIPE_HORIZONTAL_THRESHOLD = 250
 }

app/src/main/java/com/ivy/wallet/ui/home/HomeHeader.kt

@@ -15,11 +15,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.layout
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.lerp
+import com.ivy.wallet.Constants
 import com.ivy.wallet.R
 import com.ivy.wallet.base.*
 import com.ivy.wallet.model.TransactionType
@@ -34,7 +34,6 @@ import com.ivy.wallet.ui.theme.components.IvyOutlinedButton
 import com.ivy.wallet.ui.theme.transaction.TransactionsDividerLine
 import com.ivy.wallet.ui.theme.wallet.AmountCurrencyB1
 import kotlin.math.absoluteValue
-import kotlin.math.roundToInt
 
 
 @ExperimentalAnimationApi
@@ -46,11 +45,8 @@ internal fun HomeHeader(
     currency: String,
     balance: Double,
     bufferDiff: Double,
-    monthlyIncome: Double,
-    monthlyExpenses: Double,
 
     onShowMonthModal: () -> Unit,
-    onOpenMoreMenu: () -> Unit,
     onBalanceClick: () -> Unit,
 
     onSelectNextMonth: () -> Unit,
@@ -62,12 +58,6 @@ internal fun HomeHeader(
             stiffness = Spring.StiffnessLow
         )
     )
-    val percentExpandedAlpha by animateFloatAsState(
-        targetValue = if (expanded) 1f else 0f,
-        animationSpec = springBounce(
-            stiffness = Spring.StiffnessMedium
-        )
-    )
 
     Spacer(Modifier.height(20.dp))
 
@@ -87,20 +77,6 @@ internal fun HomeHeader(
 
     Spacer(Modifier.height(16.dp))
 
-    CashFlowInfo(
-        percentExpanded = percentExpanded,
-        percentExpandedAlpha = percentExpandedAlpha,
-        period = period,
-        currency = currency,
-        balance = balance,
-        bufferDiff = bufferDiff,
-        monthlyIncome = monthlyIncome,
-        monthlyExpenses = monthlyExpenses,
-
-        onOpenMoreMenu = onOpenMoreMenu,
-        onBalanceClick = onBalanceClick
-    )
-
     if (percentExpanded < 0.5f) {
         TransactionsDividerLine(
             modifier = Modifier.alpha(1f - percentExpanded),
@@ -127,7 +103,8 @@ private fun HeaderStickyRow(
     onSelectPreviousMonth: () -> Unit,
 ) {
     Row(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier
+            .fillMaxWidth(),
         verticalAlignment = Alignment.CenterVertically
     ) {
         Spacer(Modifier.width(24.dp))
@@ -146,7 +123,7 @@ private fun HeaderStickyRow(
             if (percentExpanded < 1f) {
                 BalanceRowMini(
                     modifier = Modifier
-                        .alpha(1f - percentExpanded)
+                        .alpha(alpha = 1f - percentExpanded)
                         .clickableNoIndication {
                             onBalanceClick()
                         },
@@ -186,9 +163,8 @@ private fun HeaderStickyRow(
 
 @ExperimentalAnimationApi
 @Composable
-private fun CashFlowInfo(
-    percentExpanded: Float,
-    percentExpandedAlpha: Float,
+fun CashFlowInfo(
+    percentExpanded: Float=1f,
     period: TimePeriod,
     currency: String,
     balance: Double,
@@ -201,19 +177,12 @@ private fun CashFlowInfo(
 ) {
     Column(
         modifier = Modifier
-            .layout { measurable, constraints ->
-                val placealbe = measurable.measure(constraints)
-
-                val height = placealbe.height * percentExpanded
-
-                layout(placealbe.width, height.roundToInt()) {
-                    placealbe.placeRelative(
-                        x = 0,
-                        y = -(placealbe.height * (1f - percentExpanded)).roundToInt()
-                    )
+            .verticalSwipeListener(
+                sensitivity = Constants.SWIPE_DOWN_THRESHOLD_OPEN_MORE_MENU,
+                onSwipeDown = {
+                    onOpenMoreMenu()
                 }
-            }
-            .alpha(percentExpandedAlpha)
+            )
     ) {
         BalanceRow(
             modifier = Modifier

app/src/main/java/com/ivy/wallet/ui/home/HomeTab.kt

@@ -1,6 +1,8 @@
 package com.ivy.wallet.ui.home
 
 import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
@@ -9,13 +11,19 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.*
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
+import androidx.compose.ui.input.nestedscroll.NestedScrollSource
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.google.accompanist.insets.navigationBarsPadding
 import com.google.accompanist.insets.statusBarsPadding
+import com.ivy.wallet.Constants
 import com.ivy.wallet.base.horizontalSwipeListener
 import com.ivy.wallet.base.onScreenStart
+import com.ivy.wallet.base.springBounce
 import com.ivy.wallet.base.verticalSwipeListener
 import com.ivy.wallet.logic.model.CustomerJourneyCardData
 import com.ivy.wallet.model.IvyCurrency
@@ -33,8 +41,6 @@ import com.ivy.wallet.ui.theme.modal.*
 import com.ivy.wallet.ui.theme.transaction.TransactionsDividerLine
 import com.ivy.wallet.ui.theme.transaction.transactions
 
-private const val SWIPE_DOWN_THRESHOLD_OPEN_MORE_MENU = 200
-
 @ExperimentalAnimationApi
 @ExperimentalFoundationApi
 @Composable
@@ -170,6 +176,8 @@ private fun BoxWithConstraintsScope.UI(
     }
     var expanded by remember { mutableStateOf(false) }
 
+    val showHideBalanceRow = remember { mutableStateOf(false) }
+
     val ivyContext = LocalIvyContext.current
 
     Column(
@@ -178,13 +186,13 @@ private fun BoxWithConstraintsScope.UI(
             .statusBarsPadding()
             .navigationBarsPadding()
             .verticalSwipeListener(
-                sensitivity = SWIPE_DOWN_THRESHOLD_OPEN_MORE_MENU,
+                sensitivity = Constants.SWIPE_DOWN_THRESHOLD_OPEN_MORE_MENU,
                 onSwipeDown = {
                     expanded = true
                 }
             )
             .horizontalSwipeListener(
-                sensitivity = 250,
+                sensitivity = Constants.SWIPE_HORIZONTAL_THRESHOLD,
                 onSwipeLeft = {
                     ivyContext.selectMainTab(MainTab.ACCOUNTS)
                 },
@@ -201,23 +209,18 @@ private fun BoxWithConstraintsScope.UI(
         )
 
         HomeHeader(
-            expanded = listState.firstVisibleItemIndex == 0,
+            expanded = !showHideBalanceRow.value,
             name = name,
             period = period,
             currency = currencyCode,
             balance = balance,
             bufferDiff = bufferDiff,
-            monthlyIncome = monthlyIncome,
-            monthlyExpenses = monthlyExpenses,
 
             onShowMonthModal = {
                 choosePeriodModal = ChoosePeriodModalData(
                     period = period
                 )
             },
-            onOpenMoreMenu = {
-                expanded = true
-            },
             onBalanceClick = {
                 onBalanceClick()
             },
@@ -226,6 +229,18 @@ private fun BoxWithConstraintsScope.UI(
         )
 
         HomeTransactionsLazyColumn(
+            showHideBalanceRow = showHideBalanceRow,
+            currency = currencyCode,
+            balance = balance,
+            bufferDiff = bufferDiff,
+            onOpenMoreMenu = {
+                expanded = true
+            },
+            onBalanceClick = {
+                onBalanceClick()
+            },
+
+
             period = period,
             listState = listState,
             baseCurrency = currencyCode,
@@ -306,8 +321,18 @@ private fun BoxWithConstraintsScope.UI(
     }
 }
 
+@ExperimentalAnimationApi
 @Composable
 fun HomeTransactionsLazyColumn(
+    showHideBalanceRow: MutableState<Boolean>,
+    currency: String,
+    balance: Double,
+    bufferDiff: Double,
+
+    onOpenMoreMenu: () -> Unit,
+    onBalanceClick: () -> Unit,
+
+
     period: TimePeriod,
     listState: LazyListState,
 
@@ -339,11 +364,47 @@ fun HomeTransactionsLazyColumn(
 ) {
     val ivyContext = LocalIvyContext.current
 
+    val nestedScrollConnection = remember {
+        object : NestedScrollConnection {
+            override fun onPostScroll(
+                consumed: Offset,
+                available: Offset,
+                source: NestedScrollSource
+            ): Offset {
+                if (listState.firstVisibleItemIndex == 0) {
+                    //To prevent unnecessary updates
+                    if (listState.firstVisibleItemScrollOffset >= 150 && !showHideBalanceRow.value) {
+                        showHideBalanceRow.value = true
+                    } else if (listState.firstVisibleItemScrollOffset < 150 && showHideBalanceRow.value) {
+                        showHideBalanceRow.value = false
+                    }
+                }
+                return super.onPostScroll(consumed, available, source)
+            }
+        }
+    }
+
     LazyColumn(
         modifier = Modifier
-            .fillMaxSize(),
+            .fillMaxSize()
+            .nestedScroll(nestedScrollConnection),
         state = listState
     ) {
+
+        item {
+            CashFlowInfo(
+                period = period,
+                currency = currency,
+                balance = balance,
+                bufferDiff = bufferDiff,
+
+                monthlyIncome = monthlyIncome,
+                monthlyExpenses = monthlyExpenses,
+
+                onOpenMoreMenu = onOpenMoreMenu,
+                onBalanceClick = onBalanceClick
+            )
+        }
         item {
             Spacer(Modifier.height(16.dp))