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.
view
├── basic
│ ├── BaseBottomDialog.java // Common Bottom Dialog
│ ├── BaseDialogFragment.java // Common Dialog Fragment
│ ├── BaseSettingItem.java // Common Setting Item
│ ├── ConfirmDialog.java // Common Confirm Dialog
│ ├── NotificationView.java // Common Notification Bar
│ ├── PrepareView.java // Preparation Interface
│ ├── RoomToast.java // Common Toast Notification
│ ├── RoundRelativeLayout.java // Common Rounded Corner RelativeLayout
│ ├── SwitchSettingItem.java // Common Switch Setting
│ └── TipToast.java // Common Tip Toast Notification
├── create // Create Meeting Interface
│ ├── CreateConferenceActivity.java
│ ├── CreateConferenceView.java
│ └── RoomTypeSelectView.java
├── join // Join Meeting Interface
│ ├── EnterConferenceActivity.java
│ └── EnterConferenceView.java
├── main // Meeting Main Interface
│ ├── ConferenceMainFragment.java // Meeting Main Fragment
│ ├── ConferenceMainView.java // Meeting Main View
│ ├── RoomMainActivity.java // Meeting Main Activity
│ ├── RoomWindowManager.java // Manager for Switching Between Meeting Interface and Floating Window
│ ├── aisssistant // AI Assistant
│ │ └── AIAssistantDialog.java
│ ├── bottomnavigationbar // Bottom Navigation Bar
│ │ └── videoplaying // Video Playback Floating Window
│ │ ├── RoomFloatViewService.java
│ │ └── RoomVideoFloatView.java
│ ├── invite // Bottom Invite Dialog
│ │ └── InviteDialog.java
│ ├── localaudioindicator // Local Audio Status Indicator
│ │ └── LocalAudioToggleView.java
│ ├── mediasettings // Media Settings (Audio/Video)
│ │ ├── MediaSettingPanel.java
│ │ ├── QualityInfoPanel.java
│ │ ├── VideoFrameRateChoicePanel.java
│ │ └── VideoResolutionChoicePanel.java
│ ├── raisehandcontrolpanel // Raise Hand User Management Panel
│ │ ├── RaiseHandApplicationListPanel.java
│ │ └── RaiseHandNotificationView.java
│ ├── roominfo // Meeting Information
│ │ └── RoomInfoDialog.java
│ ├── screensharecontrol // Screen Sharing Control (Member List Functions)
│ │ └── MoreFunctionDialog.java
│ ├── share // Share Meeting
│ │ └── ShareRoomDialog.java
│ ├── speechtotext // Speech-to-Text
│ │ ├── SpeechToTextActivity.java
│ │ ├── SpeechToTextRecyclerView.java
│ │ └── SpeechToTextSubtitleView.java
│ ├── topnavigationbar // Top Navigation Bar
│ │ ├── AudioRouteSwitchView.java
│ │ ├── CameraSwitchView.java
│ │ ├── ConferenceDurationView.java
│ │ ├── ConferenceNameView.java
│ │ └── TopView.java
│ ├── transferownercontrolpanel // Transfer Owner Selection Panel
│ │ └── TransferMasterPanel.java
│ ├── usercontrolpanel // User Management Panel
│ │ ├── UserListPanel.java
│ │ ├── UserListTypeSelectView.java
│ │ ├── UserRecyclerView.java
│ │ ├── userlistitem // User Management Panel List Items
│ │ │ ├── CallUserView.java
│ │ │ ├── CameraIconView.java
│ │ │ ├── InviteSeatButton.java
│ │ │ ├── ListUserInfoView.java
│ │ │ ├── MicIconView.java
│ │ │ └── ScreenIconView.java
│ │ └── usermanager // User Management Popup
│ │ ├── ModifyNameKeyboard.java
│ │ └── UserManagementPanel.java
│ ├── videoseat // Video Seat Layout
│ │ └── TUIVideoSeatView.java
│ └── watermark // Watermark
│ └── TextWaterMarkView.java
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.
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