From 75ff37612868e07e5d0b9f02076a60ba54cc365c Mon Sep 17 00:00:00 2001 From: Naman Khurmi Date: Wed, 12 Jun 2024 18:20:49 +0530 Subject: [PATCH] TP-69987 | Naman Khurmi | Changes for bottom bar on click interactions (#11286) --- .../home/ui/footer/HomePageBottomBar.kt | 31 +++++++++---- .../com/naviapp/home/utils/HomePageUtils.kt | 45 +++++-------------- 2 files changed, 33 insertions(+), 43 deletions(-) diff --git a/android/app/src/main/java/com/naviapp/home/compose/home/ui/footer/HomePageBottomBar.kt b/android/app/src/main/java/com/naviapp/home/compose/home/ui/footer/HomePageBottomBar.kt index 6018571dd7..11ba6de481 100644 --- a/android/app/src/main/java/com/naviapp/home/compose/home/ui/footer/HomePageBottomBar.kt +++ b/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), diff --git a/android/app/src/main/java/com/naviapp/home/utils/HomePageUtils.kt b/android/app/src/main/java/com/naviapp/home/utils/HomePageUtils.kt index fb4c66b5bc..037babc716 100644 --- a/android/app/src/main/java/com/naviapp/home/utils/HomePageUtils.kt +++ b/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