> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Call Log Details > Show CometChat Android UI Kit call log details with call history, participants, recordings, tabbed views, and Calls SDK integration. | 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](/ui-kit/android/call-logs), [Call Buttons](/ui-kit/android/call-buttons), [All Guides](/ui-kit/android/guide-overview) | 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: ```xml fragment_calls.xml lines theme={null} ``` Handle call log item clicks to navigate to the details screen: ```kotlin CallsFragment.kt lines theme={null} // CallsFragment.kt val callLogs = view.findViewById(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 lines theme={null} // 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 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 } ``` ```java HomeActivity.java lines 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; }); ``` ### 3. Configure `CallDetailsActivity` Initialize the detail screen with tabs for metadata, participants, history, and recordings. ```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() // Optionally use UI Kit widget directly: // val details = CometChatCallLogDetails(this) // details.setCall(callLog) // setContentView(details) } ``` ```java CallDetailsActivity.java lines theme={null} // 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 lines theme={null} val detailsView = CometChatCallLogDetails(this) detailsView.setCall(callLog) setContentView(detailsView) ``` ```java lines 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` 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()` | Explore this feature in the CometChat SampleApp: [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-java) Explore this feature in the CometChat SampleApp: [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-kotlin)