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

# Call Log Details

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 21+.
* **CometChat Android UI Kit v5** 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 (sample uses `ActivityCallDetailsBinding`).

## Components

| Component / Class                    | Role                                                                        |
| :----------------------------------- | :-------------------------------------------------------------------------- |
| `CallsFragment`                      | Fetches and displays the list of recent calls using `CallsRequest`.         |
| `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 LiveData.                  |
| **Fragments:**                       |                                                                             |
| `CallDetailsTabParticipantsFragment` | Shows the participants list.                                                |
| `CallDetailsTabHistoryFragment`      | Shows join/leave history entries.                                           |
| `CallDetailsTabRecordingsFragment`   | Shows call recordings with playback actions.                                |

## Integration Steps

### 1. Show Call Logs in `CallsFragment`

Enable users to browse recent calls.

```java theme={null}
// CallsFragment.java
CallsRequest request = new CallsRequest.CallsRequestBuilder()
  .setLimit(50)
  .build();
request.fetchNext(
  new CometChat.CallbackListener<List<Call>>() {
    @Override
    public void onSuccess(List<Call> calls) {
      adapter.submitList(calls);
    }
    @Override
    public void onError(CometChatException e) {
      // handle error
    }
  }
);
```

**File reference:**\
[`CallsFragment.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample-app-java/src/main/java/com/cometchat/sampleapp/java/ui/fragments/CallsFragment.java)

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

Display the Calls tab via bottom navigation.

```java theme={null}
// HomeActivity.java
bottomNav.setOnItemSelectedListener(item -> {
  Fragment frag = item.getItemId() == R.id.nav_calls
    ? new CallsFragment()
    : new MessagesFragment();
  getSupportFragmentManager()
    .beginTransaction()
    .replace(R.id.container, frag)
    .commit();
  return true;
});
```

**File reference:**\
[`HomeActivity.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample-app-java/src/main/java/com/cometchat/sampleapp/java/ui/activity/HomeActivity.java)

### 3. Configure `CallDetailsActivity`

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

```java theme={null}
// CallDetailsActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  binding = ActivityCallDetailsBinding.inflate(getLayoutInflater());
  setContentView(binding.getRoot());

  Call callLog = new Gson().fromJson(
    getIntent().getStringExtra("CALL_LOG"), Call.class
  );
  viewModel = new ViewModelProvider(this)
    .get(CallDetailsViewModel.class);
  viewModel.setCallLog(callLog);

  // Setup ViewPager2 & TabLayout
  binding.viewPager.setAdapter(
    new CallDetailsTabFragmentAdapter(this, callLog)
  );
  new TabLayoutMediator(
    binding.tabs,
    binding.viewPager,
    (tab, pos) -> tab.setText(
      pos == 0 ? "Participants" :
      pos == 1 ? "History" : "Recordings"
    )
  ).attach();

  // Optionally use UI Kit widget directly:
  // CometChatCallLogDetails details = new CometChatCallLogDetails(this);
  // details.setCall(callLog);
  // setContentView(details);
}
```

**File reference:**\
[`CallDetailsActivity.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample-app-java/src/main/java/com/cometchat/sampleapp/java/ui/activity/CallDetailsActivity.java)

### 4. Implement `CometChatCallLogDetails` Component

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

```java theme={null}
CometChatCallLogDetails detailsView = new CometChatCallLogDetails(this);
detailsView.setCall(callLog);
setContentView(detailsView);
```

## Implementation Flow

1. **CallsFragment** fetches and displays call logs list.
2. User taps a call → **HomeActivity** navigates to **CallDetailsActivity** with call data.
3. **CallDetailsActivity** initializes **ViewModel**, **ViewPager2**, and **TabLayout**.
4. **Tab fragments** 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 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 `LiveData<Throwable>` in `CallDetailsViewModel` to show retry UIs.
* Use `detailsView.setOnError()` and `setOnEmpty()` for fallback views in UI Kit widget.

## Optional: 1-on-1 vs Group Calls

* **1-on-1 Calls:** Show only one participant entry and skip History tab.
* **Group Calls:** Display multiple participants and exhaustive history.

## Summary / Feature Matrix

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

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

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