Fixed sticky header background

app/src/main/java/com/sadellie/unitto/screens/common/Header.kt

@@ -19,6 +19,7 @@
 package com.sadellie.unitto.screens.common
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
@@ -32,17 +33,24 @@ import androidx.compose.ui.unit.dp
  *
  * @param text Group label.
  * @param modifier Modifier that will be applied to Text composable.
+ * @param paddingValues Paddings that will be applied to a modifier.
  */
 @Composable
 fun Header(
     text: String,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    paddingValues: PaddingValues = PaddingValues(
+        start = 16.dp,
+        end = 16.dp,
+        top = 24.dp,
+        bottom = 12.dp
+    )
 ) {
     Text(
         modifier = modifier
             .background(MaterialTheme.colorScheme.background)
-            .fillMaxWidth()
+            .padding(paddingValues)
-            .padding(start = 16.dp, end = 16.dp, top = 24.dp, bottom = 12.dp),
+            .fillMaxWidth(),
         text = text,
         style = MaterialTheme.typography.titleSmall,
         color = MaterialTheme.colorScheme.primary

app/src/main/java/com/sadellie/unitto/screens/second/SecondScreen.kt

@@ -18,26 +18,35 @@
 
 package com.sadellie.unitto.screens.second
 
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.LinearOutSlowInEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberTopAppBarState
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import com.sadellie.unitto.R
 import com.sadellie.unitto.data.units.AbstractUnit
 import com.sadellie.unitto.data.units.UnitGroup
 import com.sadellie.unitto.screens.Formatter
-import com.sadellie.unitto.screens.second.components.ChipsRow
 import com.sadellie.unitto.screens.common.Header
+import com.sadellie.unitto.screens.second.components.ChipsRow
 import com.sadellie.unitto.screens.second.components.SearchBar
 import com.sadellie.unitto.screens.second.components.SearchPlaceholder
 import com.sadellie.unitto.screens.second.components.UnitListItem
@@ -64,7 +73,7 @@ private fun BasicUnitListScreen(
     navigateToSettingsActtion: () -> Unit,
     selectAction: (AbstractUnit) -> Unit,
     viewModel: SecondViewModel,
-    chipsRow: @Composable (UnitGroup?, LazyListState) -> Unit = {_, _->},
+    chipsRow: @Composable (UnitGroup?, LazyListState) -> Unit = { _, _ -> },
     unitsListItem: @Composable (AbstractUnit, (AbstractUnit) -> Unit) -> Unit,
     noBrokenCurrencies: Boolean,
     title: String,
@@ -73,41 +82,66 @@ private fun BasicUnitListScreen(
     val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
     val focusManager = LocalFocusManager.current
     val chipsRowLazyListState = rememberLazyListState()
+    val elevatedColor = MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp)
+
+    val chipsBackground = animateColorAsState(
+        if (scrollBehavior.state.overlappedFraction > 0.01f) {
+            elevatedColor
+        } else {
+            MaterialTheme.colorScheme.surface
+        },
+        animationSpec = tween(
+            durationMillis = 500,
+            easing = LinearOutSlowInEasing
+        )
+    )
 
     Scaffold(
         modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
         topBar = {
-            SearchBar(
+            Column(
-                title = title,
+                Modifier.background(chipsBackground.value)
-                value = uiState.searchQuery,
+            ) {
-                onValueChange = {
+                SearchBar(
-                    viewModel.onSearchQueryChange(it)
+                    title = title,
-                    viewModel.loadUnitsToShow(noBrokenCurrencies)
+                    value = uiState.searchQuery,
-                },
+                    onValueChange = {
-                favoritesOnly = uiState.favoritesOnly,
+                        viewModel.onSearchQueryChange(it)
-                favoriteAction = {
+                        viewModel.loadUnitsToShow(noBrokenCurrencies)
-                    viewModel.toggleFavoritesOnly()
+                    },
-                    viewModel.loadUnitsToShow(noBrokenCurrencies)
+                    favoritesOnly = uiState.favoritesOnly,
-                },
+                    favoriteAction = {
-                navigateUpAction = navigateUp,
+                        viewModel.toggleFavoritesOnly()
-                focusManager = focusManager,
+                        viewModel.loadUnitsToShow(noBrokenCurrencies)
-                scrollBehavior = scrollBehavior
+                    },
-            )
+                    navigateUpAction = navigateUp,
-        }
+                    focusManager = focusManager,
-    ) { paddingValues ->
+                    scrollBehavior = scrollBehavior
-        LazyColumn(Modifier.padding(paddingValues)) {
+                )
-            stickyHeader {
                 chipsRow(
                     viewModel.uiState.chosenUnitGroup,
                     chipsRowLazyListState
                 )
             }
+        }
+    ) { paddingValues ->
+        LazyColumn(Modifier.padding(paddingValues)) {
             if (uiState.unitsToShow.isEmpty()) {
                 item { SearchPlaceholder(navigateToSettingsActtion) }
                 return@LazyColumn
             }
             uiState.unitsToShow.forEach { (unitGroup, listOfUnits) ->
-                item { Header(text = stringResource(unitGroup.res)) }
+                item {
+                    Header(
+                        text = stringResource(unitGroup.res),
+                        paddingValues = PaddingValues(
+                            start = 16.dp,
+                            end = 16.dp,
+                            top = 8.dp,
+                            bottom = 12.dp
+                        )
+                    )
+                }
                 items(items = listOfUnits, key = { it.unitId }) { unit ->
                     unitsListItem(unit) {
                         selectAction(it)
@@ -213,7 +247,11 @@ fun RightSideScreen(
             isSelected = currentUnit == unit,
             selectAction = selectUnitAction,
             favoriteAction = { viewModel.favoriteUnit(it) },
-            convertValue = { Formatter.format(unitFrom.convert(unit, inputValue, 3).toPlainString()) }
+            convertValue = {
+                Formatter.format(
+                    unitFrom.convert(unit, inputValue, 3).toPlainString()
+                )
+            }
         )
     },
     noBrokenCurrencies = false,

app/src/main/java/com/sadellie/unitto/screens/second/components/ChipsRow.kt

@@ -69,7 +69,7 @@ fun ChipsRow(
 ) {
     LazyRow(
         modifier = Modifier
-            .background(MaterialTheme.colorScheme.background)
+            .padding(bottom = 4.dp)
             .fillMaxWidth(),
         state = lazyListState,
         contentPadding = PaddingValues(8.dp),