Call Buttons

Voice and video call buttons that initiate calls for a given user or group.

CometChatCallButtons renders voice and video call buttons and initiates calls for the bound User or Group. Place it in a CometChatMessageHeader or anywhere a call action is needed.

---

Where It Fits

CometChatCallButtons is a utility component. Wire it into a CometChatMessageHeader or place it standalone wherever a call action is needed.

Kotlin (XML Views)

activity_chat.xml

<com.cometchat.uikit.kotlin.presentation.callbuttons.CometChatCallButtons
    android:id="@+id/call_buttons"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

val callButtons = findViewById<CometChatCallButtons>(R.id.call_buttons)
callButtons.setUser(user)

Jetpack Compose

CometChatCallButtons(
    user = user
)

---

Quick Start

Kotlin (XML Views)

Add to your layout XML:

<com.cometchat.uikit.kotlin.presentation.callbuttons.CometChatCallButtons
    android:id="@+id/call_buttons"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Set a User or Group — required before calls can be initiated:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.your_layout)

    val callButtons = findViewById<CometChatCallButtons>(R.id.call_buttons)
    callButtons.setUser(user)
    // or callButtons.setGroup(group)
}

Or programmatically:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val callButtons = CometChatCallButtons(this)
    callButtons.setUser(user)
    setContentView(callButtons)
}

Jetpack Compose

@Composable
fun CallButtonsScreen() {
    CometChatCallButtons(
        user = user
        // or group = group
    )
}

Prerequisites: CometChat SDK initialized with CometChatUIKit.init(), a user logged in, and the UI Kit dependency added.

You must call setUser(User) or setGroup(Group) before the buttons can initiate a call. Without a target, button clicks have no effect.

---

Actions and Events

Callback Methods

onVoiceCallClick

Fires when the voice call button is tapped. Replaces the default behavior of initiating an audio call.

Kotlin (XML Views)

callButtons.setOnVoiceCallClick { user, group ->
    // Custom voice call logic
}

Jetpack Compose

CometChatCallButtons(
    user = user,
    onVoiceCallClick = { u, g ->
        // Custom voice call logic
    }
)

onVideoCallClick

Fires when the video call button is tapped. Replaces the default behavior of initiating a video call.

Kotlin (XML Views)

callButtons.setOnVideoCallClick { user, group ->
    // Custom video call logic
}

Jetpack Compose

CometChatCallButtons(
    user = user,
    onVideoCallClick = { u, g ->
        // Custom video call logic
    }
)

onError

Fires on internal errors (network failure, auth issue, SDK exception).

Kotlin (XML Views)

callButtons.setOnError { exception ->
    Log.e("CallButtons", "Error: ${exception.message}")
}

Jetpack Compose

CometChatCallButtons(
    user = user,
    onError = { exception ->
        Log.e("CallButtons", "Error: ${exception.message}")
    }
)

Global UI Events (CometChatCallEvents)

Event	Fires when	Payload
ccOutgoingCall	An outgoing call is initiated	Call
ccCallAccepted	A call is accepted by the recipient	Call
ccCallRejected	A call is rejected by the recipient	Call
ccCallEnded	A call is ended	Call

---

Functionality

Method (Kotlin XML)	Compose Parameter	Description
setUser(user)	user = user	Set the user to call (required for 1-on-1)
setGroup(group)	group = group	Set the group to call (required for group calls)
setOnVoiceCallClick { }	onVoiceCallClick = { }	Override voice call button behavior
setOnVideoCallClick { }	onVideoCallClick = { }	Override video call button behavior
setOnError { }	onError = { }	Error callback
setVoiceCallButtonVisibility(View.GONE)	hideVoiceCallButton = true	Toggle voice call button
setVideoCallButtonVisibility(View.GONE)	hideVideoCallButton = true	Toggle video call button

---

Style

Kotlin (XML Views)

Define a custom style in themes.xml:

themes.xml

<style name="CustomCallButtonsStyle" parent="CometChatCallButtonsStyle">
    <item name="cometchatCallButtonsVoiceCallIconTint">#4CAF50</item>
    <item name="cometchatCallButtonsVideoCallIconTint">#2196F3</item>
    <item name="cometchatCallButtonsVoiceCallBackgroundColor">#E8F5E9</item>
    <item name="cometchatCallButtonsVideoCallBackgroundColor">#E3F2FD</item>
</style>

callButtons.setStyle(R.style.CustomCallButtonsStyle)

Jetpack Compose

CometChatCallButtons(
    user = user,
    style = CometChatCallButtonsStyle.default().copy(
        voiceCallIconTint = Color(0xFF4CAF50),
        videoCallIconTint = Color(0xFF2196F3),
        voiceCallBackgroundColor = Color(0xFFE8F5E9),
        videoCallBackgroundColor = Color(0xFFE3F2FD)
    )
)

See Component Styling for the full reference.

---

ViewModel

val viewModel = ViewModelProvider(this)
    .get(CometChatCallButtonsViewModel::class.java)

Kotlin (XML Views)

callButtons.setViewModel(viewModel)

Jetpack Compose

CometChatCallButtons(
    user = user,
    callButtonsViewModel = viewModel
)

See ViewModel & Data for state observation and custom repositories.

---

Next Steps

Call Logs

View call history

Incoming Call

Incoming call notification with accept/reject

Outgoing Call

Outgoing call screen with end-call button

Message Header

Display user/group info in the toolbar