Skip to content

Commit 6cf947a

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 56343a6 commit 6cf947a

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
@@ -84,7 +82,6 @@ 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.ChannelOptionsVisibility
8684
import io.getstream.chat.android.compose.ui.components.channels.buildDefaultChannelActions
87-
import io.getstream.chat.android.compose.ui.mentions.MentionList
8885
import io.getstream.chat.android.compose.ui.theme.ChannelListConfig
8986
import io.getstream.chat.android.compose.ui.theme.ChannelListDividerItemParams
9087
import io.getstream.chat.android.compose.ui.theme.ChannelListItemContentParams
@@ -94,8 +91,6 @@ import io.getstream.chat.android.compose.ui.theme.ChatUiConfig
9491
import io.getstream.chat.android.compose.ui.threads.ThreadsScreen
9592
import io.getstream.chat.android.compose.viewmodel.channels.ChannelListViewModel
9693
import io.getstream.chat.android.compose.viewmodel.channels.ChannelListViewModelFactory
97-
import io.getstream.chat.android.compose.viewmodel.mentions.MentionListViewModel
98-
import io.getstream.chat.android.compose.viewmodel.mentions.MentionListViewModelFactory
9994
import io.getstream.chat.android.compose.viewmodel.threads.ThreadsViewModelFactory
10095
import io.getstream.chat.android.models.Channel
10196
import io.getstream.chat.android.models.Message
@@ -144,7 +139,6 @@ class ChannelsActivity : ComponentActivity() {
144139
}
145140

146141
private val channelsViewModel: ChannelListViewModel by viewModels { channelsViewModelFactory }
147-
private val mentionListViewModel: MentionListViewModel by viewModels { MentionListViewModelFactory() }
148142
private val threadsViewModelFactory = ThreadsViewModelFactory(query = QueryThreadsRequest())
149143

150144
@Suppress("LongMethod")
@@ -231,7 +225,6 @@ class ChannelsActivity : ComponentActivity() {
231225
},
232226
)
233227

234-
AppBottomBarOption.MENTIONS -> MentionsContent()
235228
AppBottomBarOption.THREADS -> ThreadsContent(
236229
onHeaderAvatarClick = {
237230
coroutineScope.launch {
@@ -265,17 +258,6 @@ class ChannelsActivity : ComponentActivity() {
265258
// MyCustomUi()
266259
}
267260

268-
@OptIn(ExperimentalMaterial3Api::class)
269-
@Composable
270-
private fun MentionsContent() {
271-
MentionList(
272-
viewModel = mentionListViewModel,
273-
modifier = Modifier.fillMaxSize(),
274-
onItemClick = ::openMessages,
275-
onEvent = { Toast.makeText(this, "Error", Toast.LENGTH_SHORT).show() },
276-
)
277-
}
278-
279261
@Composable
280262
private fun ThreadsContent(onHeaderAvatarClick: () -> Unit) {
281263
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
@@ -230,7 +230,6 @@ class ChatsActivity : ComponentActivity() {
230230
onOptionSelected = { option ->
231231
listContentMode = when (option) {
232232
AppBottomBarOption.CHATS -> ChatListContentMode.Channels
233-
AppBottomBarOption.MENTIONS -> ChatListContentMode.Mentions
234233
AppBottomBarOption.THREADS -> ChatListContentMode.Threads
235234
}
236235
},
@@ -256,8 +255,9 @@ class ChatsActivity : ComponentActivity() {
256255
val unreadThreadsCount by remember { globalStateFlow.flatMapLatest { it.unreadThreadsCount } }
257256
.collectAsStateWithLifecycle(0)
258257
val selectedOption = when (listContentMode) {
259-
ChatListContentMode.Channels -> AppBottomBarOption.CHATS
260-
ChatListContentMode.Mentions -> AppBottomBarOption.MENTIONS
258+
ChatListContentMode.Channels,
259+
ChatListContentMode.Mentions,
260+
-> AppBottomBarOption.CHATS
261261
ChatListContentMode.Threads -> AppBottomBarOption.THREADS
262262
}
263263
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
@@ -73,7 +73,6 @@
7373

7474
<!-- App Bottom Bar -->
7575
<string name="app_bottom_bar_chats">Chats</string>
76-
<string name="app_bottom_bar_mentions">Mentions</string>
7776
<string name="app_bottom_bar_threads">Threads</string>
7877

7978
<!-- Draft Channel -->

0 commit comments

Comments
 (0)