This article will introduce how to customize the user interface of TUILiveKit. We offer three schemes for you to choose from: Interface Fine-tuning Plan, Custom Part of UI Plan, Custom Full UI Plan.
Scheme 1: Interface Fine-tuning Plan
By directly modifying the UI source code we provide, you can adjust the user interface of TUILiveKit. The interface source code of TUILiveKit is located under the tuilivekit folder on Github:
Replace Icon
You can directly replace the icons under the tuilivekit/src/main/res/drawable-xxhdpi folder to ensure that the icon color scheme throughout the App remains consistent. Please keep the icon file names unchanged when replacing them.
Replace Copy
You can modify the string content of the TUILiveKit interface by editing the tuilivekit/src/main/res/values-zh and tuilivekit/src/main/res/values directories and their strings.xml files.
Scheme 2: Customize Partial UI Plan
The UI of TUILiveKit is mainly divided into two parts: public UI components and non-public UI components. You can modify the files to adapt to your own UI style. Below is an introduction to the UI in our code:
├── audiencelist // UI directory of audience list at top right of broadcaster streaming page and audience pulling page
│ ├── AudienceListIconAdapter.java // Adapter displaying audience avatars in audience list
│ ├── AudienceListPanelAdapter.java // Adapter for the audience list panel view that pops up when an audience list is clicked
│ ├── AudienceListPanelView.java // Audience list panel view that pops up when the audience list is clicked
│ └── AudienceListView.java // Audience list view
├── audioeffect // Directory for sound effect settings panel in the feature area of the broadcaster streaming page
│ ├── service // Service layer directory for the sound effect settings panel
│ ├── RoomFloatViewService.java // Service layer for the sound effect settings panel, encapsulates related APIs
│ ├── store // Data layer directory for the sound effect settings panel
│ ├── AudioEffectSateFactory.java // Factory class implementation for generating data layer data for the sound effect settings panel
│ └── AudioEffectState.java // Specific encapsulation class of data for the sound effect settings panel
│ └── view // View layer directory for the sound effect settings panel
│ ├── AudioEffectPanelView.java // Specific view implementation for the sound effect settings panel
│ ├── ChangeVoiceAdapter.java // Adapter for the voice change view in the sound effect settings panel
│ └── ReverbAdapter.java // Adapter for the reverb view in the sound effect settings panel
├── barrage // Directory for the Danmaku feature implementation
│ ├── model // Directory for the Danmaku feature implementation in live streaming
│ ├── DefaultEmojiResource.java // Emoji resources for the Danmaku input panel
│ ├── TUIBarrage.java // Danmaku message model
│ └── TUIBarrageUser.java // Danmaku sender information
│ ├── service // Service layer directory for the Danmaku component
│ └── BarrageIMService.java // Service layer for the Danmaku component, encapsulating the Send IM Message feature
│ └── store // Data layer directory for the Danmaku component
│ └── BarrageStore.java // Data management for the Danmaku component
│ └── view // View layer directory for the Danmaku component
│ ├── BarrageSendView.java // Send message popup for the Danmaku component
│ ├── EmojiEditText.java // Input box with emoji support for the Danmaku component
│ └── EmojiLayout.java // Emoji panel for the Danmaku component
│ ├── TUIBarrageButton.java // Entry point for the Danmaku component, clicking it will pop up BarrageSendView
│ └── TUIBarrageDisplayView.java // Display view for the Danmaku list
├── dashboard // Directory for dashboard views
│ ├── AnchorDashboardView.java // Implementation of the anchor's dashboard view after ending the live stream
│ └── AudienceDashboardView.java // Implementation of the audience's dashboard view after the anchor ends the live stream
├── gift // Directory for the gift feature implementation in live streaming
│ ├── giftcloudserver // Directory for the backend service layer of the gift component
│ ├── GiftCloudServer.java // Backend service for the gift component (integration required by the customer to access their own gift backend)
│ └── GiftCloudServerConfig.java // Configuration related to the gift component
│ ├── model // Directory for the data layer of the gift component
│ ├── GiftBean.java // Gift model for the gift component (corresponding to the backend configured gifts)
│ ├── GiftJson.java // Custom-defined gift message format for the gift component
│ ├── LikeJson.java // Custom-defined like message format for the gift component
│ ├── TUIGift.java // Gift model for the gift component
│ └── TUIGiftUser.java // Gift sender/receiver user model for the gift component
│ ├── service // Directory for the service layer of the gift component
│ ├── GiftIMService.java // Service layer for the gift component, encapsulating the Send IM Message feature
│ └── LikeIMService.java // Service layer for the gift component, encapsulating the Send IM Message feature
│ └── store // Directory for the data layer of the gift component
│ └── GiftStore.java // Data management for the gift component
│ └── view // View layer item of the gift component
│ ├── GiftBulletFrameLayout.java // Image gift view of the gift component
│ └── GiftListPanelView.java // Gift panel of the gift component
│ ├── TUIGiftListView.java // Gift panel popup of the gift component
│ ├── TUIGiftPlayView.java // Gift play view of the gift component
│ └── TUILikeButton.java // Like button of the gift component
├── music // Directory for the implementation of Music Panel features
│ ├── service // Service layer directory for the music settings panel
│ ├── MusicService.java // Specific implementation of the music panel service layer, encapsulates music playback-related APIs
│ ├── store // Data layer directory for the music settings panel
│ ├── MusicPanelSateFactory.java // Factory class implementation for generating data layer data for the music settings panel
│ └── MusicPanelState.java // Specific encapsulation class of data for the music settings panel
│ └── view // View layer directory for the music settings panel
│ ├── MusicListAdapter.java // Adapter for the music list in the music settings panel view
│ └── MusicPanelView.java // Specific view implementation for the music settings panel
├── preview // Broadcaster preview page, view directory for the live room information editing area
│ ├── LiveInfoEditView.java // View implementation for the live room information editing area
│ ├── PresetImageGridAdapter.java // Adapter for selecting live covers in the live room information editing area
│ ├── StreamCategoryPicker.java // View for selecting live stream categories in the live room information editing area
│ ├── StreamPresetImagePicker.java // View for selecting live covers in the live room information editing area
│ └── StreamPrivacyStatusPicker.java // View for selecting public or private live stream in the live room information editing area
├── roominfo // Directory of the live room information panel
│ ├── RoomInfoDetailView.java // Live room information detail page board that pops up after clicking the live room information panel
│ └── RoomInfoView.java // View implementation of the live room information panel
└── roomlist // Implementation catalog of the live room list component
├── service // Service layer directory for the Live Room List Component
└── RoomListService.java // Concrete implementation of the service layer for the Live Room List Component, encapsulating related APIs for the live room list
├── store // Data layer directory for the Live Room List Component
└── RoomListState.java // Concrete encapsulation class for data in the Live Room List Component
└── view // View layer directory for the Live Room List Component
├── adapter // Adapter directory for the view layer of the Live Room List Component
│ ├── LoadMoreAdapterWrapper.java // Adapter for adding pull-to-load-more feature to the live room list adapter of the Live Room List Component
│ └── RoomListAdapter.java // Live room list adapter for the Live Room List Component
├── ListAudienceActivity.java // Streaming page triggered by clicking on a specific live room in the Live Room List Component
└── RoomListView.java // Implementation of live room list view in the Live Room List Component
├── anchor // View layer directory for the broadcaster side
│ ├── common // Common view directory for the broadcaster side preview interface and live streaming interface
│ ├── videoparams // Directory for the video parameter settings panel
│ ├── VideoParamsPanel.java // Implementation of the video parameter settings panel
│ └── VideoResolutionPicker.java // Implementation of the panel for selecting Ultra HD, HD, and SD resolutions
│ ├── BeautyListAdapter.java // Adapter for the basic beauty view
│ ├── BeautyListPanel.java // Implementation of the basic beauty view
│ ├── SettingsListAdapter.java // Adapter for the settings panel
│ └── SettingsPanel.java // Implementation of the settings panel
│ ├── livestreaming // Directory for the live streaming status view
│ ├── connection // Directory for views related to the broadcaster's connection
│ ├── AnchorConnectingAdapter.java // Adapter for the connected broadcaster list
│ ├── AnchorConnectionManagePanel.java // Management panel for broadcaster’s connection: initiate connection, view the list of connectable broadcasters, etc
│ └── AnchorRecommendedAdapter.java // Adapter for the recommended list of connectable broadcasters
│ ├── link // Directory for views related to audience link mic
│ ├── AnchorApplyLinkMicAdapter.java // Adapter for the list of users who applied for link mic
│ ├── AnchorLinkMicAdapter.java // Adapter for the list of users who successfully connected via link mic
│ └── AnchorLinkMicManagePanel.java // Link mic management panel: accept audience link mic, reject audience link mic, hang up link mic
│ ├── AnchorEndLivePanel.java // Panel view that pops up when closing the live streaming room during the live session
│ ├── AnchorFunctionView.java // View of the bottom feature area during the live session
│ ├── AnchorLivingView.java // Overall layout view during the live session
│ └── ApplyLinkMicFloatView.java // Floating prompt view for mic connection when an audience applies for mic connection
│ ├── preview // View directory for the live preview status
│ ├── AnchorPreviewFunctionView.java // View of the bottom feature area during the live preview
│ └── AnchorPreviewView.java // Overall layout view for the live preview
│ ├── video // Directory for the streamer’s broadcast view
│ └── AnchorVideoView.java // Implementation of the streamer’s broadcast view
│ └── AnchorView.java // Overall layout view for the streamer’s broadcast
├── audience // Directory for audience view layer
│ ├── livestreaming // Directory for audience pull streaming view
│ ├── link // Directory for views related to audience link mic
│ ├── SelectLinkMicTypePanel.java // View for audience to select voice mic connection or video mic connection
│ ├── VideoLinkSettingsPanel.java // Parameter settings panel view for video mic connection
│ └── VideoSettingsAdapter.java // Adapter for parameter settings during video mic connection
│ ├── ActionConfirmationPanel.java // Adapter displaying audience avatars in audience list
│ ├── AudienceFunctionView.java // View of the bottom feature area on the audience pull streaming page
│ ├── AudienceLivingView.java // Layout view of sub-components on the audience pull streaming page
│ └── AudienceWaitingPassView.java // Animation view of waiting for host's approval when audience applies for mic connection
│ ├── video // Directory for audience pull streaming view
│ └── AudienceVideoView.java // Implementation of audience pull streaming view
├── common // Shared view directory for streamer push and audience pull streaming
└── video // Directory for video captured by the camera
├── PlayerVideoView.java // View of pulled remote video stream
├── PusherVideoView.java // View of video stream captured by the camera
├── RenderVideoViewModel.java // Video model of the video stream view
├── VideoView.java // Encapsulated view of a single video stream
├── VideoViewFactory.java // Factory class for generating VideoView
└── WaitLinkMicAnimationView.java // Animation view for prompting audience connection when the audience applies for mic connection
Scheme 3: Fully Custom Definition UI Plan
The overall feature of TUILiveKit is implemented based on the TUIRoomEngine, a UI-free SDK. You can create your own UI entirely based on TUIRoomEngine. For details, refer to TUIRoomEngine API.
