Call Buttons

CometChatCallButtons provides users with the ability to make voice and video calls. It renders call buttons that, when clicked, initiate a call to the specified user or group.

When to use this

• You need to add voice and video call buttons to a chat screen or user profile.
• You want to trigger outgoing calls to a specific User or Group object.
• You need to customize which call buttons are visible (voice only, video only, or both).
• You want to override the default call-initiation behavior with custom logic.
• You need to configure call settings such as audio/video preferences using CometChatCalls.CallSettingsBuilder.

Prerequisites

• CometChat SDK initialized with CometChatUIKit.init() and a user logged in.
• The cometchat-chat-uikit-android dependency added to your project.
• A valid User or Group object to pass to the component.
• A layout XML file or Activity/Fragment where you will place the component.

Quick start

1. Open your layout XML file (e.g., activity_main.xml).
2. Add the CometChatCallButtons XML element:

activity_main.xml

<com.cometchat.chatuikit.calls.callbutton.CometChatCallButtons
    android:id="@+id/call_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

What this does: Adds the CometChatCallButtons component to your layout with wrap-content sizing. It renders voice and video call buttons.

3. In your Activity or Fragment, get a reference to the component and set a User or Group object:

Java

CometChatCallButtons cometchatCallButtons = binding.callButton; // 'binding' is a view binding instance. Initialize it with `binding = YourXmlFileNameBinding.inflate(getLayoutInflater());` to use views like `binding.callButton` after enabling view binding.

if (userObject != null) {
cometchatCallButtons.setUser(userObject); //Required - CometChat User object
} else if (groupObject != null) {
cometchatCallButtons.setGroup(groupObject); //Required - CometChat Group object
}

Kotlin

val cometchatCallButtons: CometChatCallButtons = binding.callButton // 'binding' is a view binding instance. Initialize it with `binding = YourXmlFileNameBinding.inflate(layoutInflater)` to use views like `binding.callButton` after enabling view binding.

if (userObject != null) {
    cometchatCallButtons.setUser(userObject) //Required - CometChat User object
} else if (groupObject != null) {
    cometchatCallButtons.setGroup(groupObject) //Required - CometChat Group object
}

What this does: Retrieves the CometChatCallButtons instance from the layout using view binding, then sets either a User or Group object. The component requires one of these to know who to call.

4. Build and run your app.
5. Verify that the voice and video call buttons appear in your layout.

Core concepts

• CometChatCallButtons: The main component class that renders voice and video call buttons. It must be bound to a User or Group object using setUser() or setGroup().
• Actions: Callbacks such as setOnVoiceCallClick, setOnVideoCallClick, and setOnError that let you override default call-initiation behavior.
• Filters: The CometChatCallButtons component does not have any exposed filters.
• Events: Global events emitted by the component (ccCallAccepted, ccCallRejected) that you can listen to using CometChatCallEvents.
• Style: XML theme styles (parent CometChatCallButtonsStyle) applied via setStyle() to customize icon tints, backgrounds, padding, stroke, and corner radius.
• Configurations: Use OutgoingCallConfiguration to customize the outgoing call screen that appears after a call is initiated.

Implementation

Actions

What you’re changing: How the component responds when the user taps a call button or when an error occurs.

• Where: Activity or Fragment where you hold a reference to CometChatCallButtons (e.g., cometchatCallButtons).
• Applies to: CometChatCallButtons.
• Default behavior: Tapping the voice call button initiates a voice call; tapping the video call button initiates a video call. Errors are handled internally.
• Override: Call the corresponding setter method to replace the default behavior with your own logic.

setOnVoiceCallClick

Overrides the default voice call initiation behavior. If you set this, tapping the voice call button executes your custom logic instead of placing a call.

Java

cometchatCallButtons.setOnVoiceCallClick(new CometChatCallButtons.OnClick() {
    @Override
    public void onClick(User user, Group group) {
        //TODO
    }
});

Kotlin

cometchatCallButtons.setOnVoiceCallClick(CometChatCallButtons.OnClick { user, group -> 
    //TODO
})

What this does: Replaces the default voice call behavior. When the user taps the voice call button, your custom OnClick lambda executes with the User and Group objects instead of the built-in call initiation.

setOnVideoCallClick

Overrides the default video call initiation behavior. If you set this, tapping the video call button executes your custom logic instead of placing a call.

Java

cometchatCallButtons.setOnVideoCallClick(new CometChatCallButtons.OnClick() {
    @Override
    public void onClick(User user, Group group) {
        //TODO
    }
});

Kotlin

cometchatCallButtons.setOnVideoCallClick(CometChatCallButtons.OnClick { user, group -> 
    //TODO
})

What this does: Replaces the default video call behavior. When the user taps the video call button, your custom OnClick lambda executes with the User and Group objects instead of the built-in call initiation.

setOnError

Overrides the default error handling. If you set this, errors encountered by the component are passed to your custom handler.

Java

cometchatCallButtons.setOnError(new OnError() {
    @Override
    public void onError(CometChatException e) {
        //TODO   
    }
});

Kotlin

cometchatCallButtons.setOnError(OnError {  e ->
    //TODO
})

What this does: Replaces the default error handling. When the component encounters an error (e.g., a failed call initiation), your custom OnError callback receives the CometChatException.

• Verify: After setting any action override, tap the corresponding button and confirm your custom logic executes instead of the default behavior.

Events

What you’re changing: How you listen for call-related events emitted by the component.

• Where: Activity or Fragment where you want to respond to call events.
• Applies to: CometChatCallButtons (events are global via CometChatCallEvents).
• Default behavior: The component emits ccCallAccepted and ccCallRejected events when the outgoing call is accepted or rejected.
• Override: Add a CometChatCallEvents listener with a unique ID to receive these events.

Event	Description
ccCallAccepted	Triggers when the outgoing call is accepted.
ccCallRejected	Triggers when the outgoing call is rejected.

Add CometChatCallEvents

Java

CometChatCallEvents.addListener("UNIQUE_ID", new CometChatCallEvents() {
    @Override
    public void ccCallAccepted(Call call) {
        super.ccCallAccepted(call);
    }

    @Override
    public void ccCallRejected(Call call) {
        super.ccCallRejected(call);
    }

});

Kotlin

What this does: Registers a CometChatCallEvents listener with the tag "UNIQUE_ID". When an outgoing call is accepted, ccCallAccepted fires with the Call object. When an outgoing call is rejected, ccCallRejected fires with the Call object.

Remove CometChatCallEvents

Java

CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER");

Kotlin

CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")

What this does: Removes the CometChatCallEvents listener identified by the tag string. Use the same tag you passed to addListener to unsubscribe.

• Verify: After adding the listener, initiate a call and confirm that ccCallAccepted or ccCallRejected fires when the recipient responds.

Style

What you’re changing: The visual appearance of the call buttons (icon tints, backgrounds, padding, stroke, corner radius).

• Where: themes.xml for the style definition, Activity or Fragment for applying the style.
• Applies to: CometChatCallButtons.
• Default behavior: The component uses the default CometChatCallButtonsStyle theme.
• Override: Define a custom style with parent CometChatCallButtonsStyle in themes.xml, then apply it with setStyle().
• Code:

themes.xml

    <style name="CustomCallButtonStyle" parent="CometChatCallButtonsStyle">
        <item name="cometchatCallButtonsVideoCallIconTint">#6852D6</item>
        <item name="cometchatCallButtonsVoiceCallIconTint">#6852D6</item>
        <item name="cometchatCallButtonsMarginBetween">16dp</item>
        <item name="cometchatCallButtonsVideoCallButtonPadding">8dp</item>
        <item name="cometchatCallButtonsVoiceCallButtonPadding">8dp</item>
        <item name="cometchatCallButtonsVideoCallBackgroundColor">#EDEAFA</item>
        <item name="cometchatCallButtonsVoiceCallBackgroundColor">#EDEAFA</item>
        <item name="cometchatCallButtonsVideoCallStrokeWidth">1dp</item>
        <item name="cometchatCallButtonsVoiceCallStrokeWidth">1dp</item>
        <item name="cometchatCallButtonsVideoCallStrokeColor">#E8E8E8</item>
        <item name="cometchatCallButtonsVoiceCallStrokeColor">#E8E8E8</item>
        <item name="cometchatCallButtonsVideoCallCornerRadius">8dp</item>
        <item name="cometchatCallButtonsVoiceCallCornerRadius">8dp</item>
    </style>

What this does: Defines a custom style named CustomCallButtonStyle that sets purple icon tints, light purple backgrounds, 8dp padding, 1dp gray strokes, and 8dp corner radius for both voice and video call buttons.

Java

cometChatCallButtons.setStyle(R.style.CustomCallButtonStyle);

Kotlin

cometChatCallButtons.setStyle(R.style.CustomCallButtonStyle)

What this does: Applies the CustomCallButtonStyle theme to the CometChatCallButtons instance, overriding the default visual appearance.

To know more such attributes, visit the attributes file.

• Verify: After applying the style, confirm that the call buttons display with the custom icon tints, backgrounds, padding, strokes, and corner radius defined in your style.

Functionality

What you’re changing: Functional properties such as which user or group receives the call, button visibility, call settings, and outgoing call configuration.

• Where: Activity or Fragment where you hold a reference to CometChatCallButtons.
• Applies to: CometChatCallButtons.
• Default behavior: Both voice and video call buttons are visible. No call settings builder or outgoing call configuration is set.
• Override: Call the corresponding setter method on the CometChatCallButtons instance.

Property	Description	Code
setUser	Sets the User object to the call button.	.setUser(User user)
setGroup	Sets the Group object to the call button.	.setGroup(group)
setVideoCallButtonVisibility	Hides or shows the video call button.	.setVideoCallButtonVisibility(View.GONE)
setVoiceCallButtonVisibility	Hides or shows the voice call button.	.setVoiceCallButtonVisibility(View.GONE)
setCallSettingsBuilder	Sets the call settings builder callback function. This callback configures the call settings based on the user, group, and call type (audio/video).	.setCallSettingsBuilder(Function3<User, Group, Boolean, CometChatCalls.CallSettingsBuilder> callSettingsBuilder)
setOutgoingCallConfiguration	Sets the configurations for the outgoing call component.	.setOutgoingCallConfiguration(new OutgoingCallConfiguration)

What this does: These functional properties control which entity receives the call, which buttons are visible, how call settings are configured, and how the outgoing call screen behaves.

• Verify: After setting a property, confirm the expected behavior. If you hide the video call button with setVideoCallButtonVisibility(View.GONE), only the voice call button is visible. If you set a User object, tapping a call button initiates a call to that user.

Configurations

What you’re changing: Properties of the outgoing call screen that appears after a call is initiated from CometChatCallButtons.

• Where: Activity or Fragment where you hold a reference to CometChatCallButtons.
• Applies to: CometChatCallButtons (configures the child OutgoingCall component).
• Default behavior: The outgoing call screen uses default settings.
• Override: Create an OutgoingCallConfiguration instance, configure it, and pass it to setOutgoingCallConfiguration().
• Code:

Java

OutgoingCallConfiguration outgoingCallConfiguration = new OutgoingCallConfiguration();

cometchatCallButtons.setOutgoingCallConfiguration(outgoingCallConfiguration);

Kotlin

val outgoingCallConfiguration = OutgoingCallConfiguration()

cometchatCallButtons.setOutgoingCallConfiguration(outgoingCallConfiguration)

What this does: Creates an OutgoingCallConfiguration instance and applies it to the CometChatCallButtons component. This lets you customize the outgoing call screen properties.

All exposed properties of OutgoingCallConfiguration can be found under Outgoing Call. Properties marked with the 🛑 symbol are not accessible within the Configuration Object.

• Verify: After setting the outgoing call configuration, initiate a call and confirm the outgoing call screen reflects your configuration changes.

Customization matrix

What you want to change	Where	Property/API	Example
Video call icon tint	themes.xml	cometchatCallButtonsVideoCallIconTint in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVideoCallIconTint">#6852D6</item>
Voice call icon tint	themes.xml	cometchatCallButtonsVoiceCallIconTint in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVoiceCallIconTint">#6852D6</item>
Margin between buttons	themes.xml	cometchatCallButtonsMarginBetween in CometChatCallButtonsStyle	<item name="cometchatCallButtonsMarginBetween">16dp</item>
Video call button padding	themes.xml	cometchatCallButtonsVideoCallButtonPadding in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVideoCallButtonPadding">8dp</item>
Voice call button padding	themes.xml	cometchatCallButtonsVoiceCallButtonPadding in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVoiceCallButtonPadding">8dp</item>
Video call background color	themes.xml	cometchatCallButtonsVideoCallBackgroundColor in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVideoCallBackgroundColor">#EDEAFA</item>
Voice call background color	themes.xml	cometchatCallButtonsVoiceCallBackgroundColor in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVoiceCallBackgroundColor">#EDEAFA</item>
Video call stroke width	themes.xml	cometchatCallButtonsVideoCallStrokeWidth in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVideoCallStrokeWidth">1dp</item>
Voice call stroke width	themes.xml	cometchatCallButtonsVoiceCallStrokeWidth in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVoiceCallStrokeWidth">1dp</item>
Video call stroke color	themes.xml	cometchatCallButtonsVideoCallStrokeColor in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVideoCallStrokeColor">#E8E8E8</item>
Voice call stroke color	themes.xml	cometchatCallButtonsVoiceCallStrokeColor in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVoiceCallStrokeColor">#E8E8E8</item>
Video call corner radius	themes.xml	cometchatCallButtonsVideoCallCornerRadius in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVideoCallCornerRadius">8dp</item>
Voice call corner radius	themes.xml	cometchatCallButtonsVoiceCallCornerRadius in CometChatCallButtonsStyle	<item name="cometchatCallButtonsVoiceCallCornerRadius">8dp</item>
Apply a custom style	Activity/Fragment	setStyle(int styleRes)	cometChatCallButtons.setStyle(R.style.CustomCallButtonStyle);
Set user for call	Activity/Fragment	setUser(User user)	.setUser(userObject)
Set group for call	Activity/Fragment	setGroup(Group group)	.setGroup(groupObject)
Hide video call button	Activity/Fragment	setVideoCallButtonVisibility(int)	.setVideoCallButtonVisibility(View.GONE)
Hide voice call button	Activity/Fragment	setVoiceCallButtonVisibility(int)	.setVoiceCallButtonVisibility(View.GONE)
Configure call settings	Activity/Fragment	setCallSettingsBuilder(Function3<User, Group, Boolean, CometChatCalls.CallSettingsBuilder>)	.setCallSettingsBuilder(callSettingsBuilder)
Configure outgoing call screen	Activity/Fragment	setOutgoingCallConfiguration(OutgoingCallConfiguration)	.setOutgoingCallConfiguration(new OutgoingCallConfiguration())
Override voice call tap	Activity/Fragment	setOnVoiceCallClick(CometChatCallButtons.OnClick)	See setOnVoiceCallClick code above
Override video call tap	Activity/Fragment	setOnVideoCallClick(CometChatCallButtons.OnClick)	See setOnVideoCallClick code above
Override error handling	Activity/Fragment	setOnError(OnError)	See setOnError code above

Common pitfalls & fixes

Pitfall	Fix
Component does not render	Ensure CometChatUIKit.init() is called and awaited before using any UI Kit component. If init() has not completed, the component will not load.
Call buttons appear but nothing happens on tap	Verify that you have set a User or Group object using setUser() or setGroup(). The component requires one of these to know who to call.
Both call buttons visible when only one is needed	Use setVideoCallButtonVisibility(View.GONE) to hide the video call button, or setVoiceCallButtonVisibility(View.GONE) to hide the voice call button.
Custom style not applied	Verify the style parent is CometChatCallButtonsStyle and that you call setStyle(R.style.YourStyle) on the component instance.
setOnVoiceCallClick or setOnVideoCallClick not firing	Ensure you set the action override on the correct CometChatCallButtons instance. If you have multiple instances, each must be configured separately.
Event listener not receiving ccCallAccepted or ccCallRejected	Ensure you call CometChatCallEvents.addListener with a unique ID string. If you use the same ID as another listener, the previous one is replaced.
Outgoing call configuration not taking effect	Ensure you call setOutgoingCallConfiguration() before the call is initiated. If called after the call starts, the configuration may not apply.

FAQ

Q: Do I need to set both a User and a Group on CometChatCallButtons? A: No. Set either a User object with setUser() or a Group object with setGroup(). The component uses whichever is set to determine the call recipient.

Q: How do I show only the voice call button? A: Call setVideoCallButtonVisibility(View.GONE) on the CometChatCallButtons instance. This hides the video call button and leaves only the voice call button visible.

Q: Can I customize the outgoing call screen that appears after tapping a call button? A: Yes. Create an OutgoingCallConfiguration instance, configure its properties, and pass it to setOutgoingCallConfiguration(). See the Outgoing Call page for all available properties.

Q: Does CometChatCallButtons support filters? A: No. The CometChatCallButtons component does not have any exposed filters.

Q: How do I configure call settings like enabling/disabling audio or video? A: Use setCallSettingsBuilder() to provide a Function3<User, Group, Boolean, CometChatCalls.CallSettingsBuilder> callback that returns a configured CometChatCalls.CallSettingsBuilder based on the user, group, and call type.

Next steps

• Outgoing Call component
• Incoming Call component
• Call Logs component