Custom Ui

2. Custom Control Panel

Create your own buttons and wire them to CallSession actions:

val callSession = CallSession.getInstance()
var isAudioMuted = false
var isVideoPaused = false

btnMute.setOnClickListener {
    if (isAudioMuted) callSession.unMuteAudio() else callSession.muteAudio()
}
btnVideo.setOnClickListener {
    if (isVideoPaused) callSession.resumeVideo() else callSession.pauseVideo()
}
btnSwitchCamera.setOnClickListener { callSession.switchCamera() }
btnEndCall.setOnClickListener {
    callSession.leaveSession()
    finish()
}

3. Sync UI with Media Events

callSession.addMediaEventsListener(this, object : MediaEventsListener() {
    override fun onAudioMuted() {
        runOnUiThread { isAudioMuted = true; btnMute.setImageResource(R.drawable.ic_mic_off) }
    }
    override fun onAudioUnMuted() {
        runOnUiThread { isAudioMuted = false; btnMute.setImageResource(R.drawable.ic_mic_on) }
    }
    override fun onVideoPaused() {
        runOnUiThread { isVideoPaused = true; btnVideo.setImageResource(R.drawable.ic_video_off) }
    }
    override fun onVideoResumed() {
        runOnUiThread { isVideoPaused = false; btnVideo.setImageResource(R.drawable.ic_video_on) }
    }
    // ... other overrides
})

4. Custom Participant List

Hide default and build with RecyclerView:

// Hide default
.hideParticipantListButton(true)

// Listen for participant updates
callSession.addParticipantEventListener(this, object : ParticipantEventListener() {
    override fun onParticipantListChanged(participants: List<Participant>) {
        runOnUiThread { adapter.updateParticipants(participants) }
    }
    // ... other overrides
})

// Participant actions from custom UI
adapter.onMuteClick = { participant -> callSession.muteParticipant(participant.uid) }
adapter.onPauseVideoClick = { participant -> callSession.pauseParticipantVideo(participant.uid) }
adapter.onPinClick = { participant ->
    if (participant.isPinned) callSession.unPinParticipant()
    else callSession.pinParticipant(participant.uid)
}

5. Layout Control

// Change layout programmatically
callSession.setLayout(LayoutType.TILE)
callSession.setLayout(LayoutType.SPOTLIGHT)

// Listen for layout changes
callSession.addLayoutListener(this, object : LayoutListener() {
    override fun onCallLayoutChanged(layoutType: LayoutType) { /* update UI */ }
    override fun onParticipantListVisible() {}
    override fun onParticipantListHidden() {}
    override fun onPictureInPictureLayoutEnabled() {}
    override fun onPictureInPictureLayoutDisabled() {}
})

Available CallSession Actions

Gotchas

• Always use MediaEventsListener to sync your custom UI with actual state
• runOnUiThread {} is required for UI updates from listener callbacks
• hideControlPanel(true) hides the entire bottom bar — individual hide methods are ignored
• The call view container still renders video tiles even with controls hidden
• Use SessionStatusListener to handle session end and navigate away

Sample App Reference

• CallActivity.kt — Default UI with SessionStatusListener and ButtonClickListener