👔 TopAppBar: added collapse on scrolling

lorenzovngl · Sep 9, 2023 · 87061c9 · 87061c9
1 parent 20d6d55
commit 87061c9
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 24 deletions.
diff --git a/app/src/main/java/com/lorenzovainigli/foodexpirationdates/view/composable/MyTopAppBar.kt b/app/src/main/java/com/lorenzovainigli/foodexpirationdates/view/composable/MyTopAppBar.kt
@@ -1,32 +1,58 @@
 package com.lorenzovainigli.foodexpirationdates.view.composable
 
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.lorenzovainigli.foodexpirationdates.ui.theme.FoodExpirationDatesTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun MyTopAppBar(
  title: String,
  actions: @Composable RowScope.() -> Unit = {},
- navigationIcon: @Composable () -> Unit = {}
+ navigationIcon: @Composable () -> Unit = {},
+ scrollBehavior: TopAppBarScrollBehavior? = null
 ) {
  LargeTopAppBar(
  modifier = Modifier
- .padding(bottom = 4.dp),
+ .padding(bottom = 4.dp)
+ .shadow(
+ elevation = 4.dp,
+ spotColor = MaterialTheme.colorScheme.primary
+ ),
  title = {
  Text(
  text = title,
- color = MaterialTheme.colorScheme.onBackground
+ color = MaterialTheme.colorScheme.primary
  )
  },
  actions = actions,
  navigationIcon = navigationIcon,
  colors = TopAppBarDefaults.topAppBarColors(
- containerColor = MaterialTheme.colorScheme.surface
- )
+ containerColor = MaterialTheme.colorScheme.surface,
+ scrolledContainerColor = MaterialTheme.colorScheme.surface
+ ),
+ scrollBehavior = scrollBehavior
  )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+@Composable
+fun MyTopAppBarPreview(){
+ FoodExpirationDatesTheme(
+ dynamicColor = false
+ ) {
+ MyTopAppBar(
+ title = "Title"
+ )
+ Spacer(modifier = Modifier.fillMaxHeight())
+ }
 }
diff --git a/...va/com/lorenzovainigli/foodexpirationdates/view/composable/activity/InfoActivityLayout.kt b/...va/com/lorenzovainigli/foodexpirationdates/view/composable/activity/InfoActivityLayout.kt
@@ -17,16 +17,19 @@ import androidx.compose.material.icons.outlined.ArrowBack
 import androidx.compose.material.icons.outlined.Edit
 import androidx.compose.material.icons.outlined.Share
 import androidx.compose.material.icons.outlined.Star
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
@@ -48,6 +51,7 @@ import com.lorenzovainigli.foodexpirationdates.view.preview.DevicePreviews
 import com.lorenzovainigli.foodexpirationdates.view.preview.LanguagePreviews
 import com.lorenzovainigli.foodexpirationdates.viewmodel.PreferencesViewModel
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun InfoActivityLayout(
  context: Context = LocalContext.current,
@@ -72,7 +76,9 @@ fun InfoActivityLayout(
  modifier = Modifier.fillMaxSize(),
  color = MaterialTheme.colorScheme.background
  ) {
+ val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
  Scaffold(
+ modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
  topBar = {
  MyTopAppBar(
  title = stringResource(id = R.string.about_this_app),
@@ -81,10 +87,11 @@ fun InfoActivityLayout(
  Icon(
  imageVector = Icons.Outlined.ArrowBack,
  contentDescription = stringResource(id = R.string.back),
- tint = MaterialTheme.colorScheme.onSurface
+ tint = MaterialTheme.colorScheme.primary
  )
  }
- }
+ },
+ scrollBehavior = scrollBehavior
  )
  }
  ) { padding ->

diff --git a/.../com/lorenzovainigli/foodexpirationdates/view/composable/activity/InsertActivityLayout.kt b/.../com/lorenzovainigli/foodexpirationdates/view/composable/activity/InsertActivityLayout.kt
@@ -34,6 +34,7 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
 import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberDatePickerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -43,6 +44,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.KeyboardCapitalization
@@ -103,7 +105,9 @@ fun InsertActivityLayout(
  var isDialogOpen by remember {
  mutableStateOf(false)
  }
+ val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
  Scaffold(
+ modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
  topBar = {
  MyTopAppBar(
  title = stringResource(
@@ -115,10 +119,11 @@ fun InsertActivityLayout(
  Icon(
  imageVector = Icons.Outlined.ArrowBack,
  contentDescription = stringResource(id = R.string.back),
- tint = MaterialTheme.colorScheme.onSurface
+ tint = MaterialTheme.colorScheme.primary
  )
  }
- }
+ },
+ scrollBehavior = scrollBehavior
  )
  },
  floatingActionButtonPosition = FabPosition.End,

diff --git a/...va/com/lorenzovainigli/foodexpirationdates/view/composable/activity/MainActivityLayout.kt b/...va/com/lorenzovainigli/foodexpirationdates/view/composable/activity/MainActivityLayout.kt
@@ -5,6 +5,7 @@ import android.content.Intent
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -21,6 +22,7 @@ import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material.icons.rounded.Add
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBar
@@ -32,13 +34,18 @@ import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.SnackbarResult
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.BlendMode
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
@@ -66,6 +73,7 @@ import kotlinx.coroutines.launch
 import java.util.Calendar
 import kotlin.math.min
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun MainActivityLayout(
  context: Context = LocalContext.current,
@@ -95,25 +103,38 @@ fun MainActivityLayout(
  ) {
  val snackbarHostState = remember { SnackbarHostState() }
  val scope = rememberCoroutineScope()
+ val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
  Scaffold(
+ modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
  snackbarHost = { SnackbarHost(snackbarHostState) },
  topBar = {
  MyTopAppBar(
  title = stringResource(id = R.string.app_name),
  navigationIcon = {
- Image(
- modifier = Modifier
- .padding(horizontal = 7.dp)
- .size(48.dp),
- painter = painterResource(id = R.drawable.fed_icon),
- contentDescription = null,
- contentScale = ContentScale.Crop
- )
- }
+ Box {
+ Image(
+ modifier = Modifier
+ .padding(horizontal = 7.dp)
+ .size(48.dp),
+ painter = painterResource(id = R.drawable.fed_icon),
+ contentDescription = null,
+ contentScale = ContentScale.Crop,
+ colorFilter = ColorFilter.tint(
+ color = MaterialTheme.colorScheme.primary,
+ blendMode = BlendMode.SrcAtop
+ )
+ )
+ }
+ },
+ scrollBehavior = scrollBehavior
  )
  },
  bottomBar = {
  NavigationBar(
+ modifier = Modifier.shadow(
+ elevation = 16.dp,
+ spotColor = MaterialTheme.colorScheme.primary
+ ),
  tonalElevation = TonalElevation.level0()
  ) {
  NavigationBarItem(
@@ -125,14 +146,15 @@ fun MainActivityLayout(
  Text(
  text = stringResource(id = R.string.about_this_app),
  maxLines = 1,
- overflow = TextOverflow.Ellipsis
+ overflow = TextOverflow.Ellipsis,
+ color = MaterialTheme.colorScheme.primary
  )
  },
  icon = {
  Icon(
  imageVector = Icons.Outlined.Info,
  contentDescription = stringResource(id = R.string.about_this_app),
- tint = MaterialTheme.colorScheme.onSurface
+ tint = MaterialTheme.colorScheme.primary
  )
  }
  )
@@ -180,14 +202,15 @@ fun MainActivityLayout(
  Text(
  text = stringResource(id = R.string.settings),
  maxLines = 1,
- overflow = TextOverflow.Ellipsis
+ overflow = TextOverflow.Ellipsis,
+ color = MaterialTheme.colorScheme.primary
  )
  },
  icon = {
  Icon(
  imageVector = Icons.Outlined.Settings,
  contentDescription = stringResource(id = R.string.settings),
- tint = MaterialTheme.colorScheme.onSurface
+ tint = MaterialTheme.colorScheme.primary
  )
  }
  )

diff --git a/...om/lorenzovainigli/foodexpirationdates/view/composable/activity/SettingsActivityLayout.kt b/...om/lorenzovainigli/foodexpirationdates/view/composable/activity/SettingsActivityLayout.kt
@@ -26,6 +26,7 @@ import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberTimePickerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -34,6 +35,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
@@ -96,7 +98,9 @@ fun SettingsActivityLayout(
  modifier = Modifier.fillMaxSize(),
  color = MaterialTheme.colorScheme.background
  ) {
+ val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
  Scaffold(
+ modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
  topBar = {
  MyTopAppBar(
  title = stringResource(id = R.string.settings),
@@ -105,10 +109,11 @@ fun SettingsActivityLayout(
  Icon(
  imageVector = Icons.Outlined.ArrowBack,
  contentDescription = stringResource(id = R.string.back),
- tint = MaterialTheme.colorScheme.onSurface
+ tint = MaterialTheme.colorScheme.primary
  )
  }
- }
+ },
+ scrollBehavior = scrollBehavior
  )
  }
  ) { padding ->