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