refactor: Bottom-Navigation auf custom Surface+Row+IconButton umstellen

Material NavigationBar/NavigationBarItem hat hardcoded interne Paddings
(16dp oben/unten + 32dp Indicator), die bei height-Constraints die Icons
proportional schrumpfen lassen. Custom-Lösung mit:
- Surface + NavigationBarDefaults.containerColor/Elevation
- windowInsetsPadding(NavigationBarDefaults.windowInsets) für System-Insets
- Row mit IconButtons (standard 48dp Touch-Target, 24dp Icons)
- padding(vertical = 4.dp) statt 24dp Material-Default
Icons behalten volle Größe, Bar ist deutlich kompakter.
This commit is contained in:
Jens Reinemann 2026-05-17 11:05:05 +02:00
parent 4397159d62
commit 28b7e83297

View file

@ -1,17 +1,21 @@
package de.krisenvorrat.app.ui
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.SwapHoriz
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBarDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
@ -19,6 +23,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
@ -74,12 +79,22 @@ internal fun MainScreen() {
},
bottomBar = {
if (showBottomBar) {
NavigationBar(modifier = Modifier.height(56.dp)) {
Surface(
color = NavigationBarDefaults.containerColor,
tonalElevation = NavigationBarDefaults.Elevation
) {
Row(
modifier = Modifier
.fillMaxWidth()
.windowInsetsPadding(NavigationBarDefaults.windowInsets)
.padding(vertical = 4.dp),
horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.CenterVertically
) {
TopLevelDestination.entries.forEach { destination ->
val isSelected = currentDestination?.hasRoute(destination.route::class) == true
NavigationBarItem(
selected = isSelected,
IconButton(
onClick = {
navController.navigate(destination.route) {
popUpTo(navController.graph.findStartDestination().id) {
@ -88,23 +103,27 @@ internal fun MainScreen() {
launchSingleTop = true
restoreState = true
}
},
icon = {
}
) {
Icon(
imageVector = if (isSelected) {
destination.selectedIcon
} else {
destination.unselectedIcon
},
contentDescription = destination.label
)
},
label = null
contentDescription = destination.label,
tint = if (isSelected) {
MaterialTheme.colorScheme.primary
} else {
MaterialTheme.colorScheme.onSurfaceVariant
}
)
}
}
}
}
}
}
) { innerPadding ->
Column(
modifier = Modifier