Outgoing Call - CometChat Docs

Overview

The CometChatOutgoingCall Component is a visual representation of a user-initiated call, whether it’s a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This component typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress.

Usage

Integration

CometChatOutgoingCall being a custom component, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application. Since CometChatOutgoingCall can be launched by adding the following code snippet into the XML layout file.

<com.cometchat.chatuikit.calls.outgoingcall.CometChatOutgoingCall
    android:id="@+id/outgoing_call"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

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

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

User user = new User();
user.setUid(""); //Required
user.setName(""); //Required
user.setAvatar(""); //Required

cometchatOutgoingCall.setUser(user); //Required - set the user object
//OR
cometchatOutgoingCall.setCall(call); //Required - set the call object

Activity and Fragment

You can integrate CometChatOutgoingCall into your Activity and Fragment by adding the following code snippets into the respective classes.

YourActivity.java

CometChatOutgoingCall cometchatOutgoingCall;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    cometchatOutgoingCall = new CometChatOutgoingCall(this);

    User user = new User();
    user.setUid(""); //Required
    user.setName(""); //Required
    user.setAvatar(""); //Required

    cometchatOutgoingCall.setUser(user); //Required - set the user object
    //OR
    cometchatOutgoingCall.setCall(call); //Required - set the call object

    setContentView(cometchatOutgoingCall);
}

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.

setOnError

This action doesn’t change the behavior of the component but rather listens for any errors that occur in the MessageList component.

YourActivity.java

 cometchatOutgoingCall.setOnError(new OnError() {
                    @Override
                    public void onError(CometChatException cometchatException) {
                        
                    }
                });

setOnEndCallClick

The setOnEndCallClick action is typically triggered when the end call button is clicked, carrying out default actions. However, with the following code snippet, you can effortlessly customize or override this default behavior to meet your specific needs.

cometchatOutgoingCall.setOnEndCallClick(new OnClick() {
    @Override
    public void onClick() {
        //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 Chat SDK. The OutgoingCall 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 Outgoing call component are as follows.

Event	Description
onOutgoingCallAccepted	Triggers when the outgoing call is accepted.
onOutgoingCallRejected	Triggers 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.

themes.xml

    <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
        <item name="cometchatAvatarStrokeRadius">8dp</item>
        <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
    </style>
    <style name="CustomOutgoingCall" parent="CometChatOutgoingCallStyle">
        <item name="cometchatOutgoingCallAvatarStyle">@style/CustomAvatarStyle</item>
    </style>

cometChatOutgoingCall.setStyle(R.style.CustomOutgoingCall);

To know more such attributes, visit the attributes file.

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. Below is a list of customizations along with corresponding code snippets

Methods	Description	Code
setCall	Used to set the Call object against which we need to display the outgoing screen	`.setCall(Call call)`
setCallSettingsBuilder	Sets the CallSettingsBuilder for the outgoing call configuration.	`setCallSettingsBuilder(CometChatCalls.CallSettingsBuilder callSettingsBuilder)`
disableSoundForCalls	used to enable/disable sound for outgoing call , default false	`.disableSoundForMessages(false);`
setCustomSoundForCalls	used to set custom sound for outgoing calls	`.setCustomSoundForMessages(@RawRes resource);`

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.

setTitleView

Allows setting a custom list item view to be rendered for each conversation in the fetched call list. Use Cases:

Display the contact’s name in a unique style.
Show a call type indicator (Voice Call, Video Call).
Add status text like “Calling…” or “Ringing…”.

YourActivity.java

cometchatOutgoingCall.setTitleView((context, call) -> {
            
    });

Example:

custom_title_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/call_iv"
        android:layout_width="@dimen/cometchat_24dp"
        android:layout_height="@dimen/cometchat_24dp" />

    <TextView
        android:id="@+id/subtitle_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:layout_marginStart="8dp"
        android:textAppearance="?attr/cometchatTextAppearanceCaption1Regular"
        android:textColor="?attr/cometchatTextColorPrimary" />
</LinearLayout>

YourActivity.java

cometchatOutgoingCall.setTitleView(new Function2<Context, Call, View>() {
        @Override
        public View apply(Context context, Call call) {
            View titleView = LayoutInflater.from(context).inflate(R.layout.custom_title_view, null);
            TextView tvTitle = titleView.findViewById(R.id.title_text);
            User user = (User) call.getCallReceiver();
            tvTitle.setText(user.getName() + " <> " + call.getSender().getUid());
            return titleView;
            }
        });

setSubtitleView

Enables customizing the subtitle view, typically used for additional call details. Use Cases:

Display call duration if available.
Show network strength indicators.
Include a custom message like “Connecting…”.

YourActivity.java

cometchatOutgoingCall.setSubtitleView((context, call) -> {
            
    });

Example:

custom_subtitle_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:gravity="center_horizontal"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/call_iv"
        android:layout_width="@dimen/cometchat_24dp"
        android:layout_height="@dimen/cometchat_24dp"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:id="@+id/subtitle_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginStart="8dp"
        android:textAlignment="center"
        android:textAppearance="?attr/cometchatTextAppearanceCaption1Regular"
        android:textColor="?attr/cometchatTextColorPrimary" />
</LinearLayout>
</LinearLayout>

YourActivity.java

cometchatOutgoingCall.setSubtitleView(new Function2<Context, Call, View>() {
            @Override
            public View apply(Context context, Call call) {
                View subtitleView = LayoutInflater.from(context).inflate(R.layout.custom_subtitle_view, null);
                TextView tvTitle = subtitleView.findViewById(R.id.subtitle_text);
                tvTitle.setText("Calling....");
                ImageView ivCall = subtitleView.findViewById(R.id.call_iv);

                if (CometChatConstants.CALL_TYPE_AUDIO.equals(call.getType())) {
                    ivCall.setImageResource(com.cometchat.chatuikit.R.drawable.cometchat_ic_call_voice);
                } else {
                    ivCall.setImageResource(com.cometchat.chatuikit.R.drawable.cometchat_ic_call_video);
                }

                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
                );
                layoutParams.gravity = Gravity.CENTER_VERTICAL;
                subtitleView.setLayoutParams(layoutParams);
                return subtitleView;
            }
        });

setAvatarView

Allows setting a custom leading view, usually used for the contact’s profile picture or avatar. Use Cases:

Show a profile picture with an online indicator.
Display a custom icon based on the call type (Voice/Video).
Use an animated ring effect around the avatar when calling.

YourActivity.java

cometchatOutgoingCall.setAvatarView((context, call) -> {
            
    });

Example:

custom_avatar_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_gravity="center_horizontal"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <com.cometchat.chatuikit.shared.views.avatar.CometChatAvatar
        android:id="@+id/avatar"
        android:layout_width="@dimen/cometchat_100dp"
        android:layout_height="@dimen/cometchat_100dp"
        android:layout_marginTop="@dimen/cometchat_40dp" />

    <View
        android:id="@+id/batch_view"
        android:layout_width="@dimen/cometchat_100dp"
        android:layout_height="@dimen/cometchat_24dp"
        android:layout_below="@id/avatar"
        android:layout_marginTop="-10dp"
        android:background="@drawable/admin_batch" />

</RelativeLayout>

YourActivity.java

cometchatOutgoingCall.setAvatarView(new Function2<Context, Call, View>() {
            @Override
            public View apply(Context context, Call call) {
                View avatarView = LayoutInflater.from(context).inflate(R.layout.custom_avatar_view, null);
                CometChatAvatar avatar = avatarView.findViewById(R.id.avatar);
                User user = (User) call.getReceiver();
                avatar.setAvatar(user.getUid(), user.getAvatar());

                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
                );
                layoutParams.gravity = Gravity.CENTER_VERTICAL;
                avatarView.setLayoutParams(layoutParams);
                return avatarView;
            }
        });

setEndCallView

Defines a custom title view for the end call button, allowing modifications to the call termination UI. Use Cases:

Customize the “End Call” button style.
Add a confirmation pop-up before ending the call.
Display different icons based on call status (Active, On Hold).

YourActivity.java

cometchatOutgoingCall.setEndCallView((context, call) -> {
            
    });

Example:

end_call_button.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/cometchat_16dp"
    android:layout_marginEnd="@dimen/cometchat_16dp"
    app:cardBackgroundColor="?attr/cometchatErrorColor"
    app:cardCornerRadius="@dimen/cometchat_16dp"
    app:strokeColor="?attr/cometchatStrokeColorDark"
    app:strokeWidth="1dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:padding="@dimen/cometchat_16dp">

        <ImageView
            android:id="@+id/end_call_iv"
            android:layout_width="@dimen/cometchat_30dp"
            android:layout_height="@dimen/cometchat_30dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/cometchat_ic_end_call"
            app:tint="?attr/cometchatColorWhite" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="@dimen/cometchat_16dp"
            android:text="End Call"
            android:textAppearance="?attr/cometchatTextAppearanceHeading4Regular"
            android:textColor="?attr/cometchatColorWhite" />
    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

YourActivity.java

cometchatOutgoingCall.setEndCallView(new Function2<Context, Call, View>() {
            @Override
            public View apply(Context context, Call call) {
                View endCallButtonView = LayoutInflater.from(context).inflate(R.layout.end_call_button, null);

                endCallButtonView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(context, "End call clicked", Toast.LENGTH_SHORT).show();
                    }
                });
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
                );
                layoutParams.bottomMargin = Utils.convertDpToPx(context, 40);
                endCallButtonView.setLayoutParams(layoutParams);
                return endCallButtonView;
            }
        });

​Overview

​Usage

​Integration

Activity and Fragment

​Actions

setOnError

setOnEndCallClick

​Filters

​Events

Add CometChatCallEvents

Remove CometChatCallEvents

​Customization

​Style

​Functionality

​Advanced

​setTitleView

​setSubtitleView

​setAvatarView

​setEndCallView

Overview

Usage

Integration

Actions

Filters

Events

Customization

Style

Functionality

Advanced

setTitleView

setSubtitleView

setAvatarView

setEndCallView