tencent cloud

Tencent Real-Time Communication

소식 및 공지 사항
제품 업데이트
Tencent Cloud 오디오/비디오 단말 SDK 재생 업그레이드 및 권한 부여 인증 추가
TRTC 월간 구독 패키지 출시 관련 안내
제품 소개
제품 개요
기본 개념
제품 기능
제품 장점
응용 시나리오
성능 데이터
구매 가이드
Billing Overview
무료 시간 안내
Monthly subscription
Pay-as-you-go
TRTC Overdue and Suspension Policy
과금 FAQ
Refund Instructions
신규 사용자 가이드
Demo 체험
Call
개요(TUICallKit)
Activate the Service
Run Demo
빠른 통합(TUICallKit)
오프라인 푸시
Conversational Chat
온클라우드 녹화(TUICallKit)
AI Noise Reduction
UI 사용자 정의
Calls integration to Chat
Additional Features
No UI Integration
Server APIs
Client APIs
Solution
ErrorCode
릴리스 노트
FAQs
라이브 스트리밍
Billing of Video Live Component
Overview
Activating the Service (TUILiveKit)
Demo 실행
No UI Integration
UI Customization
Live Broadcast Monitoring
Video Live Streaming
Voice Chat Room
Advanced Features
Client APIs
Server APIs
Error Codes
Release Notes
FAQs
RTC Engine
Activate Service
SDK 다운로드
API 코드 예시
Usage Guidelines
API 클라이언트 API
고급 기능
RTC RESTFUL API
History
Introduction
API Category
Room Management APIs
Stream mixing and relay APIs
On-cloud recording APIs
Data Monitoring APIs
Pull stream Relay Related interface
Web Record APIs
AI Service APIs
Cloud Slicing APIs
Cloud Moderation APIs
Making API Requests
Call Quality Monitoring APIs
Usage Statistics APIs
Data Types
Appendix
Error Codes
콘솔 가이드
애플리케이션 관리
사용량 통계
모니터링 대시보드
개발 보조
Solution
Real-Time Chorus
FAQs
과금 개요
기능 관련
UserSig 관련
방화벽 제한 처리
설치 패키지 용량 축소 관련 질문
Andriod 및 iOS 관련
Web 관련
Flutter 관련
Electron 관련
TRTCCalling Web 관련
멀티미디어 품질 관련
기타 질문
Protocols and Policies
컴플라이언스 인증
보안 백서
정보 보안에 관한 참고 사항
Service Level Agreement
Apple Privacy Policy: PrivacyInfo.xcprivacy
TRTC 정책
개인 정보 보호 정책
데이터 처리 및 보안 계약
용어집
문서Tencent Real-Time Communication

Android

포커스 모드
폰트 크기
마지막 업데이트 시간: 2025-06-23 11:14:03
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
│   │   ├── BottomLayout.java              
│   │   ├── BottomView.java
│   │   └── SeatRequestCountView.java
│   ├── chat                                 // Chat Pop-up
│   │   └── ChatActivity.java
│   ├── conferenceinvitation                 // In-Meeting Invitation
│   │   ├── InvitationReceivedActivity.java
│   │   ├── InvitationReceivedView.java
│   │   └── SlideToAcceptView.java
│   ├── exitroom                             // Exit Meeting
│   │   └── ExitRoomDialog.java
│   ├── floatwindow                          // Floating Window
│   │   ├── screensharingindicate
│   │   │   └── ScreenSharingIndicateFloatView.java
│   │   └── 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.
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.
다음 주제: 제품 업데이트

도움말 및 지원

문제 해결에 도움이 되었나요?

피드백