From ee52785b1b4076312e0460b38f39f8d3e62df757 Mon Sep 17 00:00:00 2001 From: Codex Date: Mon, 9 Mar 2026 21:12:59 +0300 Subject: [PATCH] android: tune global bottom tabs to telegram-like style --- android/CHANGELOG.md | 7 +++ .../messenger/ui/navigation/AppNavGraph.kt | 46 +++++++++++++++++-- 2 files changed, 48 insertions(+), 5 deletions(-) diff --git a/android/CHANGELOG.md b/android/CHANGELOG.md index e544d3b..5d291d9 100644 --- a/android/CHANGELOG.md +++ b/android/CHANGELOG.md @@ -487,3 +487,10 @@ - Replaced custom pill-row main bar with compact `NavigationBar` inside rounded container for stable 4-tab layout on small screens. - Added bottom content paddings for `Chats/Contacts/Settings/Profile` pages so content is not obscured by the floating main bar. - Raised chats management FAB offset to avoid overlap with the global bottom bar. + +### Step 78 - Telegram-like bottom tabs visual tuning +- Tuned shared main bar visual style to better match Telegram references: + - rounded floating container with subtle elevation, + - unified selected/unselected item colors, + - stable 4-item navigation with icons + labels. +- Kept scroll-hide/show behavior and page-level navigation unchanged. diff --git a/android/app/src/main/java/ru/daemonlord/messenger/ui/navigation/AppNavGraph.kt b/android/app/src/main/java/ru/daemonlord/messenger/ui/navigation/AppNavGraph.kt index 1ef4bff..f59d7ad 100644 --- a/android/app/src/main/java/ru/daemonlord/messenger/ui/navigation/AppNavGraph.kt +++ b/android/app/src/main/java/ru/daemonlord/messenger/ui/navigation/AppNavGraph.kt @@ -15,7 +15,7 @@ import androidx.compose.foundation.layout.navigationBarsPadding import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.windowInsetsPadding -import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.Chat import androidx.compose.material.icons.filled.Contacts @@ -26,6 +26,7 @@ import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.MaterialTheme import androidx.compose.material3.NavigationBar import androidx.compose.material3.NavigationBarItem +import androidx.compose.material3.NavigationBarItemDefaults import androidx.compose.material3.Surface import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.fadeIn @@ -43,6 +44,7 @@ import androidx.compose.ui.platform.LocalContext import androidx.core.content.ContextCompat import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel @@ -298,13 +300,15 @@ private fun MainBottomBar( modifier = Modifier .padding(horizontal = 12.dp) .fillMaxWidth(), - shape = CircleShape, - color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.92f), + shape = RoundedCornerShape(28.dp), + color = MaterialTheme.colorScheme.surface.copy(alpha = 0.88f), + tonalElevation = 2.dp, + shadowElevation = 8.dp, ) { NavigationBar( - containerColor = androidx.compose.ui.graphics.Color.Transparent, + containerColor = Color.Transparent, tonalElevation = 0.dp, - modifier = Modifier.padding(horizontal = 8.dp), + modifier = Modifier.padding(horizontal = 6.dp, vertical = 2.dp), ) { NavigationBarItem( selected = currentRoute == Routes.Chats, @@ -313,6 +317,14 @@ private fun MainBottomBar( label = { androidx.compose.material3.Text("Chats", maxLines = 1, overflow = TextOverflow.Ellipsis) }, + alwaysShowLabel = true, + colors = NavigationBarItemDefaults.colors( + selectedIconColor = MaterialTheme.colorScheme.primary, + selectedTextColor = MaterialTheme.colorScheme.primary, + indicatorColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.18f), + unselectedIconColor = MaterialTheme.colorScheme.onSurfaceVariant, + unselectedTextColor = MaterialTheme.colorScheme.onSurfaceVariant, + ), ) NavigationBarItem( selected = currentRoute == Routes.Contacts, @@ -321,6 +333,14 @@ private fun MainBottomBar( label = { androidx.compose.material3.Text("Contacts", maxLines = 1, overflow = TextOverflow.Ellipsis) }, + alwaysShowLabel = true, + colors = NavigationBarItemDefaults.colors( + selectedIconColor = MaterialTheme.colorScheme.primary, + selectedTextColor = MaterialTheme.colorScheme.primary, + indicatorColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.18f), + unselectedIconColor = MaterialTheme.colorScheme.onSurfaceVariant, + unselectedTextColor = MaterialTheme.colorScheme.onSurfaceVariant, + ), ) NavigationBarItem( selected = currentRoute == Routes.Settings, @@ -329,6 +349,14 @@ private fun MainBottomBar( label = { androidx.compose.material3.Text("Settings", maxLines = 1, overflow = TextOverflow.Ellipsis) }, + alwaysShowLabel = true, + colors = NavigationBarItemDefaults.colors( + selectedIconColor = MaterialTheme.colorScheme.primary, + selectedTextColor = MaterialTheme.colorScheme.primary, + indicatorColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.18f), + unselectedIconColor = MaterialTheme.colorScheme.onSurfaceVariant, + unselectedTextColor = MaterialTheme.colorScheme.onSurfaceVariant, + ), ) NavigationBarItem( selected = currentRoute == Routes.Profile, @@ -337,6 +365,14 @@ private fun MainBottomBar( label = { androidx.compose.material3.Text("Profile", maxLines = 1, overflow = TextOverflow.Ellipsis) }, + alwaysShowLabel = true, + colors = NavigationBarItemDefaults.colors( + selectedIconColor = MaterialTheme.colorScheme.primary, + selectedTextColor = MaterialTheme.colorScheme.primary, + indicatorColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.18f), + unselectedIconColor = MaterialTheme.colorScheme.onSurfaceVariant, + unselectedTextColor = MaterialTheme.colorScheme.onSurfaceVariant, + ), ) } }