Skip to content

Commit 91fe761

Browse files
sherlockwisdomsherlockwisdom
authored
Merge pull request #304 from smswithoutborders/feat/bottom-navbar
feat/ui: refine bottom navigation appearance and tab icons
2 parents 0d2824c + c9310e6 commit 91fe761

1 file changed

Lines changed: 113 additions & 101 deletions

File tree

‎app/src/main/java/com/example/sw0b_001/ui/appbars/BottomNavBar.kt‎

Lines changed: 113 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
package com.example.sw0b_001.ui.appbars
22

3-
import androidx.compose.foundation.layout.Box
4-
import androidx.compose.foundation.layout.fillMaxWidth
5-
import androidx.compose.foundation.layout.padding
63
import androidx.compose.foundation.layout.size
74
import androidx.compose.foundation.shape.RoundedCornerShape
85
import androidx.compose.material.icons.Icons
9-
import androidx.compose.material.icons.filled.ChatBubbleOutline
6+
import androidx.compose.material.icons.filled.Chat
107
import androidx.compose.material.icons.filled.GridView
11-
import androidx.compose.material.icons.filled.Public
8+
import androidx.compose.material.icons.filled.PhoneForwarded
9+
import androidx.compose.material.icons.outlined.ChatBubbleOutline
10+
import androidx.compose.material.icons.outlined.GridView
11+
import androidx.compose.material.icons.outlined.PhoneForwarded
1212
import androidx.compose.material3.Icon
1313
import androidx.compose.material3.MaterialTheme
1414
import androidx.compose.material3.NavigationBar
1515
import androidx.compose.material3.NavigationBarItem
16+
import androidx.compose.material3.NavigationBarItemDefaults
1617
import androidx.compose.material3.Surface
1718
import androidx.compose.material3.Text
1819
import androidx.compose.runtime.Composable
1920
import androidx.compose.ui.Modifier
2021
import androidx.compose.ui.graphics.Color
22+
import androidx.compose.ui.graphics.vector.ImageVector
2123
import androidx.compose.ui.platform.LocalContext
2224
import androidx.compose.ui.platform.LocalInspectionMode
2325
import androidx.compose.ui.res.stringResource
@@ -38,111 +40,121 @@ fun BottomNavBar(
3840
val context = LocalContext.current
3941
val isDefaultSmsApp = if (LocalInspectionMode.current) true else context.isDefault()
4042

41-
Box(
42-
modifier = Modifier
43-
.fillMaxWidth()
44-
.padding(horizontal = 20.dp, vertical = 16.dp)
43+
Surface(
44+
shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
45+
tonalElevation = 3.dp,
46+
shadowElevation = 6.dp,
47+
color = MaterialTheme.colorScheme.surface,
4548
) {
46-
Surface(
47-
shape = RoundedCornerShape(30.dp),
48-
tonalElevation = 6.dp,
49-
shadowElevation = 8.dp,
50-
color = MaterialTheme.colorScheme.surface
49+
NavigationBar(
50+
containerColor = Color.Transparent,
51+
tonalElevation = 0.dp,
5152
) {
52-
NavigationBar(
53-
containerColor = Color.Transparent,
54-
tonalElevation = 0.dp
55-
) {
5653

57-
NavigationBarItem(
58-
icon = {
59-
Icon(
60-
Icons.Filled.ChatBubbleOutline,
61-
contentDescription = stringResource(R.string.Messages),
62-
modifier = Modifier.size(20.dp)
63-
)
64-
},
65-
label = {
66-
Text(
67-
text = stringResource(R.string.Messages),
68-
style = MaterialTheme.typography.labelSmall
69-
)
70-
},
71-
selected = selectedTab == BottomTabsItems.BottomBarRecentTab,
72-
onClick = {
73-
onChangeTab(BottomTabsItems.BottomBarRecentTab)
74-
},
75-
)
54+
val isMessagesSelected = selectedTab == BottomTabsItems.BottomBarRecentTab
55+
NavigationBarItem(
56+
icon = {
57+
Icon(
58+
imageVector = navIcon(
59+
selected = isMessagesSelected,
60+
filled = Icons.Filled.Chat,
61+
outlined = Icons.Outlined.ChatBubbleOutline,
62+
),
63+
contentDescription = stringResource(R.string.Messages),
64+
modifier = Modifier.size(24.dp)
65+
)
66+
},
67+
label = {
68+
Text(
69+
text = stringResource(R.string.Messages),
70+
style = MaterialTheme.typography.labelSmall
71+
)
72+
},
73+
selected = isMessagesSelected,
74+
onClick = {
75+
onChangeTab(BottomTabsItems.BottomBarRecentTab)
76+
},
77+
colors = NavigationBarItemDefaults.colors(
78+
indicatorColor = Color.Transparent,
79+
selectedIconColor = MaterialTheme.colorScheme.primary,
80+
selectedTextColor = MaterialTheme.colorScheme.primary,
81+
unselectedIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
82+
unselectedTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
83+
),
84+
)
7685

77-
NavigationBarItem(
78-
icon = {
79-
Icon(
80-
Icons.Filled.GridView,
81-
contentDescription = stringResource(R.string.platforms),
82-
modifier = Modifier.size(20.dp)
83-
)
84-
},
85-
label = {
86-
Text(
87-
text = stringResource(R.string.platforms),
88-
style = MaterialTheme.typography.labelSmall
89-
)
90-
},
91-
selected = selectedTab == BottomTabsItems.BottomBarPlatformsTab,
92-
onClick = {
93-
onChangeTab(BottomTabsItems.BottomBarPlatformsTab,)
94-
},
95-
)
86+
val isPlatformsSelected = selectedTab == BottomTabsItems.BottomBarPlatformsTab
87+
NavigationBarItem(
88+
icon = {
89+
Icon(
90+
imageVector = navIcon(
91+
selected = isPlatformsSelected,
92+
filled = Icons.Filled.GridView,
93+
outlined = Icons.Outlined.GridView,
94+
),
95+
contentDescription = stringResource(R.string.platforms),
96+
modifier = Modifier.size(24.dp)
97+
)
98+
},
99+
label = {
100+
Text(
101+
text = stringResource(R.string.platforms),
102+
style = MaterialTheme.typography.labelSmall
103+
)
104+
},
105+
selected = isPlatformsSelected,
106+
onClick = {
107+
onChangeTab(BottomTabsItems.BottomBarPlatformsTab)
108+
},
109+
colors = NavigationBarItemDefaults.colors(
110+
indicatorColor = Color.Transparent,
111+
selectedIconColor = MaterialTheme.colorScheme.primary,
112+
selectedTextColor = MaterialTheme.colorScheme.primary,
113+
unselectedIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
114+
unselectedTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
115+
),
116+
)
96117

97-
98-
NavigationBarItem(
99-
icon = {
100-
Icon(
101-
Icons.Filled.Public,
102-
contentDescription = stringResource(R.string.countries),
103-
modifier = Modifier.size(20.dp)
104-
)
105-
},
106-
label = {
107-
Text(
108-
text = stringResource(R.string.routing_numbers),
109-
style = MaterialTheme.typography.labelSmall
110-
)
111-
},
112-
selected = selectedTab == BottomTabsItems.BottomBarCountriesTab,
113-
onClick = {
114-
onChangeTab(BottomTabsItems.BottomBarCountriesTab,)
115-
},
116-
)
117-
118-
119-
// NavigationBarItem(
120-
// icon = {
121-
// Icon(
122-
// Icons.Filled.Settings,
123-
// contentDescription = stringResource(R.string.Settings),
124-
// modifier = Modifier.size(20.dp)
125-
// )
126-
// },
127-
// label = {
128-
// Text(
129-
// text = stringResource(R.string.Settings),
130-
// style = MaterialTheme.typography.labelSmall
131-
// )
132-
// },
133-
// selected = false,
134-
// onClick = {
135-
// navController.navigate(SettingsScreen)
136-
// },
137-
// )
138-
139-
140-
}
118+
val isRoutingSelected = selectedTab == BottomTabsItems.BottomBarCountriesTab
119+
NavigationBarItem(
120+
icon = {
121+
Icon(
122+
imageVector = navIcon(
123+
selected = isRoutingSelected,
124+
filled = Icons.Filled.PhoneForwarded,
125+
outlined = Icons.Outlined.PhoneForwarded,
126+
),
127+
contentDescription = stringResource(R.string.countries),
128+
modifier = Modifier.size(24.dp)
129+
)
130+
},
131+
label = {
132+
Text(
133+
text = stringResource(R.string.routing_numbers),
134+
style = MaterialTheme.typography.labelSmall
135+
)
136+
},
137+
selected = isRoutingSelected,
138+
onClick = {
139+
onChangeTab(BottomTabsItems.BottomBarCountriesTab)
140+
},
141+
colors = NavigationBarItemDefaults.colors(
142+
indicatorColor = Color.Transparent,
143+
selectedIconColor = MaterialTheme.colorScheme.primary,
144+
selectedTextColor = MaterialTheme.colorScheme.primary,
145+
unselectedIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
146+
unselectedTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
147+
),
148+
)
141149
}
142150
}
143151
}
144152

145-
153+
private fun navIcon(
154+
selected: Boolean,
155+
filled: ImageVector,
156+
outlined: ImageVector,
157+
): ImageVector = if (selected) filled else outlined
146158

147159
@Preview
148160
@Composable

0 commit comments

Comments
 (0)