Merge pull request #54 from Efimj/enhancement/navigation-bar-animation

Enhancement/navigation bar animation
Efimj · Jun 22, 2024 · ab4f59d · ab4f59d
2 parents c072f89 + 3a743a5
commit ab4f59d
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 29 deletions.
diff --git a/app/src/main/java/com/jobik/shkiper/screens/layout/NavigationBar/AppNavigationBar.kt b/app/src/main/java/com/jobik/shkiper/screens/layout/NavigationBar/AppNavigationBar.kt
@@ -2,26 +2,38 @@ package com.jobik.shkiper.screens.layout.NavigationBar
 
 import androidx.annotation.StringRes
 import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.animateIntAsState
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.*
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
+import com.jobik.shkiper.ui.helpers.px
 import com.jobik.shkiper.ui.theme.AppTheme
 
 data class CustomBottomNavigationItem(
     val icon: ImageVector,
-    @StringRes
-    val description: Int,
+    @StringRes val description: Int,
     val isSelected: Boolean,
     val onClick: () -> Unit
 )
@@ -32,27 +44,17 @@ data class DefaultNavigationValues(
 
 @Composable
 fun CustomBottomNavigationItem(properties: CustomBottomNavigationItem) {
-    val (contentColor, backgroundColor) = with(AppTheme.colors) {
-        val contentColor = animateColorAsState(
-            targetValue = if (properties.isSelected) onPrimary else onSecondaryContainer,
-            label = "contentColor"
-        )
-
-        val backgroundColor = animateColorAsState(
-            targetValue = if (properties.isSelected) primary else secondaryContainer,
-            label = "backgroundColor",
-        )
-
-        contentColor to backgroundColor
-    }
+    val contentColor = animateColorAsState(
+        targetValue = if (properties.isSelected) AppTheme.colors.onPrimary else AppTheme.colors.onSecondaryContainer,
+        label = "contentColor"
+    )
 
     IconButton(
         modifier = Modifier
             .fillMaxHeight()
             .aspectRatio(1f),
         colors = IconButtonDefaults.iconButtonColors(
             contentColor = contentColor.value,
-            containerColor = backgroundColor.value
         ),
         onClick = {
             properties.onClick()
@@ -61,31 +63,50 @@ fun CustomBottomNavigationItem(properties: CustomBottomNavigationItem) {
         Icon(
             imageVector = properties.icon,
             contentDescription = stringResource(properties.description),
-            tint = contentColor.value,
+            tint = contentColor.value
         )
     }
 }
 
 @Composable
 fun CustomBottomNavigation(items: List<CustomBottomNavigationItem>) {
+    val selectedIndex = items.indexOfFirst { it.isSelected }
+    val b = 50.dp.px
+    val c = 6.dp.px
+
+    val indicatorOffset by animateIntAsState(
+        targetValue = selectedIndex * (b + c),
+        label = ""
+    )
+
     Surface(
         shape = CircleShape,
         shadowElevation = 1.dp,
         color = Color.Transparent
     ) {
-        Row(
+        Box(
             modifier = Modifier
-                .clickable(enabled = false) {}
                 .height(DefaultNavigationValues().containerHeight)
                 .clip(shape = CircleShape)
                 .background(AppTheme.colors.secondaryContainer)
                 .padding(4.dp),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(6.dp)
         ) {
-            items.forEach {
-                CustomBottomNavigationItem(properties = it)
+            // Background Indicator
+            Box(
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .aspectRatio(1f)
+                    .offset { IntOffset(indicatorOffset, 0) }
+                    .background(AppTheme.colors.primary, CircleShape)
+            )
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(6.dp)
+            ) {
+                items.forEach {
+                    CustomBottomNavigationItem(properties = it)
+                }
             }
         }
     }
-}
+}
diff --git a/app/src/main/java/com/jobik/shkiper/screens/layout/NavigationBar/BottomAppBarProvider.kt b/app/src/main/java/com/jobik/shkiper/screens/layout/NavigationBar/BottomAppBarProvider.kt
@@ -167,9 +167,9 @@ private fun CreateNoteFAN(
             Surface(
                 modifier = Modifier
                     .bounceClick()
-                    .clickable { onCreate() }
                     .height(DefaultNavigationValues().containerHeight)
-                    .aspectRatio(1f),
+                    .aspectRatio(1f)
+                    .clickable { onCreate() },
                 shape = MaterialTheme.shapes.small,
                 shadowElevation = 1.dp,
                 color = AppTheme.colors.primary,

diff --git a/app/src/main/java/com/jobik/shkiper/ui/helpers/dp.kt b/app/src/main/java/com/jobik/shkiper/ui/helpers/dp.kt
@@ -0,0 +1,12 @@
+package com.jobik.shkiper.ui.helpers
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import kotlin.math.roundToInt
+
+inline val Int.dp: Dp
+    @Composable get() = with(LocalDensity.current) { this@dp.toDp() }
+
+inline val Dp.px: Int
+    @Composable get() = with(LocalDensity.current) { this@px.toPx().roundToInt() }