Skip to content

Commit ffa84f8

Browse files
andremionandremion
committed
Polish Compose sample bottom bar to match design and SwiftUI parity
Three changes to AppBottomBar (and consumers): - Add a 1.dp borderCoreSubtle top border above the bottom bar (Notion #1). Bar now has the same divider treatment as the top header. - Switch icon variants on selection (Notion #2). Active tab uses the filled icon variant (e.g. ic_message_bubble_fill, ic_thread_fill); inactive uses the line variant. AppBottomBarOptionTile gains a selectedIcon / unselectedIcon pair instead of a single icon. - Drop the Mentions tab to mirror the SwiftUI demo app's two-tab layout (Chats + Threads). Mentions feature stays available in the SDK; only the sample's bottom-bar entry is removed. ChannelsActivity loses the now-dead MentionsContent / mentionListViewModel and four imports. ChatsActivity's reverse mapping collapses ChatListContentMode.Mentions and .Channels into AppBottomBarOption.CHATS as a graceful fallback. No tab-switch animation — matches SwiftUI's default TabView behaviour and native Android BottomNavigationView, keeping the two SDKs feeling the same.
1 parent b899aaf commit ffa84f8

4 files changed

Lines changed: 41 additions & 60 deletions

File tree

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/feature/channel/list/ChannelsActivity.kt‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ package io.getstream.chat.android.compose.sample.feature.channel.list
1919
import android.content.Context
2020
import android.content.Intent
2121
import android.os.Bundle
22-
import android.widget.Toast
2322
import androidx.activity.ComponentActivity
2423
import androidx.activity.compose.setContent
2524
import androidx.activity.viewModels
@@ -37,7 +36,6 @@ import androidx.compose.foundation.layout.wrapContentHeight
3736
import androidx.compose.foundation.lazy.LazyItemScope
3837
import androidx.compose.foundation.shape.RoundedCornerShape
3938
import androidx.compose.material3.DrawerValue
40-
import androidx.compose.material3.ExperimentalMaterial3Api
4139
import androidx.compose.material3.ModalDrawerSheet
4240
import androidx.compose.material3.ModalNavigationDrawer
4341
import androidx.compose.material3.Scaffold
@@ -83,16 +81,13 @@ import io.getstream.chat.android.compose.ui.channels.list.ChannelItem
8381
import io.getstream.chat.android.compose.ui.channels.list.ChannelList
8482
import io.getstream.chat.android.compose.ui.components.SearchInput
8583
import io.getstream.chat.android.compose.ui.components.channels.buildDefaultChannelActions
86-
import io.getstream.chat.android.compose.ui.mentions.MentionList
8784
import io.getstream.chat.android.compose.ui.theme.ChannelListDividerItemParams
8885
import io.getstream.chat.android.compose.ui.theme.ChannelListItemContentParams
8986
import io.getstream.chat.android.compose.ui.theme.ChatComponentFactory
9087
import io.getstream.chat.android.compose.ui.theme.ChatTheme
9188
import io.getstream.chat.android.compose.ui.threads.ThreadsScreen
9289
import io.getstream.chat.android.compose.viewmodel.channels.ChannelListViewModel
9390
import io.getstream.chat.android.compose.viewmodel.channels.ChannelListViewModelFactory
94-
import io.getstream.chat.android.compose.viewmodel.mentions.MentionListViewModel
95-
import io.getstream.chat.android.compose.viewmodel.mentions.MentionListViewModelFactory
9691
import io.getstream.chat.android.compose.viewmodel.threads.ThreadsViewModelFactory
9792
import io.getstream.chat.android.models.Channel
9893
import io.getstream.chat.android.models.Filters
@@ -125,7 +120,6 @@ class ChannelsActivity : ComponentActivity() {
125120
}
126121

127122
private val channelsViewModel: ChannelListViewModel by viewModels { channelsViewModelFactory }
128-
private val mentionListViewModel: MentionListViewModel by viewModels { MentionListViewModelFactory() }
129123
private val threadsViewModelFactory = ThreadsViewModelFactory(query = QueryThreadsRequest())
130124

131125
@Suppress("LongMethod")
@@ -204,7 +198,6 @@ class ChannelsActivity : ComponentActivity() {
204198
},
205199
)
206200

207-
AppBottomBarOption.MENTIONS -> MentionsContent()
208201
AppBottomBarOption.THREADS -> ThreadsContent(
209202
onHeaderAvatarClick = {
210203
coroutineScope.launch {
@@ -238,17 +231,6 @@ class ChannelsActivity : ComponentActivity() {
238231
// MyCustomUi()
239232
}
240233

241-
@OptIn(ExperimentalMaterial3Api::class)
242-
@Composable
243-
private fun MentionsContent() {
244-
MentionList(
245-
viewModel = mentionListViewModel,
246-
modifier = Modifier.fillMaxSize(),
247-
onItemClick = ::openMessages,
248-
onEvent = { Toast.makeText(this, "Error", Toast.LENGTH_SHORT).show() },
249-
)
250-
}
251-
252234
@Composable
253235
private fun ThreadsContent(onHeaderAvatarClick: () -> Unit) {
254236
ThreadsScreen(

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/chats/ChatsActivity.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,6 @@ class ChatsActivity : ComponentActivity() {
214214
onOptionSelected = { option ->
215215
listContentMode = when (option) {
216216
AppBottomBarOption.CHATS -> ChatListContentMode.Channels
217-
AppBottomBarOption.MENTIONS -> ChatListContentMode.Mentions
218217
AppBottomBarOption.THREADS -> ChatListContentMode.Threads
219218
}
220219
},
@@ -240,8 +239,9 @@ class ChatsActivity : ComponentActivity() {
240239
val unreadThreadsCount by remember { globalStateFlow.flatMapLatest { it.unreadThreadsCount } }
241240
.collectAsStateWithLifecycle(0)
242241
val selectedOption = when (listContentMode) {
243-
ChatListContentMode.Channels -> AppBottomBarOption.CHATS
244-
ChatListContentMode.Mentions -> AppBottomBarOption.MENTIONS
242+
ChatListContentMode.Channels,
243+
ChatListContentMode.Mentions,
244+
-> AppBottomBarOption.CHATS
245245
ChatListContentMode.Threads -> AppBottomBarOption.THREADS
246246
}
247247
AppBottomBar(

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/component/AppBottomBar.kt‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import androidx.compose.foundation.layout.Spacer
2929
import androidx.compose.foundation.layout.fillMaxWidth
3030
import androidx.compose.foundation.layout.height
3131
import androidx.compose.foundation.layout.padding
32+
import androidx.compose.material3.HorizontalDivider
3233
import androidx.compose.material3.Icon
3334
import androidx.compose.material3.Text
3435
import androidx.compose.material3.ripple
@@ -60,41 +61,40 @@ fun AppBottomBar(
6061
selectedOption: AppBottomBarOption,
6162
onOptionSelected: (AppBottomBarOption) -> Unit,
6263
) {
63-
Row(
64-
modifier = Modifier
65-
.fillMaxWidth()
66-
.background(ChatTheme.colors.backgroundCoreElevation1),
67-
verticalAlignment = Alignment.CenterVertically,
68-
horizontalArrangement = Arrangement.SpaceEvenly,
69-
) {
70-
AppBottomBarOptionTile(
71-
icon = ComposeR.drawable.stream_design_ic_message_bubble_fill,
72-
text = R.string.app_bottom_bar_chats,
73-
isSelected = selectedOption == AppBottomBarOption.CHATS,
74-
onClick = { onOptionSelected(AppBottomBarOption.CHATS) },
75-
decorationBadge = {
76-
if (unreadChannelsCount > 0) {
77-
UnreadCountIndicator(unreadChannelsCount)
78-
}
79-
},
80-
)
81-
AppBottomBarOptionTile(
82-
icon = ComposeR.drawable.stream_design_ic_mention,
83-
text = R.string.app_bottom_bar_mentions,
84-
isSelected = selectedOption == AppBottomBarOption.MENTIONS,
85-
onClick = { onOptionSelected(AppBottomBarOption.MENTIONS) },
86-
)
87-
AppBottomBarOptionTile(
88-
icon = ComposeR.drawable.stream_design_ic_thread,
89-
text = R.string.app_bottom_bar_threads,
90-
isSelected = selectedOption == AppBottomBarOption.THREADS,
91-
onClick = { onOptionSelected(AppBottomBarOption.THREADS) },
92-
decorationBadge = {
93-
if (unreadThreadsCount > 0) {
94-
UnreadCountIndicator(unreadThreadsCount)
95-
}
96-
},
97-
)
64+
Column(modifier = Modifier.fillMaxWidth()) {
65+
HorizontalDivider(thickness = 1.dp, color = ChatTheme.colors.borderCoreSubtle)
66+
Row(
67+
modifier = Modifier
68+
.fillMaxWidth()
69+
.background(ChatTheme.colors.backgroundCoreElevation1),
70+
verticalAlignment = Alignment.CenterVertically,
71+
horizontalArrangement = Arrangement.SpaceEvenly,
72+
) {
73+
AppBottomBarOptionTile(
74+
selectedIcon = ComposeR.drawable.stream_design_ic_message_bubble_fill,
75+
unselectedIcon = ComposeR.drawable.stream_design_ic_message_bubble,
76+
text = R.string.app_bottom_bar_chats,
77+
isSelected = selectedOption == AppBottomBarOption.CHATS,
78+
onClick = { onOptionSelected(AppBottomBarOption.CHATS) },
79+
decorationBadge = {
80+
if (unreadChannelsCount > 0) {
81+
UnreadCountIndicator(unreadChannelsCount)
82+
}
83+
},
84+
)
85+
AppBottomBarOptionTile(
86+
selectedIcon = ComposeR.drawable.stream_design_ic_thread_fill,
87+
unselectedIcon = ComposeR.drawable.stream_design_ic_thread,
88+
text = R.string.app_bottom_bar_threads,
89+
isSelected = selectedOption == AppBottomBarOption.THREADS,
90+
onClick = { onOptionSelected(AppBottomBarOption.THREADS) },
91+
decorationBadge = {
92+
if (unreadThreadsCount > 0) {
93+
UnreadCountIndicator(unreadThreadsCount)
94+
}
95+
},
96+
)
97+
}
9898
}
9999
}
100100

@@ -103,13 +103,13 @@ fun AppBottomBar(
103103
*/
104104
enum class AppBottomBarOption {
105105
CHATS,
106-
MENTIONS,
107106
THREADS,
108107
}
109108

110109
@Composable
111110
private fun AppBottomBarOptionTile(
112-
@DrawableRes icon: Int,
111+
@DrawableRes selectedIcon: Int,
112+
@DrawableRes unselectedIcon: Int,
113113
@StringRes text: Int,
114114
isSelected: Boolean,
115115
onClick: () -> Unit,
@@ -133,7 +133,7 @@ private fun AppBottomBarOptionTile(
133133
horizontalAlignment = Alignment.CenterHorizontally,
134134
) {
135135
Icon(
136-
painter = painterResource(icon),
136+
painter = painterResource(if (isSelected) selectedIcon else unselectedIcon),
137137
contentDescription = null,
138138
tint = contentColor,
139139
)

‎stream-chat-android-compose-sample/src/main/res/values/strings.xml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@
7171

7272
<!-- App Bottom Bar -->
7373
<string name="app_bottom_bar_chats">Chats</string>
74-
<string name="app_bottom_bar_mentions">Mentions</string>
7574
<string name="app_bottom_bar_threads">Threads</string>
7675

7776
<!-- Draft Channel -->

0 commit comments

Comments
 (0)