tencent cloud

Chat

Android (Compose)

Download
Focus Mode
Font Size
Last updated: 2026-06-03 16:31:49
This guide shows you how to build a chat interface.

Development Environment Requirements

Android Studio Arctic Fox (2020.3.1) or later
Android SDK API Level 21 (Android 5.0) or higher

Prerequisites

Before you begin building the interface, complete the following steps:
1. Create an application in the console.
2. Create at least two user accounts in the console.
3. Integrate TUIKit Compose.
4. Call the login method of LoginStore to authenticate with the component.
Notice:
1. You only need to log in once each time the app launches.
2. Verify that login is successful. We recommend handling all subsequent operations inside the login success callback.
If you haven’t finished these four steps, see the relevant instructions in the Quick Start Guide before proceeding. Otherwise, you may encounter issues when implementing the features described below.
If you have completed these steps, continue reading.

Step-by-Step Instructions

One-on-one Chat Interface

To navigate to the one-on-one messages interface, refer directly to the Quick Start Guide.

Group Chat Interface

To access the group chat message interface, you need a valid groupID. Confirm that you have an existing groupID.
If you don’t have a group yet, create one in the Console. Go to: Chat > Group Management > Add Group.
After creating the group, the groupID will be displayed on the page:

The group chat interface uses two @Composable components: MessageList and MessageInput.
Note: If you use the sample code below, make sure to populate the following parameters:
sdkAppID: The sdkAppID you obtained earlier.
senderUserID: The userID of the message sender—this is user1 you created in the Quick Start Guide.
senderUserSig: The userSig for the sender—this is the userSig for user1 from the Quick Start Guide.
groupID: The group ID.
The app loads the group chat message list page on startup. Example code:
// GroupChatActivity.kt
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.trtc.tuikit.atomicx.basecomponent.theme.LocalTheme
import io.trtc.tuikit.atomicx.messageinput.ui.MessageInput
import io.trtc.tuikit.atomicx.messagelist.ui.MessageList
import io.trtc.tuikit.atomicxcore.api.CompletionHandler
import io.trtc.tuikit.atomicxcore.api.login.LoginStore

class GroupChatActivity : AppCompatActivity() {

private val sdkAppID: Int = 1234567890 // TODO: Enter your sdkAppID here
private val senderUserID = "" // TODO: Enter your userID here
private val senderUserSig = "" // TODO: Enter your generated userSig here
private val groupID = "" // TODO: Enter your groupID here

// C2C conversationID: "c2c_${userID}", Group conversationID: "group_${groupID}"
private val conversationID: String get() = "group_${groupID}"

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
login()
}

private fun login() {
LoginStore.shared.login(this, sdkAppID, senderUserID, senderUserSig, object : CompletionHandler {
override fun onSuccess() {
showGroupChatPage()
}
override fun onFailure(code: Int, desc: String) {
// Handle login failure
}
})
}

private fun showGroupChatPage() {
setContent {
val colors = LocalTheme.current.colors
Column(
modifier = Modifier
.fillMaxSize()
.background(color = colors.bgColorOperate)
.statusBarsPadding()
) {
// Navigation Bar
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
.height(44.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = groupID,
fontSize = 17.sp,
fontWeight = FontWeight.W600,
color = colors.textColorPrimary
)
}

HorizontalDivider(color = colors.strokeColorPrimary)

// MessageList
Box(modifier = Modifier.weight(1f)) {
MessageList(
conversationID = conversationID,
onUserClick = { userID ->
// Handle user avatar click
}
)
}
// MessageInput
MessageInput(
conversationID = conversationID,
modifier = Modifier.navigationBarsPadding()
)
}
}
}
}
Sample interface:


Further Practice

To explore more interface implementations, you can run the Chat Demo source code locally.

Contact Us

If you have questions or feedback during integration, contact us at any time.


Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback