Skip to content

Commit 4ec47cf

Browse files
filbabicfilbabic
committed
Updated tutorial version and code matching the customization guides
1 parent ee7d3f0 commit 4ec47cf

File tree

3 files changed

+159
-12
lines changed

3 files changed

+159
-12
lines changed

‎app/build.gradle‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,13 @@ dependencies {
4848
implementation "io.getstream:stream-chat-android-compose:$streamVersion"
4949

5050
implementation 'androidx.core:core-ktx:1.6.0'
51-
implementation 'androidx.appcompat:appcompat:1.3.0'
51+
implementation 'androidx.appcompat:appcompat:1.3.1'
5252
implementation 'com.google.android.material:material:1.4.0'
5353
implementation "androidx.compose.ui:ui:$compose_version"
5454
implementation "androidx.compose.material:material:$compose_version"
5555
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
5656
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
57-
implementation 'androidx.activity:activity-compose:1.3.0-rc02'
57+
implementation 'androidx.activity:activity-compose:1.3.0'
5858
testImplementation 'junit:junit:4.+'
5959
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
6060
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

‎app/src/main/java/com/example/chattutorial/MessagesActivity.kt‎

Lines changed: 154 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,57 @@
11
package com.example.chattutorial
22

3+
import android.content.ClipboardManager
34
import android.content.Context
45
import android.content.Intent
56
import android.os.Bundle
67
import androidx.activity.compose.setContent
78
import androidx.appcompat.app.AppCompatActivity
8-
import io.getstream.chat.android.compose.ui.messages.MessagesScreen
9+
import androidx.compose.foundation.layout.*
10+
import androidx.compose.foundation.shape.RoundedCornerShape
11+
import androidx.compose.material.Icon
12+
import androidx.compose.material.Scaffold
13+
import androidx.compose.material.Text
14+
import androidx.compose.material.icons.Icons
15+
import androidx.compose.runtime.Composable
16+
import androidx.compose.ui.Alignment
17+
import androidx.compose.ui.Modifier
18+
import androidx.compose.ui.graphics.RectangleShape
19+
import androidx.compose.ui.unit.dp
20+
import io.getstream.chat.android.client.ChatClient
21+
import io.getstream.chat.android.compose.state.messages.Thread
22+
import io.getstream.chat.android.compose.ui.messages.attachments.AttachmentsPicker
23+
import io.getstream.chat.android.compose.ui.messages.composer.MessageComposer
24+
import io.getstream.chat.android.compose.ui.messages.composer.components.MessageInput
25+
import io.getstream.chat.android.compose.ui.messages.list.MessageList
26+
import io.getstream.chat.android.compose.ui.messages.overlay.SelectedMessageOverlay
27+
import io.getstream.chat.android.compose.ui.messages.overlay.defaultMessageOptions
928
import io.getstream.chat.android.compose.ui.theme.ChatTheme
29+
import io.getstream.chat.android.compose.ui.theme.StreamShapes
30+
import io.getstream.chat.android.compose.viewmodel.messages.AttachmentsPickerViewModel
31+
import io.getstream.chat.android.compose.viewmodel.messages.MessageComposerViewModel
32+
import io.getstream.chat.android.compose.viewmodel.messages.MessageListViewModel
33+
import io.getstream.chat.android.compose.viewmodel.messages.MessagesViewModelFactory
34+
import io.getstream.chat.android.offline.ChatDomain
1035

1136
class MessagesActivity : AppCompatActivity() {
1237

38+
// Build the ViewModel factory
39+
private val factory by lazy {
40+
MessagesViewModelFactory(
41+
this,
42+
getSystemService(CLIPBOARD_SERVICE) as ClipboardManager,
43+
ChatClient.instance(),
44+
ChatDomain.instance(),
45+
intent.getStringExtra(KEY_CHANNEL_ID) ?: "",
46+
30
47+
)
48+
}
49+
50+
// Build the required ViewModels, using the 'factory'
51+
private val listViewModel: MessageListViewModel by viewModels { factory }
52+
private val attachmentsPickerViewModel: AttachmentsPickerViewModel by viewModels { factory }
53+
private val composerViewModel: MessageComposerViewModel by viewModels { factory }
54+
1355
override fun onCreate(savedInstanceState: Bundle?) {
1456
super.onCreate(savedInstanceState)
1557
// 1 - Load the ID of the selected channel
@@ -22,16 +64,121 @@ class MessagesActivity : AppCompatActivity() {
2264

2365
// 2 - Add the MessagesScreen to your UI
2466
setContent {
25-
ChatTheme {
26-
MessagesScreen(
27-
channelId = channelId,
28-
messageLimit = 30,
29-
onBackPressed = { finish() }
67+
ChatTheme(
68+
shapes = StreamShapes(
69+
avatar = RoundedCornerShape(8.dp),
70+
attachment = RoundedCornerShape(16.dp),
71+
myMessageBubble = RoundedCornerShape(16.dp),
72+
otherMessageBubble = RoundedCornerShape(16.dp),
73+
inputField = RectangleShape
74+
)
75+
) {
76+
MyCustomUi()
77+
}
78+
}
79+
}
80+
81+
@Composable
82+
fun MyCustomUi() {
83+
// load the data
84+
val isShowingAttachments = attachmentsPickerViewModel.isShowingAttachments
85+
val selectedMessage = listViewModel.currentMessagesState.selectedMessage
86+
val user by listViewModel.user.collectAsState()
87+
88+
Box(modifier = Modifier.fillMaxSize()) {
89+
Scaffold(
90+
modifier = Modifier.fillMaxSize(),
91+
bottomBar = {
92+
MyCustomComposer()
93+
}
94+
) {
95+
MessageList( // build the MessageList and connect the actions
96+
modifier = Modifier
97+
.padding(it)
98+
.fillMaxSize(),
99+
viewModel = listViewModel,
100+
onThreadClick = { message ->
101+
composerViewModel.setMessageMode(Thread(message))
102+
listViewModel.openMessageThread(message)
103+
}
104+
)
105+
}
106+
107+
// show attachments picker when necessary
108+
if (isShowingAttachments) {
109+
AttachmentsPicker(
110+
attachmentsPickerViewModel = attachmentsPickerViewModel,
111+
modifier = Modifier
112+
.align(Alignment.BottomCenter)
113+
.height(350.dp),
114+
onAttachmentsSelected = { attachments ->
115+
attachmentsPickerViewModel.changeAttachmentState(false)
116+
composerViewModel.addSelectedAttachments(attachments)
117+
},
118+
onDismiss = {
119+
attachmentsPickerViewModel.changeAttachmentState(false)
120+
attachmentsPickerViewModel.dismissAttachments()
121+
}
122+
)
123+
}
124+
125+
// Show the overlay if we've selected a message
126+
if (selectedMessage != null) {
127+
SelectedMessageOverlay(
128+
messageOptions = defaultMessageOptions(selectedMessage, user, listViewModel.isInThread),
129+
message = selectedMessage,
130+
onMessageAction = { action ->
131+
composerViewModel.performMessageAction(action)
132+
listViewModel.performMessageAction(action)
133+
},
134+
onDismiss = { listViewModel.removeOverlay() }
30135
)
31136
}
32137
}
33138
}
34139

140+
@Composable
141+
fun MyCustomComposer() {
142+
MessageComposer(
143+
modifier = Modifier
144+
.fillMaxWidth()
145+
.wrapContentHeight(),
146+
viewModel = composerViewModel,
147+
integrations = {},
148+
input = {
149+
MessageInput(
150+
modifier = Modifier
151+
.fillMaxWidth()
152+
.weight(7f)
153+
.padding(start = 8.dp),
154+
value = composerViewModel.input,
155+
attachments = composerViewModel.selectedAttachments,
156+
activeAction = composerViewModel.activeAction,
157+
onValueChange = { composerViewModel.setMessageInput(it) },
158+
onAttachmentRemoved = { composerViewModel.removeSelectedAttachment(it) },
159+
label = {
160+
Row(
161+
Modifier.wrapContentWidth(),
162+
verticalAlignment = Alignment.CenterVertically
163+
) {
164+
Icon(
165+
imageVector = Icons.Default.Keyboard,
166+
contentDescription = null,
167+
tint = ChatTheme.colors.textLowEmphasis
168+
)
169+
170+
Text(
171+
modifier = Modifier.padding(start = 4.dp),
172+
text = "Type something",
173+
color = ChatTheme.colors.textLowEmphasis
174+
)
175+
}
176+
}
177+
)
178+
}
179+
)
180+
}
181+
35182
// 3 - Create an intent to start this Activity, with a given channelId
36183
companion object {
37184
private const val KEY_CHANNEL_ID = "channelId"
@@ -42,4 +189,4 @@ class MessagesActivity : AppCompatActivity() {
42189
}
43190
}
44191
}
45-
}
192+
}

‎build.gradle‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
// Top-level build file where you can add configuration options common to all sub-projects/modules.
22
buildscript {
33
ext {
4-
compose_version = '1.0.0-rc02'
4+
compose_version = '1.0.0'
55
}
66
repositories {
77
google()
88
mavenCentral()
99
}
1010
dependencies {
11-
classpath "com.android.tools.build:gradle:7.0.0-rc01"
11+
classpath 'com.android.tools.build:gradle:7.0.0'
1212
classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.10'
1313

1414
// NOTE: Do not place your application dependencies here; they belong
@@ -18,4 +18,4 @@ buildscript {
1818

1919
task clean(type: Delete) {
2020
delete rootProject.buildDir
21-
}
21+
}

0 commit comments

Comments
 (0)