Call Log Details

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

AI Agent Component Spec

Field	Value
Package	com.cometchat:chat-uikit-android
Key components	CometChatCallLogs, CometChatCallLogDetails, CallDetailsActivity, CallDetailsViewModel
Purpose	Build a call log details screen showing metadata, participants, join/leave history, and recordings.
Related	Call Logs, Call Buttons, All Guides

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	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 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 Using CometChatCallLogs

Use the UI Kit’s CometChatCallLogs component to display recent calls. Add it to your fragment layout:

fragment_calls.xml

<?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.chatuikit.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

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

Java

CallsFragment.java

// CallsFragment.java
CometChatCallLogs callLogs = view.findViewById(R.id.call_logs);
callLogs.setOnItemClick((view1, position, callLog) -> {
    Intent intent = new Intent(getActivity(), CallDetailsActivity.class);
    intent.putExtra("callLog", new Gson().toJson(callLog));
    intent.putExtra("initiator", new Gson().toJson(callLog.getInitiator()));
    intent.putExtra("receiver", new Gson().toJson(callLog.getReceiver()));
    startActivity(intent);
});

2. Load CallsFragment in HomeActivity

Display the Calls tab via bottom navigation.

Kotlin

HomeActivity.kt

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

Java

HomeActivity.java

// 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;
});

3. Configure CallDetailsActivity

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

Kotlin

CallDetailsActivity.kt

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

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

Java

CallDetailsActivity.java

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

  CallLog callLog = new Gson().fromJson(
    getIntent().getStringExtra("callLog"), CallLog.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);
}

4. Implement CometChatCallLogDetails Component

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

Kotlin

val detailsView = CometChatCallLogDetails(this)
detailsView.setCall(callLog)
setContentView(detailsView)

Java

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