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

# Call Buttons

> Voice and video call buttons that initiate calls for a given user or group.

`CometChatCallButtons` renders voice and video call buttons and initiates calls for the bound `User` or `Group`. Place it in a `CometChatMessageHeader` or anywhere a call action is needed.

***

## Where It Fits

`CometChatCallButtons` is a utility component. Wire it into a `CometChatMessageHeader` or place it standalone wherever a call action is needed.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml activity_chat.xml lines theme={null}
    <com.cometchat.uikit.kotlin.presentation.callbuttons.CometChatCallButtons
        android:id="@+id/call_buttons"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    ```

    ```kotlin lines theme={null}
    val callButtons = findViewById<CometChatCallButtons>(R.id.call_buttons)
    callButtons.setUser(user)
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatCallButtons(
        user = user
    )
    ```
  </Tab>
</Tabs>

***

## Quick Start

<Tabs>
  <Tab title="Kotlin (XML Views)">
    Add to your layout XML:

    ```xml lines theme={null}
    <com.cometchat.uikit.kotlin.presentation.callbuttons.CometChatCallButtons
        android:id="@+id/call_buttons"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    ```

    Set a `User` or `Group` — required before calls can be initiated:

    ```kotlin lines theme={null}
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.your_layout)

        val callButtons = findViewById<CometChatCallButtons>(R.id.call_buttons)
        callButtons.setUser(user)
        // or callButtons.setGroup(group)
    }
    ```

    Or programmatically:

    ```kotlin lines theme={null}
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val callButtons = CometChatCallButtons(this)
        callButtons.setUser(user)
        setContentView(callButtons)
    }
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    @Composable
    fun CallButtonsScreen() {
        CometChatCallButtons(
            user = user
            // or group = group
        )
    }
    ```
  </Tab>
</Tabs>

Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.

> You must call `setUser(User)` or `setGroup(Group)` before the buttons can initiate a call. Without a target, button clicks have no effect.

***

## Actions and Events

### Callback Methods

#### `onVoiceCallClick`

Fires when the voice call button is tapped. Replaces the default behavior of initiating an audio call.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```kotlin lines theme={null}
    callButtons.setOnVoiceCallClick { user, group ->
        // Custom voice call logic
    }
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatCallButtons(
        user = user,
        onVoiceCallClick = { u, g ->
            // Custom voice call logic
        }
    )
    ```
  </Tab>
</Tabs>

#### `onVideoCallClick`

Fires when the video call button is tapped. Replaces the default behavior of initiating a video call.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```kotlin lines theme={null}
    callButtons.setOnVideoCallClick { user, group ->
        // Custom video call logic
    }
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatCallButtons(
        user = user,
        onVideoCallClick = { u, g ->
            // Custom video call logic
        }
    )
    ```
  </Tab>
</Tabs>

#### `onError`

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

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```kotlin lines theme={null}
    callButtons.setOnError { exception ->
        Log.e("CallButtons", "Error: ${exception.message}")
    }
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatCallButtons(
        user = user,
        onError = { exception ->
            Log.e("CallButtons", "Error: ${exception.message}")
        }
    )
    ```
  </Tab>
</Tabs>

### Global UI Events (CometChatCallEvents)

| Event | Fires when | Payload |
| - | - | - |
| `ccOutgoingCall` | An outgoing call is initiated | `Call` |
| `ccCallAccepted` | A call is accepted by the recipient | `Call` |
| `ccCallRejected` | A call is rejected by the recipient | `Call` |
| `ccCallEnded` | A call is ended | `Call` |

***

## Functionality

| Method (Kotlin XML) | Compose Parameter | Description |
| - | - | - |
| `setUser(user)` | `user = user` | Set the user to call (required for 1-on-1) |
| `setGroup(group)` | `group = group` | Set the group to call (required for group calls) |
| `setOnVoiceCallClick { }` | `onVoiceCallClick = { }` | Override voice call button behavior |
| `setOnVideoCallClick { }` | `onVideoCallClick = { }` | Override video call button behavior |
| `setOnError { }` | `onError = { }` | Error callback |
| `setVoiceCallButtonVisibility(View.GONE)` | `hideVoiceCallButton = true` | Toggle voice call button |
| `setVideoCallButtonVisibility(View.GONE)` | `hideVideoCallButton = true` | Toggle video call button |

***

## Style

<Tabs>
  <Tab title="Kotlin (XML Views)">
    Define a custom style in `themes.xml`:

    ```xml themes.xml lines theme={null}
    <style name="CustomCallButtonsStyle" parent="CometChatCallButtonsStyle">
        <item name="cometchatCallButtonsVoiceCallIconTint">#4CAF50</item>
        <item name="cometchatCallButtonsVideoCallIconTint">#2196F3</item>
        <item name="cometchatCallButtonsVoiceCallBackgroundColor">#E8F5E9</item>
        <item name="cometchatCallButtonsVideoCallBackgroundColor">#E3F2FD</item>
    </style>
    ```

    ```kotlin lines theme={null}
    callButtons.setStyle(R.style.CustomCallButtonsStyle)
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatCallButtons(
        user = user,
        style = CometChatCallButtonsStyle.default().copy(
            voiceCallIconTint = Color(0xFF4CAF50),
            videoCallIconTint = Color(0xFF2196F3),
            voiceCallBackgroundColor = Color(0xFFE8F5E9),
            videoCallBackgroundColor = Color(0xFFE3F2FD)
        )
    )
    ```
  </Tab>
</Tabs>

See [Component Styling](/ui-kit/android/component-styling) for the full reference.

***

## ViewModel

```kotlin lines theme={null}
val viewModel = ViewModelProvider(this)
    .get(CometChatCallButtonsViewModel::class.java)
```

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```kotlin lines theme={null}
    callButtons.setViewModel(viewModel)
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatCallButtons(
        user = user,
        callButtonsViewModel = viewModel
    )
    ```
  </Tab>
</Tabs>

See [ViewModel & Data](/ui-kit/android/customization-viewmodel-data) for state observation and custom repositories.

***

## Next Steps

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

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

  <Card title="Outgoing Call" icon="phone-arrow-up-right" href="/ui-kit/android/outgoing-call">
    Outgoing call screen with end-call button
  </Card>

  <Card title="Message Header" icon="heading" href="/ui-kit/android/message-header">
    Display user/group info in the toolbar
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.