Voice Room Component
Component Overview
The Voice Chat Mic Seat Component (SeatGridView) is a core UI element built for voice chat room applications. It automatically manages mic seat states and displays user details, volume waveforms, and host indicators. With this guide, you can quickly adjust the mic seat layout or fully customize the mic seat view to match your business requirements, such as multi-user social rooms or gaming environments.
Prerequisites
Before configuring the Voice Chat Mic Seat Component, complete the main workflow setup by following Host Streaming and Audience Viewing.
Configuring Mic Seat List Layout
The component offers several built-in layout modes for different voice chat scenarios. Switch layouts instantly using the
setLayoutMode API—no manual position calculations required.Preview
Grid Layout | Focus Layout | Vertical Layout | Custom Layout |
 |  |  |  |
API Description
fun setLayoutMode(layoutMode: VoiceRoomDefine.LayoutMode, layoutConfig: VoiceRoomDefine.SeatViewLayoutConfig?)
func setLayoutMode(layoutMode: SGLayoutMode, layoutConfig: SGSeatViewLayoutConfig? = nil)
Parameter | Description |
layoutMode | Layout mode: GRID (Grid Layout): Ideal for multi-user voice chat rooms; mic seats are distributed evenly. FOCUS (Focus Layout): Highlights the main mic seat for scenarios with a primary speaker. VERTICAL (Vertical Layout): Arranges mic seats vertically for portrait mode. FREE (Custom Layout): Use for fully custom layouts. |
layoutConfig | Custom row and column layout settings. Required only when layoutMode is FREE. |
Code Example
Set the mic seat list layout using the following examples.
// Set grid layoutseatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.GRID, null)// Set focus layoutseatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.FOCUS, null)// Set vertical layoutseatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.VERTICAL, null)// Set custom layoutval layoutConfig = VoiceRoomDefine.SeatViewLayoutConfig().apply {rowConfigs = ArrayList()rowSpacing = dp2px(10) // Row spacing}// First row configurationval rowConfig1 = VoiceRoomDefine.SeatViewLayoutRowConfig().apply {count = 3 // Seats in the first rowseatSize = VoiceRoomDefine.Size(dp2px(50), dp2px(50)) // Size of each mic seat in the first rowseatSpacing = dp2px(10) // Horizontal spacing between mic seats in the first rowalignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.CENTER // Alignment for the first row}layoutConfig.rowConfigs.add(rowConfig1)// Second row configurationval rowConfig2 = VoiceRoomDefine.SeatViewLayoutRowConfig().apply {count = 3 // Seats in the second rowseatSize = VoiceRoomDefine.Size(dp2px(50), dp2px(50)) // Size of each mic seat in the second rowseatSpacing = dp2px(10) // Horizontal spacing between mic seats in the second rowalignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.SPACE_AROUND // Alignment for the second row}layoutConfig.rowConfigs.add(rowConfig2)seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.FREE, layoutConfig)
Custom Layout Alignment Diagram:
Custom Mic Seat View UI
If the default mic seat style does not fit your requirements, you can fully control the rendering logic by setting an adapter (
Adapter/Delegate).Preview
Default Mic Seat View | Custom Mic Seat View Example |
 |  |
API Description
interface SeatViewAdapter {fun createSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo): Viewfun updateSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo, seatView: View, )fun updateUserVolume(seatGridView: SeatGridView, volume: Int, seatView: View)}fun setSeatViewAdapter(adapter: VoiceRoomDefine.SeatViewAdapter?)
Parameter | Description |
seatGridView | Current Voice Chat Mic Seat Component. |
seatInfo | Current mic seat information. |
volume | Current host's volume. |
seatView | Your custom mic seat view. |
adapter | Custom mic seat adapter. |
Code Example
If the default UI does not fit your needs, customize the mic seat UI using the following approach.
val adapter = object : VoiceRoomDefine.SeatViewAdapter {override fun createSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo): View {return TestSeatInfoView(context, seatGridView, seatInfo)}override fun updateSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo, seatView: View) {(seatView as TestSeatInfoView).updateSeatView(seatGridView, seatInfo)}override fun updateUserVolume(seatGridView: SeatGridView, volume: Int, customSeatView: View) {(customSeatView as TestSeatInfoView).updateUserVolume(seatGridView, volume)}}seatGridView.setSeatViewAdapter(adapter)class TestSeatInfoView constructor(context: Context, seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo) : FrameLayout(context) {init {initView() // Initialize view}fun updateSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo) {updateView(seatInfo) // Update custom mic seat UI}fun updateUserVolume(seatGridView: SeatGridView, volume: Int) {updateUserVolume(volume) // Update volume UI}}
FAQs
Handling Mic Seat Click Events in Custom Adapter
Set up a click listener inside your custom
View and implement your business logic in the callback.Mic Seat Data Persistence When Switching Layouts
No.
SeatGridView preserves internal data state. Calling setLayoutMode only changes the visual layout and does not affect the host's status.Listening for Real-Time Mic Seat List Changes (e.g., hosts taking or leaving mic seats)
You do not need to manually listen in the adapter.
SeatGridView automatically registers mic seat listeners. Whenever a mic seat state changes, it triggers the updateSeatView method. Simply update your UI within this method.
