tencent cloud

Feedback

Last updated: 2024-03-15 17:06:14
    TUIKit supports modular integration starting from version 5.7.1435. You can integrate modules for integration according to your needs. Starting from version 6.9.3557, TUIKit provides a new set of minimalist version UI components. The previous version UI components are still retained, which are called the classic version UI components. You can choose either the classic or minimalist version as needed.
    For more information about TUIKit components, see here.
    The following describes how to integrate TUIKit components.
    Introduction:
    This document primarily describes the process of integrating TUIKit into your application. If you wish to swiftly construct an instant messaging application, you are encouraged to download the TUIKit source code and run the Demo for an immersive experience. It is recommended that you prepare two devices to fully experience the features related to instant messaging (IM).

    Environment Requirements

    Android Studio-Giraffe
    Gradle-7.2
    Android Gradle Plugin Version-7.0.0
    kotlin-gradle-plugin-1.5.31
    Android Studio-Chipmunk

    Integrating Module Source Code

    1. Download the TUIKit source code from GitHub. Ensure that the TUIKit folder is at the same level as your project folder, for example:
    
    
    
    2. Add the corresponding TUIKit components to settings.gradle according to your business requirements. TUIKit components are independent of each other, and adding or removing them does not affect project compilation.
    // Include the upper-layer app module
    include ':app'
    
    // Include the internal communication module (required module)
    include ':tuicore'
    project(':tuicore').projectDir = new File(settingsDir, '../TUIKit/TUICore/tuicore')
    
    // Include the common module of IM component (required module)
    include ':timcommon'
    project(':timcommon').projectDir = new File(settingsDir, '../TUIKit/TIMCommon/timcommon')
    
    // Include the chat feature module (basic feature module)
    include ':tuichat'
    project(':tuichat').projectDir = new File(settingsDir, '../TUIKit/TUIChat/tuichat')
    
    // Include the relationship chain feature module (basic feature module)
    include ':tuicontact'
    project(':tuicontact').projectDir = new File(settingsDir, '../TUIKit/TUIContact/tuicontact')
    
    // Include the conversation list feature module (basic feature module)
    include ':tuiconversation'
    project(':tuiconversation').projectDir = new File(settingsDir, '../TUIKit/TUIConversation/tuiconversation')
    
    // Include the search feature module (To use this module, you need to purchase the Ultimate Edition)
    include ':tuisearch'
    project(':tuisearch').projectDir = new File(settingsDir, '../TUIKit/TUISearch/tuisearch')
    
    // Include the group feature module
    include ':tuigroup'
    project(':tuigroup').projectDir = new File(settingsDir, '../TUIKit/TUIGroup/tuigroup')
    
    // Include the community topic feature module (To use this module, you need to purchase the Ultimate Edition)
    include ':tuicommunity'
    project(':tuicommunity').projectDir = new File(settingsDir, '../TUIKit/TUICommunity/tuicommunity')
    
    // Include the audio/video call feature module
    include ':tuicallkit'
    project(':tuicallkit').projectDir = new File(settingsDir, '../TUIKit/TUICallKit/tuicallkit')
    
    // Include the video conference module
    include ':tuiroomkit' project(':tuiroomkit').projectDir = new File(settingsDir, '../TUIKit/TUIRoomKit/tuiroomkit')
    
    // Include speech-to-text plugin, supported from version 7.5
    include ':tuivoicetotextplugin' project(':tuivoicetotextplugin').projectDir = new File(settingsDir, '../TUIKit/TUIVoiceToTextPlugin/tuivoicetotextplugin')
    // Include customer service plugin, supported from version 7.6
    include ':tuicustomerserviceplugin' project(':tuicustomerserviceplugin').projectDir = new File(settingsDir, '../TUIKit/TUICustomerServicePlugin/tuicustomerserviceplugin')
    
    // Include chatbot plugin, supported from version 7.7
    include ':tuichatbotplugin' project(':tuichatbotplugin').projectDir = new File(settingsDir, '../TUIKit/TUIChatBotPlugin/tuichatbotplugin')
    
    // Include chat message translation plugin, supported from version 7.2 (Value-added feature activation is required. Please contact Tencent Cloud sales)
    include ':tuitranslationplugin'
    project(':tuitranslationplugin').projectDir = new File(settingsDir, '../TUIKit/TUITranslationPlugin/tuitranslationplugin')
    
    // Include emoji reaction plugin, supported from version 7.8 (To use this module, you need to purchase the Ultimate Edition)
    include ':tuiemojiplugin'
    project(':tuiemojiplugin').projectDir = new File(settingsDir, '../TUIKit/TUIEmojiPlugin/tuiemojiplugin')
    3. Add the following to build.gradle in App:
    dependencies {
    api project(':tuiconversation')
    api project(':tuicontact')
    api project(':tuichat')
    api project(':tuisearch')
    api project(':tuigroup')
    api project(':tuicommunity')
    api project(':tuicallkit')
    api project(':tuiroomkit')
    // Integrate speech-to-text plugin, supported from version 7.5
    api project(':tuivoicetotextplugin')
    // Integrate customer service plugin, supported from version 7.6
    api project(':tuicustomerserviceplugin')
    // Integrate chatbot plugin, supported from version 7.7
    api project(':tuichatbotplugin')
    // Integrate translation plugin, supported from version 7.2 (Value-added feature activation is required. Please contact Tencent Cloud sales)
    api project(':tuitranslationplugin')
    // Integrate emoji reaction plugin, supported from version 7.8 (To use this module, you need to purchase the Ultimate Edition)
    api project(':tuiemojiplugin')
    // Integrate group chain plugin, supported from version 7.1
    api "com.tencent.imsdk:tuigroupnote-plugin:7.8.5484"
    // Integrate group voting plugin, supported from version 7.1
    api "com.tencent.imsdk:tuipoll-plugin:7.8.5484"
    // Integrate session grouping plugin, supported from version 7.3
    api "com.tencent.imsdk:tuiconversationgroup-plugin:7.8.5484"
    // Integrate session tagging plugin, supported from version 7.3
    api "com.tencent.imsdk:tuiconversationmark-plugin:7.8.5484"
    // Integrate message push plugin, supported from version 7.6
    api 'com.tencent.timpush:timpush:7.8.5484'
    // Integrate the corresponding manufacturer's push package as needed
    api 'com.tencent.timpush:fcm:7.8.5484'
    api 'com.tencent.timpush:xiaomi:7.8.5484'
    api 'com.tencent.timpush:meizu:7.8.5484'
    api 'com.tencent.timpush:oppo:7.8.5484'
    api 'com.tencent.timpush:vivo:7.8.5484'
    api 'com.tencent.timpush:huawei:7.8.5484'
    api 'com.tencent.timpush:honor:7.8.5484'
    }
    4. Add the following to the gradle.properties file to automatically convert third-party libraries to use AndroidX:
    android.enableJetifier=true
    
    5. Add the following to the build.gradle file (in the same level as settings.gradle) of the root project to add the Maven repository and Kotlin support:
    buildscript {
    repositories {
    mavenCentral()
    maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
    }
    dependencies {
    classpath 'com.android.tools.build:gradle:7.0.0'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31"
    }
    }
    If you use Gradle 8.x, you need to add the following code.
    buildscript {
    repositories {
    mavenCentral()
    maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
    }
    dependencies {
    classpath 'com.android.tools.build:gradle:8.0.2'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.9.0"
    }
    }
    Note:
    The compatibility between Kotlin, Gradle, and AGP versions can be viewed here.
    6. Sync the project, and compile and run it. The expected project structure is shown in the following figure:
    
    
    
    7. (Optional) Delete unnecessary UI files The classic and minimalist versions of UIs do not affect each other, and they can run independently. The classic and minimalist version UI files are in separate folders within each TUIKit component. Take TUIChat as an example:
    
    
    
    The classicui folder stores the classic version UI files, and the `minimalistui` folder stores the minimalist version UI files. If you are to integrate the minimalist version UIs, directly delete the `classicui` folder and delete `Activity` and `Service` corresponding to the classic version UIs in the AndroidManifest.xmlfile.
    Note:
    The classic and minimalist versions of UI components cannot be used together. If you integrate multiple components, all the integrated components must be of the same version: classic or minimalist.

    Quick Build

    Instant messaging software usually consists of several basic UIs such as the conversation list, chat window, contacts, and audio/video call UIs. It only takes a few lines of code to build these UIs in your project. The process is as follows:

    Step 1. Log in to TUIKit

    You need to log in to TUIKit before you can use the component features properly. To log in to TUIKit, click Login on your app. You need to create an app and obtain the SDKAppID in the Chat console. userSig needs to be calculated according to rules. For operation details, see Get Started.
    Sample code:
    // Called when Login is clicked on the user UI
    TUILogin.login(context, sdkAppID, userID, userSig, new TUICallback() {
    @Override
    public void onError(final int code, final String desc) {
    }
    
    @Override
    public void onSuccess() {
    }
    });
    Note:
    An object of the Application class must be passed in via context. Otherwise, some images cannot be loaded.

    Step 2. Create viewPager

    1. Add the UI layout in activity_main.xml:
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <androidx.viewpager2.widget.ViewPager2
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight = "1"/>
    </LinearLayout>
    2. Create FragmentAdapter.java to work with ViewPager2 to display the conversation and contacts UIs.
    import androidx.annotation.NonNull;
    import androidx.fragment.app.Fragment;
    import androidx.fragment.app.FragmentActivity;
    import androidx.fragment.app.FragmentManager;
    import androidx.lifecycle.Lifecycle;
    import androidx.viewpager2.adapter.FragmentStateAdapter;
    import java.util.List;
    
    public class FragmentAdapter extends FragmentStateAdapter {
    private static final String TAG = FragmentAdapter.class.getSimpleName();
    
    private List<Fragment> fragmentList;
    
    public FragmentAdapter(@NonNull FragmentActivity fragmentActivity) {
    super(fragmentActivity);
    }
    
    public FragmentAdapter(@NonNull Fragment fragment) {
    super(fragment);
    }
    
    public FragmentAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
    super(fragmentManager, lifecycle);
    }
    
    public void setFragmentList(List<Fragment> fragmentList) {
    this.fragmentList = fragmentList;
    }
    
    @NonNull
    @Override
    public Fragment createFragment(int position) {
    if (fragmentList == null || fragmentList.size() <= position) {
    return new Fragment();
    }
    return fragmentList.get(position);
    }
    
    @Override
    public int getItemCount() {
    return fragmentList == null ? 0 : fragmentList.size();
    }
    }

    Step 3. Build the core fragment

    The getting, synchronization, display, and interaction of the conversation list TUIConversationFragment and contact list TUIContactFragment UI data are already encapsulated in TUI components, and UIs can be used as easily as common Android fragments.
    Add the following code to the onCreate method in MainActivity.java:
    Minimalist version
    Classic version
    List<Fragment> fragments = new ArrayList<>();
    // Add the minimalist version of conversation UI provided by TUIConversation
    fragments.add(new TUIConversationMinimalistFragment());
    
    // Add the minimalist version of contacts UI provided by TUIContact
    fragments.add(new TUIContactMinimalistFragment());
    
    ViewPager2 mainViewPager = findViewById(R.id.view_pager);
    FragmentAdapter fragmentAdapter = new FragmentAdapter(this);
    fragmentAdapter.setFragmentList(fragments);
    mainViewPager.setOffscreenPageLimit(2);
    mainViewPager.setAdapter(fragmentAdapter);
    mainViewPager.setCurrentItem(0, false);
    
    List<Fragment> fragments = new ArrayList<>();
    // Add the classic version of conversation UI provided by TUIConversation
    fragments.add(new TUIConversationFragment());
    
    // Add the classic version of contacts UI provided by TUIContact
    fragments.add(new TUIContactFragment());
    
    ViewPager2 mainViewPager = findViewById(R.id.view_pager);
    FragmentAdapter fragmentAdapter = new FragmentAdapter(this);
    fragmentAdapter.setFragmentList(fragments);
    mainViewPager.setOffscreenPageLimit(2);
    mainViewPager.setAdapter(fragmentAdapter);
    mainViewPager.setCurrentItem(0, false);

    Step 4: Build the chat UI

    To launch the chat UI, simply pass in the chat information corresponding to the current chat UI.
    Minimalist version
    Classic version
    Bundle param = new Bundle(); param.putInt(TUIConstants.TUIChat.CHAT_TYPE, isGroup ? V2TIMConversation.V2TIM_GROUP : V2TIMConversation.V2TIM_C2C); // If it's C2C chat, chatID is the other person's UserID; if it's Group chat, chatID is the GroupID
    param.putString(TUIConstants.TUIChat.CHAT_ID, chatID); if (isGroup) { TUICore.startActivity("TUIGroupChatMinimalistActivity", param); } else { TUICore.startActivity("TUIC2CChatMinimalistActivity", param); }
    Bundle param = new Bundle(); param.putInt(TUIConstants.TUIChat.CHAT_TYPE, isGroup ? V2TIMConversation.V2TIM_GROUP : V2TIMConversation.V2TIM_C2C); // If it's C2C chat, chatID is the other party's UserID; if it's Group chat, chatID is the GroupID
    param.putString(TUIConstants.TUIChat.CHAT_ID, chatID); if (isGroup) { TUICore.startActivity("TUIGroupChatActivity", param); } else { TUICore.startActivity("TUIC2CChatActivity", param); }
    You can also create a chat interface Fragment and embed it into your own Activity:
    Minimalist version
    Classic version
    Fragment fragment;
    // If it's C2C chat, chatID is the other person's UserID; if it's Group chat, chatID is the GroupID
    if (isGroup) { GroupInfo groupInfo = new GroupInfo(); groupInfo.setId(chatID); Bundle bundle = new Bundle(); bundle.putSerializable(TUIChatConstants.CHAT_INFO, groupInfo); TUIGroupChatMinimalistFragment tuiGroupChatFragment = new TUIGroupChatMinimalistFragment(); tuiGroupChatFragment.setArguments(bundle); GroupChatPresenter presenter = new GroupChatPresenter(); presenter.initListener(); tuiGroupChatFragment.setPresenter(presenter); fragment = tuiGroupChatFragment; } else { ChatInfo chatInfo = new ChatInfo(); chatInfo.setId(chatID); Bundle bundle = new Bundle(); bundle.putSerializable(TUIChatConstants.CHAT_INFO, chatInfo); TUIC2CChatMinimalistFragment tuic2CChatFragment = new TUIC2CChatMinimalistFragment(); tuic2CChatFragment.setArguments(bundle); C2CChatPresenter presenter = new C2CChatPresenter(); presenter.initListener(); tuic2CChatFragment.setPresenter(presenter); fragment = tuic2CChatFragment; }
    getSupportFragmentManager().beginTransaction() .add(R.id.chat_fragment_container, fragment).commitAllowingStateLoss();
    Fragment fragment;
    // If it's C2C chat, chatID is the other person's UserID; if it's Group chat, chatID is the GroupID
    if (isGroup) { GroupInfo groupInfo = new GroupInfo(); groupInfo.setId(chatID); Bundle bundle = new Bundle(); bundle.putSerializable(TUIChatConstants.CHAT_INFO, groupInfo); TUIGroupChatFragment tuiGroupChatFragment = new TUIGroupChatFragment(); tuiGroupChatFragment.setArguments(bundle); GroupChatPresenter presenter = new GroupChatPresenter(); presenter.initListener(); tuiGroupChatFragment.setPresenter(presenter); fragment = tuiGroupChatFragment; } else { ChatInfo chatInfo = new ChatInfo(); chatInfo.setId(chatID); Bundle bundle = new Bundle(); bundle.putSerializable(TUIChatConstants.CHAT_INFO, chatInfo); TUIC2CChatFragment tuic2CChatFragment = new TUIC2CChatFragment(); tuic2CChatFragment.setArguments(bundle); C2CChatPresenter presenter = new C2CChatPresenter(); presenter.initListener(); tuic2CChatFragment.setPresenter(presenter); fragment = tuic2CChatFragment; }
    getSupportFragmentManager().beginTransaction() .add(R.id.chat_fragment_container, fragment).commitAllowingStateLoss();

    Step 5. Build the audio/video call feature

    TUI components allow users to start audio/video calls in chat UIs and can be quickly integrated with a few steps:
    Video Call
    Audio Call
    
    
    
    
    
    
    
    1. Activate the TRTC service
    1.1 Log in to the Chat console and click the target app card to go to the basic configuration page of the app.
    1.2 Click Free trial under Activate Tencent Real-Time Communication (TRTC) to activate the 7-day free trial service of TUICallKit.
    1.3 Click Confirm in the pop-up dialog box. A TRTC app with the same SDKAppID as the Chat app will be created in the TRTC console. You can use the same account and authentication information for Chat and TRTC.
    2. Integrate the TUICallKit component Add the TUICallKit dependency to the build.gradle file in App:
    api project(':tuicallkit')
    3. Start and answer a video or audio call
    Starting a Call via a Message Page
    Starting a Call via a Contact Profile Page
    
    
    
    
    
    
    
    After integrating the TUICallKit component, the chat UI and contact profile UI display the **Video Call** and **Audio Call** buttons by default. When a user clicks either of the buttons, TUIKit automatically displays the call invitation UI and sends the call invitation request to the callee.
    When an online user receives a call invitation with the app running in the foreground, TUIKit automatically displays the call receiving UI, where the user can answer or reject the call.
    When an offline user receives a call invitation and wants to start the app to accept the call, the offline push capability is required. For how to implement offline push, see the next step.
    
    4. Add the offline push feature: To implement offline push for audio/video calls, follow the steps below:
    4.1 Configure offline push for the app. For more information, see Offline Push Configuration.
    4.2 Integrate the TUICallKit component.
    4.3 Use TUICallKit to initiate a call invitation. An offline push message is generated by default.
    5. Add value-added capabilities. After TUIChat and TUICallKit are integrated, when you send a voice message on the chat UI, the voice message can be recorded with AI-based noise reduction and automatic gain control. This feature relies on the audio/video call capability of Premium Edition or higher-level plans of the Chat service, which is supported in Chat SDK 7.0 and later versions. If the dependent plan expires, voice message recording is switched to the system API. The following compares the voice messages recorded simultaneously using two Huawei P10 phones:
    
    Voice Message Recorded by the System
    Voice Message with AI-based Noise Reduction and Automatic Gain Control Recorded by TUICallkit
    
    

    FAQs

    What should I do when I receive the message "Manifest merger failed : Attribute application@allowBackup value=(true) from AndroidManifest.xml"?

    In the Chat SDK, the value of allowBackup is false by default, indicating that the backup and restore feature of the app is disabled. You can delete the allowBackup property from the AndroidManifest.xml file to disable the backup and restore feature. You can also add tools:replace="android:allowBackup" to the application node of the AndroidManifest.xml file to overwrite the Chat SDK configuration with your own configuration.
    For example:
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.tencent.qcloud.tuikit.myapplication">
    
    <application
    android:allowBackup="true"
    android:name=".MApplication"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/Theme.MyApplication"
    tools:replace="android:allowBackup">
    <activity android:name=".MainActivity">
    <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    </activity>
    </application>
    
    </manifest>

    What should I do when I receive the message "NDK at /Users/***/Library/Android/sdk/ndk-bundle did not have a source.properties file"?

    You only need to add you NDK path to the local.properties file. For example: ndk.dir=/Users/***/Library/Android/sdk/ndk/16.1.4479499

    What should I do when I receive the message "Cannot fit requested classes in a single dex file"?

    The possible cause is that your API level is lower than expected. You need to enable MultiDex support in the build.gradle file in App and add multiDexEnabled true and the corresponding dependencies:
    android {
    defaultConfig {
    ...
    minSdkVersion 19
    targetSdkVersion 30
    multiDexEnabled true
    }
    ...
    }
    dependencies {
    implementation "androidx.multidex:multidex:2.0.1"
    }
    In addition, add the following code to the Application file:
    public class MyApplication extends SomeOtherApplication {
    @Override
    protected void attachBaseContext(Context base) {
    super.attachBaseContext(base);
    MultiDex.install(this);
    }
    }

    What should I do when I receive the message "Plugin with id 'kotlin-android' not found."?

    Because TUIChat uses Kotlin code, you need to add the Kotlin build plug-in. For details, see step 5 in the "Integrating Module Source Code" section.

    With normal App features of the Debug version, there are abnormalities in the Release version?

    This issue is very likely caused by aliasing. Please try to avoid aliasing TUIKit. You can add the following aliasing rule:
    # Avoid deleting code logic -dontshrink -dontoptimize
    # Avoid aliasing TUIKit
    -keep class com.tencent.qcloud.** { *; }
    
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support