> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Outgoing Call

## Overview

The `CometChatOutgoingCall` [Component](/ui-kit/android/components-overview#components) 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/Lc9mXSk8oVxt1t7p/images/703120eb-outgoing_call-c24eb1936c04bb40ea873ac19b973b56.png?fit=max&auto=format&n=Lc9mXSk8oVxt1t7p&q=85&s=af4178f1f3bf86e744b05b5b9d59fe65" width="1440" height="833" data-path="images/703120eb-outgoing_call-c24eb1936c04bb40ea873ac19b973b56.png" />
</Frame>

***

## 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.

<Tabs>
  <Tab title="XML">
    ```xml theme={null}
    <com.cometchat.chatuikit.calls.outgoingcall.CometChatOutgoingCall
        android:id="@+id/outgoing_call"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    ```
  </Tab>
</Tabs>

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.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    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
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val cometchatOutgoingCall: CometChatOutgoingCall = binding.outgoingCall // 'binding' is a view binding instance. Initialize it with `binding = YourXmlFileNameBinding.inflate(layoutInflater)` to use views like `binding.outgoingCall` after enabling view binding.


    val user = User()
    user.uid = "" //Required
    user.name = "" //Required
    user.avatar = "" //Required

    cometchatOutgoingCall.setUser(user) //Required - set the user object
    //OR
    cometchatOutgoingCall.setCall(call) //Required - set the call object
    ```
  </Tab>
</Tabs>

##### Activity and Fragment

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

<Tabs>
  <Tab title="Java (Activity)">
    ```java YourActivity.java theme={null}
    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);
    }
    ```
  </Tab>

  <Tab title="Kotlin (Activity)">
    ```kotlin YourActivity.kt theme={null}
    private lateinit var cometchatOutgoingCall: CometChatOutgoingCall

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        cometchatOutgoingCall = CometChatOutgoingCall(this)

        val user = User()
        user.uid = "" //Required
        user.name = "" //Required
        user.avatar = "" //Required

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

        setContentView(cometchatOutgoingCall)
    }
    ```
  </Tab>

  <Tab title="Java (Fragment)">
    ```java YourFragment.java theme={null}
    CometChatOutgoingCall cometchatOutgoingCall;

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        cometchatOutgoingCall = new CometChatOutgoingCall(requireContext());

        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

        return cometchatOutgoingCall;
    }
    ```
  </Tab>

  <Tab title="Kotlin (Fragment)">
    ```kotlin YourFragment.kt theme={null}
    private lateinit var cometchatOutgoingCall: CometChatOutgoingCall

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        cometchatOutgoingCall = CometChatOutgoingCall(requireContext())

        val user = User()
        user.uid = "" //Required
        user.name = "" //Required
        user.avatar = "" //Required

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

        return cometchatOutgoingCall
    }
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/android/components-overview#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.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
     cometchatOutgoingCall.setOnError(new OnError() {
                        @Override
                        public void onError(CometChatException cometchatException) {
                            
                        }
                    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
     cometchatOutgoingCall.setOnError(object : OnError {
        override fun onError(context: Context, e: CometChatException) {
            // Your Exception Handling code.
        }
    })
    ```
  </Tab>
</Tabs>

##### 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.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatOutgoingCall.setOnEndCallClick(new OnClick() {
        @Override
        public void onClick() {
            //TODO
        }
    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatOutgoingCall.setOnEndCallClick(OnClick { 
        //TODO
    })
    ```
  </Tab>
</Tabs>

***

### 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](/ui-kit/android/components-overview#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

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CometChatCallEvents.addListener("UNIQUE_ID", new CometChatCallEvents() {
        @Override
        public void ccCallAccepted(Call call) {
            super.ccCallAccepted(call);
        }

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

    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    CometChatCallEvents.addListener("UNIQUE_ID", object : CometChatCallEvents() {
        override fun ccCallAccepted(call: Call) {
            super.ccCallAccepted(call)
        }

        override fun ccCallRejected(call: Call) {
            super.ccCallRejected(call)
        }
    })
    ```
  </Tab>
</Tabs>

***

##### Remove CometChatCallEvents

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER");
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
    ```
  </Tab>
</Tabs>

***

## 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/bhTrlIxYu6hfTewG/images/430add9e-outgoing_call_styling-4478d162278403121a8f89d481625c9e.png?fit=max&auto=format&n=bhTrlIxYu6hfTewG&q=85&s=722ef0eb670190949600a9a1be0cfd5a" width="1280" height="800" data-path="images/430add9e-outgoing_call_styling-4478d162278403121a8f89d481625c9e.png" />
</Frame>

```xml themes.xml theme={null}
    <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>
```

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometChatOutgoingCall.setStyle(R.style.CustomOutgoingCall);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatOutgoingCall.setStyle(R.style.CustomOutgoingCall)
    ```
  </Tab>
</Tabs>

***

To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_call.xml).

### 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...".

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatOutgoingCall.setTitleView((context, call) -> {
                
        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatOutgoingCall.setTitleView(object : Function3<Context?, Call?, View?> {
                override fun apply(context: Context?, call: Call?): View? {
                 
                }
            })
    ```
  </Tab>
</Tabs>

Example:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/494NzpIb6o8839I0/images/7e3e0d88-outgoing_call_title_view-0fd6e88ca01f03ba95560faa430c4a44.png?fit=max&auto=format&n=494NzpIb6o8839I0&q=85&s=24242226e281b5d67a1b4754e4969127" width="1280" height="800" data-path="images/7e3e0d88-outgoing_call_title_view-0fd6e88ca01f03ba95560faa430c4a44.png" />
</Frame>

```xml custom_title_view.xml theme={null}
<?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>
```

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    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;
                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}

    cometchatOutgoingCall.setTitleView(object : Function2<Context?, Call?, View?> {
            override fun apply(context: Context?, call: Call?): View? {
                    val titleView: View = LayoutInflater.from(context).inflate(R.layout.custom_title_view, null)
                    val tvTitle = titleView.findViewById<TextView>(R.id.title_text)
                    val user = call?.callReceiver as User
                    tvTitle.text = user.name + " <> " + call.sender.uid
                    return titleView
                }
            })
    ```
  </Tab>
</Tabs>

***

#### 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...".

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatOutgoingCall.setSubtitleView((context, call) -> {
                
        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatOutgoingCall.setSubtitleView(object : Function3<Context?, Call?, View?> {
                override fun apply(context: Context?, call: Call?): View? {
                 
                }
            })
    ```
  </Tab>
</Tabs>

Example:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/494NzpIb6o8839I0/images/7e3e0d88-outgoing_call_title_view-0fd6e88ca01f03ba95560faa430c4a44.png?fit=max&auto=format&n=494NzpIb6o8839I0&q=85&s=24242226e281b5d67a1b4754e4969127" width="1280" height="800" data-path="images/7e3e0d88-outgoing_call_title_view-0fd6e88ca01f03ba95560faa430c4a44.png" />
</Frame>

```html custom_subtitle_view.xml theme={null}
<?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>
```

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    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;
                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}

    cometchatOutgoingCall.setSubtitleView(object : Function2<Context?, Call?, View?> {
                override fun apply(context: Context?, call: Call?): View? {
                    val subtitleView: View = LayoutInflater.from(context).inflate(R.layout.custom_title_view, null)
                    val tvTitle = subtitleView.findViewById<TextView>(R.id.subtitle_text)
                    tvTitle.text = "Calling...."
                    val ivCall = subtitleView.findViewById<ImageView>(R.id.call_iv)

                    if (CometChatConstants.CALL_TYPE_AUDIO == call.type) {
                        ivCall.setImageResource(com.cometchat.chatuikit.R.drawable.cometchat_ic_call_voice)
                    } else {
                        ivCall.setImageResource(com.cometchat.chatuikit.R.drawable.cometchat_ic_call_video)
                    }

                    val layoutParams = LinearLayout.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.WRAP_CONTENT
                    )
                    layoutParams.gravity = Gravity.CENTER_VERTICAL
                    subtitleView.layoutParams = layoutParams
                    return subtitleView
                }
            })
    ```
  </Tab>
</Tabs>

***

#### 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.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatOutgoingCall.setAvatarView((context, call) -> {
                
        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatOutgoingCall.setAvatarView(object : Function3<Context?, Call?, View?> {
                override fun apply(context: Context?, call: Call?): View? {
                 
                }
            })
    ```
  </Tab>
</Tabs>

Example:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/skyYyiTRS367pk0g/images/8d7cb75f-outgoing_call_avatar_view-e10a7fa5b1aadf63858f836108b11776.png?fit=max&auto=format&n=skyYyiTRS367pk0g&q=85&s=4fe9fce79cf294ec33749b9e0cae0802" width="1280" height="800" data-path="images/8d7cb75f-outgoing_call_avatar_view-e10a7fa5b1aadf63858f836108b11776.png" />
</Frame>

```xml custom_avatar_view.xml theme={null}
<?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>
```

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    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;
                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}

    cometchatOutgoingCall.setAvatarView(object : Function2<Context?, Call?, View?> {
            override fun apply(context: Context?, call: Call?): View? {
                    val avatarView: View = LayoutInflater.from(context).inflate(R.layout.custom_avatar_view, null)
                    val avatar = avatarView.findViewById<CometChatAvatar>(R.id.avatar)
                    val user = call?.receiver as User
                    avatar.setAvatar(user.uid, user.avatar)

                    val layoutParams = LinearLayout.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.WRAP_CONTENT
                    )
                    layoutParams.gravity = Gravity.CENTER_VERTICAL
                    avatarView.layoutParams = layoutParams
                    return avatarView
                }
            })
    ```
  </Tab>
</Tabs>

***

#### 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).

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatOutgoingCall.setEndCallView((context, call) -> {
                
        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatOutgoingCall.setEndCallView(object : Function3<Context?, Call?, View?> {
                override fun apply(context: Context?, call: Call?): View? {
                 
                }
            })
    ```
  </Tab>
</Tabs>

Example:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/rr55t_hLoswcBCG0/images/04c02293-outgoing_call_cancel_button_view-8a8ca9780eea5fbc9c07e4ca6da8e28c.png?fit=max&auto=format&n=rr55t_hLoswcBCG0&q=85&s=02491d6eee6788e3fde17f2e6d72e612" width="1280" height="800" data-path="images/04c02293-outgoing_call_cancel_button_view-8a8ca9780eea5fbc9c07e4ca6da8e28c.png" />
</Frame>

```xml end_call_button.xml theme={null}
<?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>
```

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    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;
                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}

    cometchatOutgoingCall.setEndCallView(object : Function2<Context?, Call?, View?> {
                override fun apply(context: Context?, call: Call?): View? {
                    val endCallButtonView: View = LayoutInflater.from(context).inflate(R.layout.end_call_button, null)

                    endCallButtonView.setOnClickListener { Toast.makeText(context, "End call clicked", Toast.LENGTH_SHORT).show() }
                    val layoutParams = LinearLayout.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.WRAP_CONTENT
                    )
                    layoutParams.bottomMargin = Utils.convertDpToPx(context, 40)
                    endCallButtonView.layoutParams = layoutParams
                    return endCallButtonView
                }
            })
    ```
  </Tab>
</Tabs>

***