> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Outgoing Call

> Display CometChat Android UI Kit outgoing call screens with recipient details, cancel actions, custom sounds, and outgoing call callbacks.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatOutgoingCall",
    "package": "com.cometchat.chatuikit.calls.outgoingcall",
    "xmlElement": "<com.cometchat.chatuikit.calls.outgoingcall.CometChatOutgoingCall />",
    "description": "Full-screen outgoing call UI with recipient avatar, name, call status, and end-call button.",
    "primaryOutput": {
      "method": "setOnEndCallClick",
      "type": "OnClick"
    },
    "methods": {
      "data": {
        "setCall": {
          "type": "Call",
          "note": "Sets the call object and extracts the receiver User automatically"
        },
        "setUser": {
          "type": "User",
          "note": "Sets the user directly (uid, name, avatar required)"
        }
      },
      "callbacks": {
        "setOnEndCallClick": "OnClick",
        "setOnError": "OnError"
      },
      "functionality": {
        "disableSoundForCall": { "type": "boolean", "default": "false" },
        "setCustomSoundForCalls": { "type": "@RawRes int", "default": "SDK default" }
      },
      "viewSlots": {
        "setTitleView": "Function2<Context, Call, View> — title text area",
        "setSubtitleView": "Function2<Context, Call, View> — subtitle text area",
        "setAvatarView": "Function2<Context, Call, View> — avatar / profile picture area",
        "setEndCallView": "Function2<Context, Call, View> — end-call button area"
      },
      "advanced": {
        "setCallSettingsBuilder": "CometChatCalls.CallSettingsBuilder — ongoing call configuration",
        "getViewModel": "OutgoingViewModel — internal ViewModel access"
      },
      "style": {
        "setStyle": {
          "type": "@StyleRes int",
          "parent": "CometChatOutgoingCallStyle"
        }
      }
    },
    "events": [
      {
        "name": "CometChatCallEvents.ccCallAccepted",
        "payload": "Call",
        "description": "Outgoing call was accepted by the receiver"
      },
      {
        "name": "CometChatCallEvents.ccCallRejected",
        "payload": "Call",
        "description": "Outgoing call was rejected by the receiver"
      }
    ],
    "sdkListeners": [
      "onOutgoingCallAccepted",
      "onOutgoingCallRejected"
    ]
  }
  ```
</Accordion>

## Where It Fits

`CometChatOutgoingCall` is a call-initiation component. It renders the outgoing call screen and transitions to the ongoing call screen when the receiver accepts. Wire it to `CometChatCallEvents` to handle call-accepted and call-rejected transitions.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin CallActivity.kt lines theme={null}
    class CallActivity : AppCompatActivity() {

        private lateinit var outgoingCall: CometChatOutgoingCall

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

            outgoingCall = findViewById(R.id.outgoing_call)
            outgoingCall.setCall(call) // pass the Call object from CometChat SDK
        }
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java CallActivity.java lines theme={null}
    public class CallActivity extends AppCompatActivity {

        private CometChatOutgoingCall outgoingCall;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_call);

            outgoingCall = findViewById(R.id.outgoing_call);
            outgoingCall.setCall(call); // pass the Call object from CometChat SDK
        }
    }
    ```
  </Tab>
</Tabs>

## Quick Start

Add the component to your layout XML:

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2JiXkJ8lq6PmPGlJ/images/703120eb-outgoing_call-c24eb1936c04bb40ea873ac19b973b56.png?fit=max&auto=format&n=2JiXkJ8lq6PmPGlJ&q=85&s=fc41a9e26489f6706d5933679236d06b" width="1440" height="833" data-path="images/703120eb-outgoing_call-c24eb1936c04bb40ea873ac19b973b56.png" />
</Frame>

Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the `cometchat-chat-uikit-android` dependency added.

To add programmatically in an Activity:

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

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

        cometchatOutgoingCall = CometChatOutgoingCall(this)
        cometchatOutgoingCall.setCall(call) // Required — set the Call object
        setContentView(cometchatOutgoingCall)
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    CometChatOutgoingCall cometchatOutgoingCall;

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

        cometchatOutgoingCall = new CometChatOutgoingCall(this);
        cometchatOutgoingCall.setCall(call); // Required — set the Call object
        setContentView(cometchatOutgoingCall);
    }
    ```
  </Tab>
</Tabs>

Or in a Fragment:

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

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        cometchatOutgoingCall = CometChatOutgoingCall(requireContext())
        cometchatOutgoingCall.setCall(call) // Required — set the Call object
        return cometchatOutgoingCall
    }
    ```
  </Tab>

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

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        cometchatOutgoingCall = new CometChatOutgoingCall(requireContext());
        cometchatOutgoingCall.setCall(call); // Required — set the Call object
        return cometchatOutgoingCall;
    }
    ```
  </Tab>
</Tabs>

## Actions and Events

### Callback Methods

#### `setOnEndCallClick`

Fires when the end-call button is tapped. Default: cancels the outgoing call via the SDK.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines theme={null}
    cometchatOutgoingCall.setOnEndCallClick(OnClick {
        // Your custom end-call logic
    })
    ```
  </Tab>

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    cometchatOutgoingCall.setOnEndCallClick(new OnClick() {
        @Override
        public void onClick() {
            // Your custom end-call logic
        }
    });
    ```
  </Tab>
</Tabs>

> **What this does:** Replaces the default end-call button behavior. When the user taps the end-call button, your custom `OnClick` lambda executes instead of the built-in call cancellation.

#### `setOnError`

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

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

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

> **What this does:** Registers an error callback on the `CometChatOutgoingCall` instance. When an error occurs within the component, the `onError` method is invoked with the `CometChatException` containing error details.

* **Verify**: After setting an action callback, trigger the corresponding user interaction (tap end-call, cause an error) and confirm your custom logic executes instead of the default behavior.

### Global UI Events (CometChatCallEvents)

`CometChatCallEvents` emits events subscribable from anywhere in the application. Add a listener and remove it when no longer needed.

| Event            | Fires when                                    | Payload |
| ---------------- | --------------------------------------------- | ------- |
| `ccCallAccepted` | The outgoing call is accepted by the receiver | `Call`  |
| `ccCallRejected` | The outgoing call is rejected by the receiver | `Call`  |

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

        override fun ccCallRejected(call: Call) {
            super.ccCallRejected(call)
        }
    })
    ```

    Remove Listener

    ```
    CometChatCallEvents.removeListener("LISTENER_TAG")
    ```
  </Tab>

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

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

    Remove Listener

    ```
    CometChatCallEvents.removeListener("LISTENER_TAG");
    ```
  </Tab>
</Tabs>

### SDK Events

The component listens to SDK call events internally. No manual attachment needed unless additional side effects are required.

| SDK Listener             | Internal behavior                                       |
| ------------------------ | ------------------------------------------------------- |
| `onOutgoingCallAccepted` | Transitions to the ongoing call screen                  |
| `onOutgoingCallRejected` | Finishes the activity or invokes the back-press handler |

## Functionality

Small functional customizations for sound and call behavior.

| Method                   | Description                                                 | Code                                              |
| ------------------------ | ----------------------------------------------------------- | ------------------------------------------------- |
| `disableSoundForCall`    | Enables or disables the outgoing call ringtone              | `.disableSoundForCall(true);`                     |
| `setCustomSoundForCalls` | Sets a custom sound resource for the outgoing call ringtone | `.setCustomSoundForCalls(R.raw.custom_ringtone);` |

* **Verify**: After calling `disableSoundForCall(true)`, initiate an outgoing call and confirm no ringtone plays.

## Custom View Slots

Each slot replaces a section of the default UI. All view slots accept a `Function2<Context, Call, View>` that receives the current context and `Call` object and returns a custom `View`.

| Slot          | Method                                            | Replaces                           |
| ------------- | ------------------------------------------------- | ---------------------------------- |
| Title view    | `setTitleView(Function2<Context, Call, View>)`    | Name / title text                  |
| Subtitle view | `setSubtitleView(Function2<Context, Call, View>)` | Subtitle text (e.g., "Calling...") |
| Avatar view   | `setAvatarView(Function2<Context, Call, View>)`   | Avatar / profile picture area      |
| End-call view | `setEndCallView(Function2<Context, Call, View>)`  | End-call button                    |

### `setTitleView`

Replace the name / title text area.

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

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

> **What this does:** Registers a callback that receives the `Context` and `Call` object and returns a custom `View` to replace the default title area on the outgoing call screen.

Example with sender and receiver names:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/7e3e0d88-outgoing_call_title_view-0fd6e88ca01f03ba95560faa430c4a44.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=c5b37ac484932734bb4192cc84147448" width="1280" height="800" data-path="images/7e3e0d88-outgoing_call_title_view-0fd6e88ca01f03ba95560faa430c4a44.png" />
</Frame>

Create a `custom_title_view.xml` layout:

```xml custom_title_view.xml lines 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/title_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="Kotlin">
    ```kotlin YourActivity.kt lines 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>

  <Tab title="Java">
    ```java YourActivity.java lines 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>
</Tabs>

> **What this does:** Inflates the `custom_title_view` layout, retrieves the call receiver's name and the sender's UID, and sets the title text to display them separated by `" <> "`.

### `setSubtitleView`

Replace the subtitle text below the title.

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

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

> **What this does:** Registers a callback that receives the `Context` and `Call` object and returns a custom `View` to replace the default subtitle area on the outgoing call screen.

Example with call-type icon and "Calling...." text:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/7e3e0d88-outgoing_call_title_view-0fd6e88ca01f03ba95560faa430c4a44.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=c5b37ac484932734bb4192cc84147448" width="1280" height="800" data-path="images/7e3e0d88-outgoing_call_title_view-0fd6e88ca01f03ba95560faa430c4a44.png" />
</Frame>

Create a `custom_subtitle_view.xml` layout:

```xml custom_subtitle_view.xml lines 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>
```

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines 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_subtitle_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>

  <Tab title="Java">
    ```java YourActivity.java lines 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>
</Tabs>

> **What this does:** Inflates the `custom_subtitle_view` layout, sets the subtitle text to "Calling....", and displays a voice call icon if the call type is `CALL_TYPE_AUDIO`, or a video call icon otherwise.

### `setAvatarView`

Replace the avatar / profile picture area.

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

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

> **What this does:** Registers a callback that receives the `Context` and `Call` object and returns a custom `View` to replace the default avatar area on the outgoing call screen.

Example with admin badge:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ubfBSdV1t6rmjxeA/images/8d7cb75f-outgoing_call_avatar_view-e10a7fa5b1aadf63858f836108b11776.png?fit=max&auto=format&n=ubfBSdV1t6rmjxeA&q=85&s=75ab686f7314d40b86fac3181d2a2e3a" width="1280" height="800" data-path="images/8d7cb75f-outgoing_call_avatar_view-e10a7fa5b1aadf63858f836108b11776.png" />
</Frame>

Create a `custom_avatar_view.xml` layout:

```xml custom_avatar_view.xml lines 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="Kotlin">
    ```kotlin YourActivity.kt lines 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>

  <Tab title="Java">
    ```java YourActivity.java lines 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>
</Tabs>

> **What this does:** Inflates the `custom_avatar_view` layout, retrieves the call receiver's UID and avatar URL, sets them on the `CometChatAvatar` widget, and applies centered layout params.

### `setEndCallView`

Replace the end-call button.

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

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

> **What this does:** Registers a callback that receives the `Context` and `Call` object and returns a custom `View` to replace the default end-call button on the outgoing call screen.

Example with custom end-call card:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7a4hqm7gLVRmX34O/images/04c02293-outgoing_call_cancel_button_view-8a8ca9780eea5fbc9c07e4ca6da8e28c.png?fit=max&auto=format&n=7a4hqm7gLVRmX34O&q=85&s=863a283fdfe46a78415072f8a7d30434" width="1280" height="800" data-path="images/04c02293-outgoing_call_cancel_button_view-8a8ca9780eea5fbc9c07e4ca6da8e28c.png" />
</Frame>

Create an `end_call_button.xml` layout:

```xml end_call_button.xml lines 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="Kotlin">
    ```kotlin YourActivity.kt lines 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>

  <Tab title="Java">
    ```java YourActivity.java lines 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>
</Tabs>

> **What this does:** Inflates the `end_call_button` layout, attaches a click listener that shows a toast message "End call clicked", sets a 40dp bottom margin, and returns the custom end-call button view.

* **Verify**: After setting any custom view slot, confirm the custom view renders in the correct position on the outgoing call screen and that the data binding populates correctly.

## Common Patterns

### Silent outgoing call

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatOutgoingCall.disableSoundForCall(true)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatOutgoingCall.disableSoundForCall(true);
    ```
  </Tab>
</Tabs>

### Custom ringtone

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatOutgoingCall.setCustomSoundForCalls(R.raw.custom_ringtone)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatOutgoingCall.setCustomSoundForCalls(R.raw.custom_ringtone);
    ```
  </Tab>
</Tabs>

### Custom call settings for ongoing call

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    val callSettingsBuilder = CometChatCalls.CallSettingsBuilder(this, true)
        .setDefaultAudioMode("SPEAKER")
    cometchatOutgoingCall.setCallSettingsBuilder(callSettingsBuilder)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    CometChatCalls.CallSettingsBuilder callSettingsBuilder = new CometChatCalls.CallSettingsBuilder(this, true)
        .setDefaultAudioMode("SPEAKER");
    cometchatOutgoingCall.setCallSettingsBuilder(callSettingsBuilder);
    ```
  </Tab>
</Tabs>

### Handle end-call with custom navigation

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatOutgoingCall.setOnEndCallClick(OnClick {
        finish() // navigate back instead of default SDK rejection
    })
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatOutgoingCall.setOnEndCallClick(() -> {
        finish(); // navigate back instead of default SDK rejection
    });
    ```
  </Tab>
</Tabs>

## Advanced Methods

### `setCall`

Sets the call object and extracts the receiver `User` automatically. Use this when you have a `Call` object from the SDK.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatOutgoingCall.setCall(call)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatOutgoingCall.setCall(call);
    ```
  </Tab>
</Tabs>

> `setCall` internally extracts the receiver from the `Call` object and calls `setUser` with it. The component then displays the receiver's name and avatar.

### `setUser`

Sets the user directly when you don't have a `Call` object. The `uid`, `name`, and `avatar` fields are required.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatOutgoingCall.setUser(user)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatOutgoingCall.setUser(user);
    ```
  </Tab>
</Tabs>

### `setCallSettingsBuilder`

Configures the ongoing call settings (audio mode, video settings, etc.) that apply once the call is accepted.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    val callSettingsBuilder = CometChatCalls.CallSettingsBuilder(this, true)
        .setIsAudioOnly(true)
    cometChatOutgoingCall.setCallSettingsBuilder(callSettingsBuilder)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    CometChatCalls.CallSettingsBuilder callSettingsBuilder = new CometChatCalls.CallSettingsBuilder(this, true)
        .setIsAudioOnly(true);
    cometChatOutgoingCall.setCallSettingsBuilder(callSettingsBuilder);
    ```
  </Tab>
</Tabs>

### `setCustomSoundForCalls`

Sets a custom ringtone sound that plays while the outgoing call is ringing.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatOutgoingCall.setCustomSoundForCalls(R.raw.custom_ringtone)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatOutgoingCall.setCustomSoundForCalls(R.raw.custom_ringtone);
    ```
  </Tab>
</Tabs>

### `disposeObservers`

Removes lifecycle observers manually. Normally handled automatically when the view detaches from the window.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatOutgoingCall.disposeObservers()
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatOutgoingCall.disposeObservers();
    ```
  </Tab>
</Tabs>

### Internal Access

| Method           | Returns             | Description                                         |
| ---------------- | ------------------- | --------------------------------------------------- |
| `getViewModel()` | `OutgoingViewModel` | The ViewModel managing call state and SDK listeners |

> Use this only when the standard API is insufficient. Directly manipulating the ViewModel may conflict with the component's internal state management.

## Style

The component uses XML theme styles. Define a custom style with parent `CometChatOutgoingCallStyle` in `themes.xml`, then apply with `setStyle()`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/k0f_g7UwNe_JINeP/images/430add9e-outgoing_call_styling-4478d162278403121a8f89d481625c9e.png?fit=max&auto=format&n=k0f_g7UwNe_JINeP&q=85&s=54d3565dce96adb0eaa790ba9f081059" width="1280" height="800" data-path="images/430add9e-outgoing_call_styling-4478d162278403121a8f89d481625c9e.png" />
</Frame>

```xml themes.xml lines 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="Kotlin">
    ```kotlin lines theme={null}
    cometChatOutgoingCall.setStyle(R.style.CustomOutgoingCall)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines 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).

### Programmatic Style Properties

In addition to XML theme styles, the component exposes programmatic setters for fine-grained control:

| Method                            | Type             | Description                              |
| --------------------------------- | ---------------- | ---------------------------------------- |
| `setBackgroundColor`              | `@ColorInt int`  | Background color of the component        |
| `setTitleTextColor`               | `@ColorInt int`  | Title text color                         |
| `setTitleTextAppearance`          | `@StyleRes int`  | Title text appearance                    |
| `setSubtitleTextColor`            | `@ColorInt int`  | Subtitle text color                      |
| `setSubtitleTextAppearance`       | `@StyleRes int`  | Subtitle text appearance                 |
| `setEndCallIcon`                  | `Drawable`       | Custom end-call button icon              |
| `setEndCallIconTint`              | `@ColorInt int`  | Tint color for the end-call icon         |
| `setEndCallButtonBackgroundColor` | `@ColorInt int`  | Background color for the end-call button |
| `setAvatarStyle`                  | `@StyleRes int`  | Style for the avatar                     |
| `setCornerRadius`                 | `@Dimension int` | Corner radius of the component           |
| `setStrokeWidth`                  | `@Dimension int` | Stroke width of the component border     |
| `setStrokeColor`                  | `@ColorInt int`  | Stroke color of the component border     |

## Customization Matrix

| What to change                           | Where             | Property/API                                                         | Example                                                       |
| ---------------------------------------- | ----------------- | -------------------------------------------------------------------- | ------------------------------------------------------------- |
| Set the call object                      | Activity/Fragment | `setCall(Call)`                                                      | `.setCall(call)`                                              |
| Set the user directly                    | Activity/Fragment | `setUser(User)`                                                      | `.setUser(user)`                                              |
| Override end-call behavior               | Activity/Fragment | `setOnEndCallClick(OnClick)`                                         | See `setOnEndCallClick` code above                            |
| Handle errors                            | Activity/Fragment | `setOnError(OnError)`                                                | See `setOnError` code above                                   |
| Disable outgoing call sound              | Activity/Fragment | `disableSoundForCall(boolean)`                                       | `.disableSoundForCall(true);`                                 |
| Set custom outgoing call sound           | Activity/Fragment | `setCustomSoundForCalls(@RawRes int)`                                | `.setCustomSoundForCalls(R.raw.custom_ringtone);`             |
| Configure ongoing call settings          | Activity/Fragment | `setCallSettingsBuilder(CallSettingsBuilder)`                        | `.setCallSettingsBuilder(builder)`                            |
| Title view                               | Activity/Fragment | `setTitleView(Function2)`                                            | See `setTitleView` code above                                 |
| Subtitle view                            | Activity/Fragment | `setSubtitleView(Function2)`                                         | See `setSubtitleView` code above                              |
| Avatar view                              | Activity/Fragment | `setAvatarView(Function2)`                                           | See `setAvatarView` code above                                |
| End-call button view                     | Activity/Fragment | `setEndCallView(Function2)`                                          | See `setEndCallView` code above                               |
| Avatar style (corner radius, background) | `themes.xml`      | `CometChatOutgoingCallStyle` with `cometchatOutgoingCallAvatarStyle` | `<item name="cometchatAvatarStrokeRadius">8dp</item>`         |
| Apply a custom style                     | Activity/Fragment | `setStyle(@StyleRes int)`                                            | `cometChatOutgoingCall.setStyle(R.style.CustomOutgoingCall);` |
| Title text color                         | Activity/Fragment | `setTitleTextColor(@ColorInt int)`                                   | `.setTitleTextColor(Color.WHITE);`                            |
| Subtitle text color                      | Activity/Fragment | `setSubtitleTextColor(@ColorInt int)`                                | `.setSubtitleTextColor(Color.GRAY);`                          |
| End-call icon                            | Activity/Fragment | `setEndCallIcon(Drawable)`                                           | `.setEndCallIcon(drawable);`                                  |
| End-call icon tint                       | Activity/Fragment | `setEndCallIconTint(@ColorInt int)`                                  | `.setEndCallIconTint(Color.WHITE);`                           |
| End-call button background               | Activity/Fragment | `setEndCallButtonBackgroundColor(@ColorInt int)`                     | `.setEndCallButtonBackgroundColor(Color.RED);`                |
| Background color                         | Activity/Fragment | `setBackgroundColor(@ColorInt int)`                                  | `.setBackgroundColor(Color.BLACK);`                           |
| Corner radius                            | Activity/Fragment | `setCornerRadius(@Dimension int)`                                    | `.setCornerRadius(16);`                                       |
| Stroke width                             | Activity/Fragment | `setStrokeWidth(@Dimension int)`                                     | `.setStrokeWidth(2);`                                         |
| Stroke color                             | Activity/Fragment | `setStrokeColor(@ColorInt int)`                                      | `.setStrokeColor(Color.GRAY);`                                |

## Next Steps

<CardGroup cols={2}>
  <Card title="Incoming Call" icon="phone-arrow-down-left" href="/ui-kit/android/incoming-call">
    Incoming call notification with accept/reject
  </Card>

  <Card title="Call Buttons" icon="phone" href="/ui-kit/android/call-buttons">
    Voice and video call initiation buttons
  </Card>

  <Card title="Call Logs" icon="clock-rotate-left" href="/ui-kit/android/call-logs">
    View call history
  </Card>

  <Card title="Conversations" icon="comments" href="/ui-kit/android/conversations">
    Browse recent conversations
  </Card>
</CardGroup>