> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Log Details

> Build a call log details screen showing metadata, participants, join/leave history, and recordings.

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                                                       |
  | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
  | Packages       | `com.cometchat:chatuikit-kotlin` · `com.cometchat:chatuikit-jetpack`                                                                        |
  | Key components | `CometChatCallLogs`, `CometChatCallLogDetails`, `CallDetailsActivity`, `CallDetailsViewModel`                                               |
  | Purpose        | Build a call log details screen showing metadata, participants, join/leave history, and recordings.                                         |
  | Related        | [Call Logs](/ui-kit/android/v6/call-logs), [Call Buttons](/ui-kit/android/v6/call-buttons), [All Guides](/ui-kit/android/v6/guide-overview) |
</Accordion>

Build a detailed Call Log Details screen in your Android app using CometChat's UI Kit and Calls SDK, displaying metadata, participants, join/leave history, and recordings for full transparency and auditing.

## Overview

When a user taps a call entry, the Call Details screen shows:

* **Metadata:** Call type, duration, timestamp, and status.
* **Participants:** List of users who joined the call.
* **History:** Chronological join/leave events.
* **Recordings:** Playback links for any recorded calls.

This feature is essential for support, moderation, and post-call reviews.

## Prerequisites

* Android Studio project targeting API 24+.
* **CometChat Android UI Kit v5** (`com.cometchat:chatuikit-kotlin` or `com.cometchat:chatuikit-jetpack`) and **CometChat Calls SDK** added in `build.gradle`.
* A logged-in CometChat user (`CometChat.getLoggedInUser()` non-null).
* Required permissions in `AndroidManifest.xml`: Internet, Camera, Microphone.
* ViewBinding enabled or equivalent view setup.

## Components

| Component / Class               | Role                                                                        |
| :------------------------------ | :-------------------------------------------------------------------------- |
| `CallsFragment`                 | Displays the list of recent calls using `CometChatCallLogs` component.      |
| `HomeActivity`                  | Hosts bottom navigation; loads `CallsFragment` for the Calls tab.           |
| `CallDetailsActivity`           | Container for the call details UI with tab navigation.                      |
| `CallDetailsTabFragmentAdapter` | Adapter for `ViewPager2` managing detail tabs.                              |
| `CometChatCallLogDetails`       | UI Kit widget that renders metadata, participants, history, and recordings. |
| `CallDetailsViewModel`          | ViewModel fetching call data and exposing it via StateFlow.                 |

## Integration Steps

### 1. Show Call Logs Using `CometChatCallLogs`

Use the UI Kit's `CometChatCallLogs` component to display recent calls.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml fragment_calls.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="match_parent"
        android:orientation="vertical">

        <com.cometchat.uikit.kotlin.presentation.calls.calllogs.CometChatCallLogs
            android:id="@+id/call_logs"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>
    ```

    Handle call log item clicks to navigate to the details screen:

    ```kotlin CallsFragment.kt lines theme={null}
    // CallsFragment.kt
    val callLogs = view.findViewById<CometChatCallLogs>(R.id.call_logs)
    callLogs.setOnItemClick { _, _, callLog ->
        val intent = Intent(activity, CallDetailsActivity::class.java)
        intent.putExtra("callLog", Gson().toJson(callLog))
        intent.putExtra("initiator", Gson().toJson(callLog.initiator))
        intent.putExtra("receiver", Gson().toJson(callLog.receiver))
        startActivity(intent)
    }
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin CallsScreen.kt lines theme={null}
    // CallsScreen.kt
    import com.cometchat.uikit.compose.presentation.calls.calllogs.CometChatCallLogs

    @Composable
    fun CallsScreen(navController: NavController) {
        CometChatCallLogs(
            onItemClick = { callLog ->
                navController.navigate("call_details/${Gson().toJson(callLog)}")
            }
        )
    }
    ```
  </Tab>
</Tabs>

### 2. Load `CallsFragment` in `HomeActivity`

Display the Calls tab via bottom navigation.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```kotlin HomeActivity.kt lines theme={null}
    // HomeActivity.kt
    bottomNav.setOnItemSelectedListener { item ->
        val frag = if (item.itemId == R.id.nav_calls)
            CallsFragment()
        else
            MessagesFragment()
        supportFragmentManager
            .beginTransaction()
            .replace(R.id.container, frag)
            .commit()
        true
    }
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin HomeScreen.kt lines theme={null}
    // HomeScreen.kt
    @Composable
    fun HomeScreen(navController: NavController) {
        var selectedTab by remember { mutableIntStateOf(0) }

        Scaffold(
            bottomBar = {
                NavigationBar {
                    NavigationBarItem(
                        selected = selectedTab == 0,
                        onClick = { selectedTab = 0 },
                        icon = { Icon(Icons.Default.Chat, "Chats") },
                        label = { Text("Chats") }
                    )
                    NavigationBarItem(
                        selected = selectedTab == 1,
                        onClick = { selectedTab = 1 },
                        icon = { Icon(Icons.Default.Call, "Calls") },
                        label = { Text("Calls") }
                    )
                }
            }
        ) { padding ->
            when (selectedTab) {
                0 -> ConversationScreen(navController, Modifier.padding(padding))
                1 -> CallsScreen(navController)
            }
        }
    }
    ```
  </Tab>
</Tabs>

### 3. Configure `CallDetailsActivity`

Initialize the detail screen with tabs for metadata, participants, history, and recordings.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```kotlin CallDetailsActivity.kt lines theme={null}
    // CallDetailsActivity.kt
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityCallDetailsBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val callLog = Gson().fromJson(
            intent.getStringExtra("callLog"), CallLog::class.java
        )
        viewModel = ViewModelProvider(this)[CallDetailsViewModel::class.java]
        viewModel.setCallLog(callLog)

        // Setup ViewPager2 & TabLayout
        binding.viewPager.adapter = CallDetailsTabFragmentAdapter(this, callLog)
        TabLayoutMediator(binding.tabs, binding.viewPager) { tab, pos ->
            tab.text = when (pos) {
                0 -> "Participants"
                1 -> "History"
                else -> "Recordings"
            }
        }.attach()
    }
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin CallDetailsScreen.kt lines theme={null}
    // CallDetailsScreen.kt
    @Composable
    fun CallDetailsScreen(callLogJson: String) {
        val callLog = remember { Gson().fromJson(callLogJson, CallLog::class.java) }
        var selectedTab by remember { mutableIntStateOf(0) }
        val tabs = listOf("Participants", "History", "Recordings")

        Column {
            TabRow(selectedTabIndex = selectedTab) {
                tabs.forEachIndexed { index, title ->
                    Tab(
                        selected = selectedTab == index,
                        onClick = { selectedTab = index },
                        text = { Text(title) }
                    )
                }
            }

            when (selectedTab) {
                0 -> ParticipantsTab(callLog)
                1 -> HistoryTab(callLog)
                2 -> RecordingsTab(callLog)
            }
        }
    }
    ```
  </Tab>
</Tabs>

### 4. Implement `CometChatCallLogDetails` Component

Use the UI Kit widget for an all-in-one detail view.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```kotlin lines theme={null}
    val detailsView = CometChatCallLogDetails(this)
    detailsView.setCall(callLog)
    setContentView(detailsView)
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    import com.cometchat.uikit.compose.presentation.calls.calllogdetails.CometChatCallLogDetails

    @Composable
    fun CallLogDetailsScreen(callLog: CallLog) {
        CometChatCallLogDetails(callLog = callLog)
    }
    ```
  </Tab>
</Tabs>

## Implementation Flow

1. **CallsFragment** fetches and displays call logs list.
2. User taps a call → navigates to **CallDetailsActivity** / **CallDetailsScreen** with call data.
3. Detail screen initializes ViewModel, ViewPager2/TabRow, and TabLayout.
4. Tab fragments/composables render participants, join/leave history, and recordings.
5. **CometChatCallLogDetails** can be used as a single-widget alternative.

## Customization Options

* Style tabs and headers via `CometChatTheme` or custom attributes.
* Override individual fragments/composables for additional data (e.g., call notes).
* Control visibility of tabs based on call type or recording availability.

## Filtering & Edge Cases

* **Missed Calls:** Use `CallsRequestBuilder().setTypes(CallType.MISSED)` to filter.
* **No Recordings:** Hide or disable the Recordings tab.
* **Blocked Users:** Disable profile links in Participants tab.

## Error Handling

* Observe `StateFlow<Throwable>` in `CallDetailsViewModel` to show retry UIs.
* Use `detailsView.setOnError()` and `setOnEmpty()` for fallback views in UI Kit widget.

## Summary / Feature Matrix

| Feature                      | Component / Method                                    |
| :--------------------------- | :---------------------------------------------------- |
| Display call logs list       | `CometChatCallLogs` in **CallsFragment**              |
| Navigate to detail screen    | Intent / Compose navigation + **CallDetailsActivity** |
| Render detail tabs           | **CallDetailsTabFragmentAdapter** / Compose `TabRow`  |
| Single-widget detail view    | **CometChatCallLogDetails**                           |
| Theming & styling            | `CometChatTheme`, custom styles                       |
| Error & empty-state handling | `setOnError()`, `setOnEmpty()`                        |

<CardGroup>
  <Card title="Android Sample App (Kotlin)">
    Explore this feature in the CometChat SampleApp:
    [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-android/tree/v6/sample-app-kotlin)
  </Card>
</CardGroup>