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.

// 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

2. Load CallsFragment in HomeActivity

Display the Calls tab via bottom navigation.

// 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

3. Configure CallDetailsActivity

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

// 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

4. Implement CometChatCallLogDetails Component

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

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()

Android Sample App (Java)

Explore this feature in the CometChat SampleApp: GitHub → SampleApp

Android Sample App (Kotlin)

Explore this feature in the CometChat SampleApp: GitHub → SampleApp