Android (Compose)

This guide explains how to implement search functionality using TUIKit Compose.
Note:
"Local Search" is available in Chat Pro edition, Pro edition Plus, and Enterprise edition. This feature can be used after purchasing Pro edition, Pro edition Plus, or Enterprise edition.
Development Environment Requirements
Android Studio Ladybug (2024.2.1) or later, and JDK 17.
A physical device or emulator running Android 6.0 (API 23) or later.
Prerequisites
Before building the UI, make sure you have completed the following steps:
1. Create an application in the console.
2. Create at least two user accounts in the console.
3. Integrate TUIKit Android Compose.
4. Call the login method of LoginStore to log in.
Note:
You only need to log in once each time the app is launched.
Please ensure the login is successful. We recommend performing subsequent operations in the login success callback.
If these steps are not complete, see Quick Start for guidance.
Implementing Local Search
The local search interface is provided by the SearchScreen @Composable component. Before testing search, add some sample data locally, such as contacts, messages, and group chats; otherwise, no results will be returned.
If you use the sample code below, be sure to fill in these parameters:
sdkAppID: Your sdkAppID from the console.
userID: The operator's userID (for example, user1 from Quick Start).
userSig: The operator's userSig (for example, user1's userSig from Quick Start).
The search interface loads automatically at app start. Enter a search term in SearchScreen to trigger a search. Sample code:
// SearchDemoActivity.kt
import android.os.Bundle
import android.view.WindowManager
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.ui.Modifier
import io.trtc.tuikit.chat.uikit.components.theme.LocalTheme
import io.trtc.tuikit.chat.uikit.components.search.ui.SearchScreen
import io.trtc.tuikit.atomicxcore.api.CompletionHandler
import io.trtc.tuikit.atomicxcore.api.login.LoginStore
﻿
class SearchDemoActivity : AppCompatActivity() {
﻿
    private val sdkAppID: Int = 1234567890 // TODO: Fill in the 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)
        window.setSoftInputMode(
            WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE or
                    WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE
        )
        login()
    }
﻿
    private fun login() {
        LoginStore.shared.login(this, sdkAppID, userID, userSig, object : CompletionHandler {
            override fun onSuccess() {
                showSearchPage()
            }
            override fun onFailure(code: Int, desc: String) {
                // Handle login failure
            }
        })
    }
﻿
    private fun showSearchPage() {
        setContent {
            val colors = LocalTheme.current.colors
﻿
            SearchScreen(
                modifier = Modifier
                    .background(colors.bgColorOperate)
                    .fillMaxSize()
                    .statusBarsPadding()
                    .navigationBarsPadding(),
                onBack = { finish() },
                onContactSelect = { friendSearchInfo ->
                    // Handle friend search result
                    val conversationID = "c2c_${friendSearchInfo.userID}"
                    // Navigate to chat page with conversationID
                },
                onGroupSelect = { groupSearchInfo ->
                    // Handle group search result
                    val conversationID = "group_${groupSearchInfo.groupID}"
                    // Navigate to chat page with conversationID
                },
                onConversationSelect = { messageSearchResultItem ->
                    // Handle conversation search result
                    val conversationID = messageSearchResultItem.conversationID
                    // Navigate to chat page with conversationID
                },
                onMessageSelect = { messageInfo ->
                    // Handle message search result (navigate to chat and locate message)
                    // Navigate to chat page with conversationID and locateMessage
                }
            )
        }
    }
}
The result:
﻿
Frequently Asked Questions
Searching Rich Media Messages
Rich media messages include files, images, voice, and video messages.
For file messages, the interface typically displays the file name. Set the fileName parameter when creating the message to make it searchable. If fileName is not specified, the file name is extracted from filePath, and both are stored locally and on the server.
For images, voice, and video messages, the interface usually shows a thumbnail or duration. You can filter by message type for category search, but keyword search is not supported.