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.
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
2. Load CallsFragment
in HomeActivity
Display the Calls tab via bottom navigation.
HomeActivity.java
3. Configure CallDetailsActivity
Initialize the detail screen with tabs for metadata, participants, history, and recordings.
CallDetailsActivity.java
4. Implement CometChatCallLogDetails
Component
Use the UI Kit widget for an all-in-one detail view.
Implementation Flow
- CallsFragment fetches and displays call logs list.
- User taps a call → HomeActivity navigates to CallDetailsActivity with call data.
- CallDetailsActivity initializes ViewModel, ViewPager2, and TabLayout.
- Tab fragments render participants, join/leave history, and recordings.
- 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>
inCallDetailsViewModel
to show retry UIs. - Use
detailsView.setOnError()
andsetOnEmpty()
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