Join Tencent RTC at NAB Show 2024 in Las Vegas!
Learn more 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
Join Tencent RTC at NAB Show 2024 in Las Vegas!
Learn more 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
Conference
Overview
  • Web
    • Integration
    • UI Customization
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomEvents
      • TUIRoomEngine Defines
    • FAQs
  • iOS
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomObserver
      • Type Definition
    • FAQs
  • Android
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomObserver
      • Type Definition
    • FAQs
  • Electron
    • Integration
    • UI Customization
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomEvent
      • TUIRoomEngine Defines
    • FAQs
  • Windows
    • Integration
    • UI Customization
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomEngine
      • TUIRoomObserver
      • Type Definition
  • Flutter
    • Integration
    • UI Customization
    • Conference Control
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomEngine
      • TUIRoomObserver
      • Type Definition
    • FAQs
  • Overview
    • Overview
  • Activate the Service
  • Pricing
    • TRTC Conference Monthly Packages
    • Pay-As-You-Go
    • Free Minutes
  • Error Code
Conference

UI Customization

This article will introduce how to customize the User Interface of TUIRoomKit. We provide two solutions for you to choose from: Fine-tuning Solution and Self-implemented UI Solution.

Solution 1: Fine-tuning Solution

By directly modifying the UI source code we provide, you can adjust the User Interface of TUIRoomKit. The source code of TUIRoomKit's interface is located in the Android/tuiroomkit folder on Github:

Replace Icon

You can directly replace the icons in the src/res/drawable-xxhdpi folder to ensure that the color tone and style of the icons in the entire App remain consistent. Please keep the name of the icon file unchanged when replacing.




Replace Copywriting

You can modify the string content of the video conference interface by modifying the strings.xml files in values-zh and values-en.

Solution 2: Custom Partial UI Solution

The UI code of TUIRoomKit is located in the src/main/java/com/tencent/cloud/tuikit/roomkit/view directory, and the screen view is in the TUIVideoSeat Component.
The key files of TUIRoomKit's View are as follows. You can change the corresponding view according to your needs and adjust your UI.
|—— PrepareActivity // Preparation page Activity
|
|—— CreateRoomActivity // Create room Activity
|
|—— EnterRoomActivity // Enter room Activity
|
activity ——|—— RoomMainActivity // Room main page Activity
|
view ——|
|
component——|—— PrepareView // Preparation page View
|
|—— CreateRoomView // Create room View
|
|—— EnterRoomView // Enter room View
|
|—— RoomMainView // Audio/video conference main page View
|
|—— TopView // Top button view, including: Speaker/Receiver switch, Switch Camera, etc.
|
|—— BottomView // Bottom button view, including: Camera, Mic, Member Management, etc.
|
|—— UseListView // User List view
|
|—— RaiseHandApplicationListView // Raise Hand to Speak mode, Raise Hand application list page
|
|—— TransferMasterView // Room Owner Transfer page
|
|—— MoreFunctionView // "More" function view, including Chat, Beauty, and Set up functions
|
|—— MeetingActivity // Audio/video conference main activity

Modification of BottomView's Bottom Button

To make it easier for you to customize the bottom function buttons, our BottomView is automatically constructed by reading the list. Taking the video switch button as an example, the code is as follows.
private BottomItemData createCameraItem() {
BottomItemData cameraItemData = new BottomItemData();
//Set button type to differentiate different buttons
cameraItemData.setType(BottomItemData.Type.VIDEO);
//Set whether the button is clickable
if (isOwner()) {
cameraItemData.setEnable(true);
} else if (mRoomStore.roomInfo.enableSeatControl) {
cameraItemData.setEnable(false);
} else {
cameraItemData.setEnable(mRoomStore.roomInfo.enableVideo);
}
//Set the default icon of the button
cameraItemData.setIconId(R.drawable.tuiroomkit_ic_camera_off);
//Set the background image of the button
cameraItemData.setBackground(R.drawable.tuiroomkit_bg_bottom_item_black);
//Set the icon of the button when it is not clickable
cameraItemData.setDisableIconId(R.drawable.tuiroomkit_ic_camera_off);
//Set the default icon of the button
cameraItemData.setName(mContext.getString(R.string.tuiroomkit_item_open_camera));
//Button click effect, if your button needs to switch images/names, etc. when clicked, you need to construct this data
BottomSelectItemData camaraSelectItemData = new BottomSelectItemData();
//Set the name of the button when selected
camaraSelectItemData.setSelectedName(mContext.getString(R.string.tuiroomkit_item_close_camera));
//Set the name of the button when not selected
camaraSelectItemData.setUnSelectedName(mContext.getString(R.string.tuiroomkit_item_open_camera));
//Set whether the button is selected
camaraSelectItemData.setSelected(false);
//Set the icon of the button when selected
camaraSelectItemData.setSelectedIconId(R.drawable.tuiroomkit_ic_camera_on);
//Set the icon of the button when not selected
camaraSelectItemData.setUnSelectedIconId(R.drawable.tuiroomkit_ic_camera_off);
//Set the click event of the button when selected/unselected
camaraSelectItemData.setOnItemSelectListener(new BottomSelectItemData.OnItemSelectListener() {
@Override
public void onItemSelected(boolean isSelected) {
enableCamera(isSelected);
}
});
cameraItemData.setSelectItemData(camaraSelectItemData);
return cameraItemData;
}

Solution 3: Custom All UI Solution

The overall function of TUIRoomKit is based on the TUIRoomEngine, a UI-less SDK. You can completely implement your own UI interface based on TUIRoomEngine. For details, please refer to
the TUIRoomEngine API interface address.