Skip to main content
Version: v4

Call Buttons

Overview​

The CometChatCallButtons is a Component provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.

Usage​

Integration​

CometChatCallButtons can be used inside another widget or can be launched to a new screen by adding the following code snippet into the XML layout file.

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

If you're defining the CometChatCallButtons within the XML code or in your activity or fragment then you'll need to extract them and set them on the User object using the appropriate method.

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
}

Actions​

Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

1. SetOnVoiceCallClick​

The setOnVoiceCallClick action is usually invoked when a voice call is initiated, executing predefined actions. However, by utilizing the provided code snippet, you can effortlessly tailor or override this default behavior to suit your unique requirements.

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

The setOnVideoCallClick action is typically triggered when a video call is initiated, executing default actions. However, with the provided code snippet, you have the flexibility to easily customize or override this default behavior according to your specific preferences or requirements.

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

You can customize this behavior by using the provided code snippet to override the setOnError and improve error handling.

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

Filters​

Filters allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of ChatSDK.

The CallButton component does not have any exposed filters.

Events​

Events are emitted by a Component. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

Events emitted by the Call buttons component are as follows.

EventDescription
ccCallAcceptedTriggers when the outgoing call is accepted.
ccCallRejectedTriggers when the outgoing call is rejected.

Add CometChatCallEvents

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

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

});

Remove CometChatCallEvents

CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER");

Customization​

To fit your app's design requirements, you can customize the appearance of the conversation component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

Style​

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.

1. CallButtons Style​

You can customize the appearance of the CometChatCallButtons Component by applying the CallButtonsStyle to it using the following code snippet.

CallButtonsStyle callButtonsStyle = new CallButtonsStyle();
callButtonsStyle.setBorderColor(Color.RED);
callButtonsStyle.setBorderWidth(10);
callButtonsStyle.setBackground(Color.CYAN);
callButtonsStyle.setCornerRadius(40);

cometchatCallButtons.setStyle(callButtonsStyle);

List of properties exposed by CallButtonsStyle

PropertyDescriptionCode
BackgroundUsed to set the background color.setBackground(@ColorInt int)
BackgroundUsed to set background Drawable.setBackground(Drawable)
Border ColorUsed to set border color.setBorderColor(@ColorInt int)
Border WidthUsed to set border.setBorderWidth(int)
Corner RadiusUsed to set border radius.setCornerRadius(float)

Functionality​

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

cometchatCallButtons.hideVideoCall(true);
cometchatCallButtons.hideVoiceCall(true);

Below is a list of customizations along with corresponding code snippets

PropertyDescriptionCode
GroupUsed to set Group object to the call button.set(Group: Group)
Hide Video CallUsed to hide video call button.set(HideVideoCall: boolean)
Hide Voice CallUsed to hide voice call button.set(HideVoiceCall: boolean)
UserUsed to set User object to the call button.set(User: User)
Video Call IconUsed to set video call icon.set(VideoCallIcon: @DrawableRes int)
Video Call TextUsed to set video call text.set(VideoButtonText: String)
Voice Call IconUsed to set voice call icon.set(VoiceCallIcon: @DrawableRes int)
Voice Call TextUsed to set voice call text.set(VoiceButtonText: String)

Advanced​

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

The CometChatCallButtons component does not provide additional functionalities beyond this level of customization.

Configurations​

Configurations offer the ability to customize the properties of each individual component within a Composite Component.

  • Configurations expose properties that are available in its individual components.

Outgoing Call​

You can customize the properties of the Outgoing Call component by making use of the OutgoingCallConfiguration. You can accomplish this by employing the OutgoingCallConfiguration as demonstrated below:

OutgoingCallConfiguration outgoingCallConfiguration = new OutgoingCallConfiguration();

cometchatCallButtons.setOutgoingCallConfiguration(outgoingCallConfiguration);

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

Example

Let's say you want to change the style of the Outgoing Call subcomponent and, in addition, you only want to disable soundForCalls.

You can modify the style using the OutgoingCallStyle property, and disable sound for calls using .disable(soundForCalls: bool) property.

OutgoingCallStyle outgoingCallStyle = new OutgoingCallStyle();
outgoingCallStyle.setTitleColor(Color.RED);
outgoingCallStyle.setSubTitleColor(Color.RED);
outgoingCallStyle.setCornerRadius(20);

OutgoingCallConfiguration outgoingCallConfiguration = new OutgoingCallConfiguration();
outgoingCallConfiguration.setDisableSoundForCalls(true);
outgoingCallConfiguration.setOutgoingCallStyle(outgoingCallStyle);

cometchatCallButtons.setOutgoingCallConfiguration(outgoingCallConfiguration);