tencent cloud

Chat

ドキュメントChatChat Interaction (UI Included)Build Basic InterfacesContact ListAndroid (Compose)

Android (Compose)

ダウンロード
フォーカスモード
フォントサイズ
最終更新日: 2026-06-03 16:38:50
This guide walks you through building the Contacts interface.

Development Environment Requirements

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

Prerequisites

Before you begin implementing the Contacts interface, make sure you have completed the following steps:
1. Created an application in the console.
2. Created at least two user accounts in the console.
3. Integrated TUIKit Compose.
4. Called the login method of LoginStore to authenticate the component.
Note：
1. Log in only once each time the app starts.
2. Ensure that the login is successful. We recommend handling subsequent operations in the login success callback.
If you have not completed these four steps, refer to Quick Start for guidance. Otherwise, you may encounter issues implementing the features below.
If you have completed the prerequisites, continue with the following instructions.

Implementation Steps

The Contacts interface is built using the ContactList @Composable component.
Note：
If no contacts have been added, the Contacts interface will be empty. Once contacts are added, they will appear in the list. To add contacts using TUIKit Compose, see the documentation: Add Contacts.
If you are using the sample code provided, you must pre-fill the following parameters:
sdkAppID: The sdkAppID you obtained earlier.
userID: The operator’s userID (e.g., user1, created during Quick Start).
userSig: The userSig for user1, generated during Quick Start.
The app will load the Contacts interface at startup. Sample implementation:
// ContactListActivity.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.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
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.contactlist.ui.ContactList
import io.trtc.tuikit.atomicxcore.api.CompletionHandler
import io.trtc.tuikit.atomicxcore.api.login.LoginStore

class ContactListActivity : AppCompatActivity() {

    private val sdkAppID: Int = 1234567890 // TODO: Fill in your sdkAppID here
    private val userID = "" // TODO: Fill in your userID here
    private val userSig = "" // TODO: Fill in your generated userSig here

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

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

    private fun showContactListPage() {
        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 = "Contacts",
                        fontSize = 17.sp,
                        fontWeight = FontWeight.W600,
                        color = colors.textColorPrimary
                    )
                }

                HorizontalDivider(color = colors.strokeColorPrimary)

                // ContactList
                ContactList(
                    onContactClick = { contact ->
                        // Handle contact click
                        // contact.contactID
                    },
                    onGroupClick = { group ->
                        // Handle group click
                        // group.contactID
                    }
                )
            }
        }
    }
}
The runtime interface appears as follows:

ContactList provides default click handling for the following actions:
Action
Effect
Click New Contacts
Displays pending friend requests.
Click Group Applications
Shows group join request list.
Click Group Chats
Lists all group chats for the current account.
Click Blacklist
Shows the blacklist for the current account.

Further Practice

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

Contact Us

If you have questions or suggestions during integration, contact us to submit feedback.

前の記事へ: Android（View）次の記事へ: iOS（UIKit）

ヘルプとサポート

この記事はお役に立ちましたか？

フィードバック