Merge pull request #367 from toquete/app_bars_animation

Animating app bars according to scroll
toquete · Jan 9, 2025 · 5ecf26d · 5ecf26d
2 parents 37f21cf + 20d141a
commit 5ecf26d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/feature/home/src/main/java/com/toquete/boxbox/feature/home/ui/HomeNavigationBar.kt b/feature/home/src/main/java/com/toquete/boxbox/feature/home/ui/HomeNavigationBar.kt
@@ -1,7 +1,9 @@
 package com.toquete.boxbox.feature.home.ui
 
+import androidx.compose.material3.BottomAppBar
+import androidx.compose.material3.BottomAppBarScrollBehavior
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
-import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -12,9 +14,13 @@ import androidx.navigation.NavDestination
 import androidx.navigation.NavDestination.Companion.hierarchy
 import com.toquete.boxbox.feature.home.navigation.HomeDestination
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-internal fun HomeNavigationBar(homeViewState: HomeViewState) {
-    NavigationBar {
+internal fun HomeNavigationBar(
+    homeViewState: HomeViewState,
+    scrollBehavior: BottomAppBarScrollBehavior
+) {
+    BottomAppBar(scrollBehavior = scrollBehavior) {
         homeViewState.homeDestinations.forEach { destination ->
             val isSelected = homeViewState.currentDestination.isTopLevelDestinationInHierarchy(destination)
             NavigationBarItem(

diff --git a/feature/home/src/main/java/com/toquete/boxbox/feature/home/ui/HomeScreen.kt b/feature/home/src/main/java/com/toquete/boxbox/feature/home/ui/HomeScreen.kt
@@ -5,14 +5,17 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.BottomAppBarDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.pulltorefresh.PullToRefreshBox
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -45,16 +48,25 @@ internal fun HomeScreen(
     builder: NavGraphBuilder.() -> Unit = { }
 ) {
     val homeViewState = rememberHomeViewState()
+    val topAppBarScrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
+    val bottomAppBarScrollBehavior = BottomAppBarDefaults.exitAlwaysScrollBehavior()
     Scaffold(
+        modifier = Modifier
+            .nestedScroll(bottomAppBarScrollBehavior.nestedScrollConnection)
+            .nestedScroll(topAppBarScrollBehavior.nestedScrollConnection),
         topBar = {
             HomeTopAppBar(
                 homeViewState = homeViewState,
                 isOffline = state.isOffline,
+                scrollBehavior = topAppBarScrollBehavior,
                 onSettingsButtonClick = onSettingsButtonClick
             )
         },
         bottomBar = {
-            HomeNavigationBar(homeViewState = homeViewState)
+            HomeNavigationBar(
+                homeViewState = homeViewState,
+                scrollBehavior = bottomAppBarScrollBehavior
+            )
         },
         snackbarHost = { SnackbarHost(hostState = homeViewState.snackbarHostState) }
     ) { paddingValues ->

diff --git a/feature/home/src/main/java/com/toquete/boxbox/feature/home/ui/HomeTopAppBar.kt b/feature/home/src/main/java/com/toquete/boxbox/feature/home/ui/HomeTopAppBar.kt
@@ -10,6 +10,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
@@ -23,10 +24,12 @@ import com.toquete.boxbox.core.ui.theme.FormulaOne
 internal fun HomeTopAppBar(
     homeViewState: HomeViewState,
     isOffline: Boolean,
+    scrollBehavior: TopAppBarScrollBehavior,
     onSettingsButtonClick: () -> Unit = { }
 ) {
     val title = homeViewState.currentHomeDestination?.titleTextId
     CenterAlignedTopAppBar(
+        scrollBehavior = scrollBehavior,
         title = {
             Text(
                 modifier = Modifier.testTag("Home AppBar Title"),