TP-69987 | Naman Khurmi | Changes for bottom bar on click interactions (#11286)

android/app/src/main/java/com/naviapp/home/compose/home/ui/footer/HomePageBottomBar.kt

@@ -8,23 +8,29 @@
 package com.naviapp.home.compose.home.ui.footer
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.BottomAppBar
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
-import com.navi.pay.utils.noRippleClickable
 import com.naviapp.home.compose.home.navigation.NavigationItem
 import com.naviapp.home.compose.home.navigation.getDefaultBottomTabsList
 import com.naviapp.home.compose.home.ui.footer.utils.isRedDotBadgeEnabled
@@ -40,14 +46,13 @@ fun HomeBottomBar(
     onTabSelected: (String) -> Unit
 ) {
     BottomAppBar(
-        modifier = Modifier.navigationBarsPadding(),
+        modifier = Modifier.height(68.dp).fillMaxWidth(),
         backgroundColor = Color.White,
         elevation = 8.dp,
-        contentPadding = PaddingValues(top = 4.dp, bottom = 6.dp)
+        contentPadding = PaddingValues(0.dp)
     ) {
         getDefaultBottomTabsList().forEach { bottomTabItem ->
             BottomBarItem(
-                modifier = Modifier.weight(1f),
                 item = bottomTabItem,
                 selectedTabId = selectedTabId,
                 onTabSelected = onTabSelected,
@@ -58,8 +63,7 @@ fun HomeBottomBar(
 }
 
 @Composable
-private fun BottomBarItem(
-    modifier: Modifier,
+private fun RowScope.BottomBarItem(
     item: NavigationItem,
     selectedTabId: String,
     showRedDotBadge: () -> Boolean,
@@ -68,7 +72,16 @@ private fun BottomBarItem(
     item.tabId.let {
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
-            modifier = modifier.noRippleClickable { onTabSelected(it) }
+            modifier =
+                Modifier.weight(1f)
+                    .fillMaxSize()
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = rememberRipple(bounded = false)
+                    ) {
+                        onTabSelected(it)
+                    }
+                    .padding(top = 6.dp, bottom = 10.dp)
         ) {
             Box {
                 DrawIcon(
@@ -90,7 +103,7 @@ private fun BottomBarItem(
                     )
                 }
             }
-            Spacer(modifier = Modifier.height(4.dp))
+            Spacer(modifier = Modifier.height(6.dp))
             TabText(
                 selectedTabId = selectedTabId,
                 tabName = stringResource(id = item.tabName),

android/app/src/main/java/com/naviapp/home/utils/HomePageUtils.kt

@@ -15,21 +15,18 @@ import androidx.compose.animation.core.infiniteRepeatable
 import androidx.compose.animation.core.rememberInfiniteTransition
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.sp
 import com.navi.design.font.FontWeightEnum
 import com.navi.design.theme.FF191919
@@ -40,18 +37,21 @@ import com.navi.naviwidgets.extensions.NaviText
 import com.navi.pay.common.theme.color.NaviPayColor
 
 fun Modifier.shimmerEffect(): Modifier = composed {
-    var size by remember { mutableStateOf(IntSize.Zero) }
+    var size by remember { mutableFloatStateOf(0f) }
     val transition = rememberInfiniteTransition(label = "")
     val startOffsetX by
         transition.animateFloat(
-            initialValue = -2 * size.width.toFloat(),
-            targetValue = 2 * size.width.toFloat(),
+            initialValue = -2 * size,
+            targetValue = 2 * size,
             animationSpec =
                 infiniteRepeatable(animation = tween(durationMillis = 1000, easing = LinearEasing)),
             label = ""
         )
 
-    background(
+    drawBehind {
+        size = this.size.width
+        drawRect(
+            size = this.size,
             brush =
                 Brush.linearGradient(
                     colors =
@@ -61,33 +61,10 @@ fun Modifier.shimmerEffect(): Modifier = composed {
                             NaviPayColor.loaderGradient
                         ),
                     start = Offset(startOffsetX, 0f),
-                    end = Offset(startOffsetX + size.width.toFloat(), size.height.toFloat())
+                    end = Offset(startOffsetX + size, this.size.height)
                 )
         )
-        .onGloballyPositioned { size = it.size }
-}
-
-fun Modifier.parallelogramShimmer(): Modifier = composed {
-    var size by remember { mutableStateOf(IntSize.Zero) }
-    val transition = rememberInfiniteTransition(label = "")
-    val startOffsetX by
-        transition.animateFloat(
-            initialValue = -2 * size.width.toFloat(),
-            targetValue = 2 * size.width.toFloat(),
-            animationSpec =
-                infiniteRepeatable(animation = tween(durationMillis = 1000, easing = LinearEasing)),
-            label = ""
-        )
-
-    background(
-            brush =
-                Brush.linearGradient(
-                    colors = listOf(Color(0xFFE9E7F0), Color(0xFFF9F9FB), Color(0xFFE9E7F0)),
-                    start = Offset(startOffsetX, 0f),
-                    end = Offset(startOffsetX + size.width.toFloat(), size.height.toFloat())
-                )
-        )
-        .onGloballyPositioned { size = it.size }
+    }
 }
 
 @Composable