Call Log Details

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

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, 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 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.

Kotlin (XML Views)

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.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:

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

Jetpack Compose

CallsScreen.kt

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

2. Load CallsFragment in HomeActivity

Display the Calls tab via bottom navigation.

Kotlin (XML Views)

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
}

Jetpack Compose

HomeScreen.kt

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

3. Configure CallDetailsActivity

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

Kotlin (XML Views)

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

Jetpack Compose

CallDetailsScreen.kt

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

4. Implement CometChatCallLogDetails Component

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

Kotlin (XML Views)

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

Jetpack Compose

import com.cometchat.uikit.compose.presentation.calls.calllogdetails.CometChatCallLogDetails

@Composable
fun CallLogDetailsScreen(callLog: CallLog) {
    CometChatCallLogDetails(callLog = callLog)
}

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

Android Sample App (Kotlin)

Explore this feature in the CometChat SampleApp: GitHub → SampleApp