From 28f0b38290ce1d427607bd549735a0611aef58e5 Mon Sep 17 00:00:00 2001 From: Nishant Mishra Date: Tue, 2 Dec 2025 20:01:51 +0530 Subject: [PATCH] fix(ui): optimize bottom toolbar animation --- .../java/org/nsh07/pomodoro/ui/AppScreen.kt | 44 +++++++++---------- .../components/ThemePickerListItem.kt | 3 +- 2 files changed, 22 insertions(+), 25 deletions(-) diff --git a/app/src/main/java/org/nsh07/pomodoro/ui/AppScreen.kt b/app/src/main/java/org/nsh07/pomodoro/ui/AppScreen.kt index 6d35c5b..ee70bd2 100644 --- a/app/src/main/java/org/nsh07/pomodoro/ui/AppScreen.kt +++ b/app/src/main/java/org/nsh07/pomodoro/ui/AppScreen.kt @@ -32,7 +32,6 @@ import androidx.compose.animation.togetherWith import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.asPaddingValues import androidx.compose.foundation.layout.calculateEndPadding @@ -42,7 +41,6 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.systemBars -import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.CircleShape import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.ExperimentalMaterial3Api @@ -65,6 +63,7 @@ import androidx.compose.material3.TooltipDefaults import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo import androidx.compose.material3.rememberTooltipState import androidx.compose.runtime.Composable +import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember @@ -75,8 +74,10 @@ import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import androidx.compose.ui.util.fastForEach import androidx.compose.ui.zIndex import androidx.lifecycle.compose.collectAsStateWithLifecycle import androidx.lifecycle.viewmodel.compose.viewModel @@ -178,8 +179,8 @@ fun AppScreen( ) .zIndex(1f) ) { - mainScreens.forEach { item -> - val selected = backStack.last() == item.route + mainScreens.fastForEach { item -> + val selected by remember { derivedStateOf { backStack.lastOrNull() == item.route } } TooltipBox( positionProvider = TooltipDefaults.rememberTooltipPositionProvider( @@ -211,33 +212,28 @@ fun AppScreen( ), modifier = Modifier.height(56.dp) ) { - Row( - verticalAlignment = Alignment.CenterVertically - ) { - Crossfade(selected) { selected -> - if (selected) Icon( + Row { + Crossfade(selected) { + if (it) Icon( painterResource(item.selectedIcon), null ) else Icon(painterResource(item.unselectedIcon), null) } AnimatedVisibility( - selected || wide, - enter = fadeIn(motionScheme.defaultEffectsSpec()) + expandHorizontally( - motionScheme.defaultSpatialSpec() - ), - exit = fadeOut(motionScheme.defaultEffectsSpec()) + shrinkHorizontally( - motionScheme.defaultSpatialSpec() - ), + visible = selected || wide, + enter = expandHorizontally(motionScheme.defaultSpatialSpec()), + exit = shrinkHorizontally(motionScheme.defaultSpatialSpec()) ) { - Row { - Spacer(Modifier.width(ButtonDefaults.MediumIconSpacing)) - Text( - stringResource(item.label), - fontSize = 16.sp, - lineHeight = 24.sp - ) - } + Text( + text = stringResource(item.label), + fontSize = 16.sp, + lineHeight = 24.sp, + maxLines = 1, + softWrap = false, + overflow = TextOverflow.Clip, + modifier = Modifier.padding(start = ButtonDefaults.IconSpacing) + ) } } } diff --git a/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/components/ThemePickerListItem.kt b/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/components/ThemePickerListItem.kt index 411de79..df5ae3b 100644 --- a/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/components/ThemePickerListItem.kt +++ b/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/components/ThemePickerListItem.kt @@ -40,6 +40,7 @@ import androidx.compose.ui.semantics.role import androidx.compose.ui.semantics.semantics import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp +import androidx.compose.ui.util.fastForEachIndexed import org.nsh07.pomodoro.R import org.nsh07.pomodoro.ui.theme.CustomColors.listItemColors import org.nsh07.pomodoro.ui.theme.TomatoShapeDefaults.bottomListItemShape @@ -101,7 +102,7 @@ fun ThemePickerListItem( .background(listItemColors.containerColor) .padding(start = 52.dp, end = 16.dp, bottom = 8.dp) ) { - options.forEachIndexed { index, theme -> + options.fastForEachIndexed { index, theme -> val isSelected = selectedIndex == index ToggleButton( checked = isSelected,