Call Logs - CometChat Docs

Overview

CometChatCallLogs is a Component that shows the list of Call Logs available. By default, names are shown for all listed users, along with their avatars if available.

Usage

Integration

CometChatCallLogs being a wrapper component, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application. Since CometChatCallLogs can be launched by adding the following code snippet to the XML layout file.

<com.cometchat.chatuikit.calls.calllogs.CometChatCallLogs
    android:id="@+id/call_log"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

If you’re defining the CometChatCallLogs within the XML code or in your activity or fragment then you’ll need to extract them and set them on the User object using the appropriate method.

CometChatCallLogs cometchatCallLogs = binding.callLog; // 'binding' is a view binding instance. Initialize it with `binding = YourXmlFileNameBinding.inflate(getLayoutInflater());` to use views like `binding.callLog` after enabling view binding.

Activity and Fragment

You can integrate CometChatCallLogs into your Activity and Fragment by adding the following code snippets into the respective classes.

YourActivity.java

CometChatCallLogs cometchatCallLogs;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    cometchatCallLogs = new CometChatCallLogs(this);

    setContentView(cometchatCallLogs);
}

Actions

Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

setOnItemClick

Function invoked when a call log item is clicked, typically used to open a detailed chat screen.

YourActivity.java

cometchatCallLogs.setOnItemClick((view1, position, callLog) -> {
            
    });

setOnItemLongClick

Function executed when a callLog item is long-pressed, allowing additional actions like delete or select.

YourActivity.java

cometchatCallLogs.setOnItemLongClick((view1, position, callLog) -> {

    });

setOnBackPressListener

OnBackPressListener is triggered when you press the back button in the app bar. It has a predefined behavior; when clicked, it navigates to the previous activity. However, you can override this action using the following code snippet.

YourActivity.java

cometchatCallLogs.setOnBackPressListener(() -> {
            
    });

OnError

This action doesn’t change the behavior of the component but rather listens for any errors that occur in the callLogs component.

YourActivity.java

cometchatCallLogs.setOnError(cometchatException -> {

    });

setOnLoad

Invoked when the list is successfully fetched and loaded, helping track component readiness.

YourActivity.java

cometchatCallLogs.setOnLoad(list -> {

});

setOnEmpty

Called when the list is empty, enabling custom handling such as showing a placeholder message.

YourActivity.java

cometchatCallLogs.setOnEmpty(() -> {
            
    });

Filters

Filters allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.

1. CallLogRequestBuilder

The CallLogRequestBuilder enables you to filter and customize the call list based on available parameters in CallLogRequestBuilder. This feature allows you to create more specific and targeted queries during the call. The following are the parameters available in CallLogRequestBuilder Example In the example below, we are applying a filter based on the limit and have a call recording.

CallLogRequest.CallLogRequestBuilder callLogRequestBuilder = new CallLogRequest.CallLogRequestBuilder()
        .setLimit(20)
        .setHasRecording(true);

cometchatCallLogs.setCallLogRequestBuilder(callLogRequestBuilder);

Property	Description	Code
Limit	Sets the limit for the call logs request	`.setLimit(int limit)`
Call Type	Sets the call type for the call logs request	`.setCallType(String callType)`
Call Status	Sets the call status for the call logs request	`.setCallStatus(String callStatus)`
Has Recording	Sets the recording status for the call logs request	`.setHasRecording(boolean hasRecording)`
Call Direction	Sets the call direction for the call logs request	`.setCallDirection(String callDirection)`
UID	Sets the user ID for the call logs request	`.setUid(String uid)`
GUID	Sets the group ID for the call logs request	`.setGuid(String guid)`
Call Category	Sets the call category for the call logs request	`.setCallCategory(String callCategory)`
Auth Token	Sets the auth token for the call logs request	`.setAuthToken(String authToken)`

Events

Events are emitted by a Component. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The CometChatCallLogs component does not have any exposed events.

Customization

To fit your app’s design requirements, you can customize the appearance of the CallLog component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

Style

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.

themes.xml

     <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
        <item name="cometchatAvatarStrokeRadius">8dp</item>
        <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
    </style>

    <style name="CustomCallLogStyle" parent="CometChatCallLogsStyle">
        <item name="cometchatCallLogsSeparatorColor">#F76808</item>
        <item name="cometchatCallLogsTitleTextColor">#F76808</item>
        <item name="cometchatCallLogsAvatarStyle">@style/CustomAvatarStyle</item>
    </style>

cometchatCallLogs.setStyle(R.style.CustomCallLogStyle);

To know more such attributes, visit the attributes file.

Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

Methods	Description	Code
setBackIconVisibility	Used to toggle visibility for back button in the app bar	`.setBackIconVisibility(View.VISIBLE);`
setToolbarVisibility	Used to toggle visibility for back button in the app bar	`.setToolbarVisibility(View.GONE);`
setLoadingStateVisibility	Used to hide loading state while fetching Users	`.setLoadingStateVisibility(View.GONE);`
setErrorStateVisibility	Used to hide error state on fetching conversations	`.setErrorStateVisibility(View.GONE);`
setEmptyStateVisibility	Used to hide empty state on fetching conversations	`.setEmptyStateVisibility(View.GONE);`
setSeparatorVisibility	Used to control visibility of Separators in the list view	`.setSeparatorVisibility(View.GONE);`

Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

setOptions

Defines the available actions users can perform on a call log entry, such as deleting, marking as spam, or calling back. Use Cases:

Provide quick call-back options.
Allow users to block a number.
Enable deleting multiple call logs.

cometchatConversations.setOptions((context, conversation) -> Collections.emptyList());

addOptions

Adds custom actions to the existing call log options. Use Cases:

Add favorite/star call log option.
Integrate a “Send Message” option.
Provide an archive feature.

cometchatConversations.addOptions((context, conversation) -> Collections.emptyList());

setDateTimeFormatter

By providing a custom implementation of the DateTimeFormatterCallback, you can configure how time and date values are displayed. This ensures consistent formatting for labels such as “Today”, “Yesterday”, “X minutes ago”, and more. Each method in the interface corresponds to a specific case: time(long timestamp) → Custom full timestamp format today(long timestamp) → Called when a message is from today yesterday(long timestamp) → Called for yesterday’s messages lastWeek(long timestamp) → Messages from the past week otherDays(long timestamp) → Older messages minute(long timestamp) / hour(long timestamp) → Exact time unit minutes(long diffInMinutesFromNow, long timestamp) → e.g., “5 minutes ago” hours(long diffInHourFromNow, long timestamp) → e.g., “2 hours ago”

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;


cometchatCallLogs.setDateTimeFormatter(new DateTimeFormatterCallback() {

        private final SimpleDateFormat fullTimeFormatter = new SimpleDateFormat("hh:mm a", Locale.getDefault());
        private final SimpleDateFormat dateFormatter = new SimpleDateFormat("dd MMM yyyy", Locale.getDefault());

        @Override
        public String time(long timestamp) {
            return fullTimeFormatter.format(new Date(timestamp));
        }

        @Override
        public String today(long timestamp) {
            return "Today";
        }

        @Override
        public String yesterday(long timestamp) {
            return "Yesterday";
        }

        @Override
        public String lastWeek(long timestamp) {
            return "Last Week";
        }

        @Override
        public String otherDays(long timestamp) {
            return dateFormatter.format(new Date(timestamp));
        }

        @Override
        public String minutes(long diffInMinutesFromNow, long timestamp) {
            return diffInMinutesFromNow + " mins ago";
        }

        @Override
        public String hours(long diffInHourFromNow, long timestamp) {
            return diffInHourFromNow + " hrs ago";
        }
    });

setLoadingView

Allows setting a custom loading view when fetching call logs. Use Cases:

Display a spinner animation while loading.
Show a “Fetching Call History…” message.
Use a shimmer effect for better UI experience.

cometchatConversations.setLoadingView(R.layout.your_loading_view);

setEmptyView

Defines a custom view when no call logs are available. Use Cases:

Show a friendly message like “No calls yet!”.
Offer quick actions like “Make a Call”.
Display an illustration/image.

cometchatConversations.setEmptyView(R.layout.your_empty_view);

setErrorView

Allows setting a custom error state view when fetching call logs fails. Use Cases:

Display a retry button.
Show a network issue message.
Provide a troubleshooting guide.

cometchatConversations.setErrorView(R.layout.your_empty_view);

setItemView

Allows setting a custom layout for each call log item. Use Cases:

Customize the entire call log card.
Display additional contact details.
Use a two-column design for better readability.

        cometChatCallLog.setItemView(new CallLogsViewHolderListener() {
            @Override
            public View createView(Context context, CometchatCallLogsItemsBinding listItem) {
                return super.createView(context, listItem);
            }

            @Override
            public void bindView(Context context,
                                 View createdView,
                                 CallLog call,
                                 RecyclerView.ViewHolder holder,
                                 List<CallLog> callList,
                                 int position) {

                super.bindView(context, createdView, call, holder, callList, position);
            }
        });

call_log_list_item.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="wrap_content"
    android:orientation="horizontal">

    <com.cometchat.chatuikit.shared.views.cometchatavatar.CometChatAvatar
        android:id="@+id/avatar"
        android:layout_width="@dimen/cometchat_48dp"
        android:layout_height="@dimen/cometchat_48dp" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/cometchat_margin_3"
        android:layout_marginEnd="@dimen/cometchat_margin_3"
        android:gravity="center_vertical"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1" />

        <TextView
            android:id="@+id/tv_subtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?attr/cometchatTextAppearanceBodyRegular"
            android:textColor="?attr/cometchatTextColorSecondary" />

    </LinearLayout>

    <Space
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <TextView
        android:id="@+id/tv_date_call_log"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="afafwaa" />
</LinearLayout>

        cometChatCallLog.setItemView(new CallLogsViewHolderListener() {
            @Override
            public View createView(Context context, CometchatCallLogsItemsBinding listItem) {
                return LayoutInflater.from(context).inflate(R.layout.call_log_list_item, null);
            }

            @Override
            public void bindView(Context context,
                                 View createdView,
                                 CallLog call,
                                 RecyclerView.ViewHolder holder,
                                 List<CallLog> callList,
                                 int position) {
                CometChatAvatar avatar = view.findViewById(R.id.avatar);
                TextView name = view.findViewById(R.id.tv_title);
                TextView subTitle = view.findViewById(R.id.tv_subtitle);
                TextView date = view.findViewById(R.id.tv_date_call_log);

                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT
                );

                view.setLayoutParams(layoutParams);
                CallUser callUser = (CallUser) call.getInitiator();
                CallUser callUser1 = (CallUser) call.getReceiver();
                boolean isInitiator = callUser.getUid().equals(CometChat.getLoggedInUser().getUid());
                date.setText(new SimpleDateFormat("dd MMM, hh:mm a").format(call.getInitiatedAt() * 1000));
                if (call.getStatus().equals(CometChatCallsConstants.CALL_STATUS_UNANSWERED) || call
                    .getStatus()
                    .equals(CometChatCallsConstants.CALL_STATUS_MISSED)) {
                    avatar.setAvatar(ResourcesCompat.getDrawable(getResources(), R.drawable.ic_missed_call, null));
                    subTitle.setText("Missed Call");
                } else {
                    if (isInitiator) {
                        avatar.setAvatar(ResourcesCompat.getDrawable(getResources(), R.drawable.ic_outgoing_call, null));
                        subTitle.setText("Outgoing Call");
                        name.setText(callUser1.getName());
                    } else {
                        avatar.setAvatar(ResourcesCompat.getDrawable(getResources(), R.drawable.ic_incoming_call, null));
                        subTitle.setText("Incoming Call");
                        name.setText(callUser.getName());
                    }
                }
            }
        });

setTitleView

Allows setting a custom title view, typically used for the caller’s name or number. Use Cases:

Display caller’s full name.
Show a business label for saved contacts.
Use bold text for unknown numbers.

        cometChatCallLog.setTitleView(new CallLogsViewHolderListener() {
            @Override
            public View createView(Context context, CometchatCallLogsItemsBinding listItem) {
                return super.createView(context, listItem);
            }

            @Override
            public void bindView(Context context,
                                 View createdView,
                                 CallLog call,
                                 RecyclerView.ViewHolder holder,
                                 List<CallLog> callList,
                                 int position) {
                
                super.bindView(context, createdView, call, holder, callList, position);
            }
        });

Example

YourActivity.java

        cometChatcallLog.setTitleView(new CallLogsViewHolderListener() {
            @Override
            public View createView(Context context, CometchatCallLogsItemsBinding listItem) {
                return new TextView(context);
            }

            @Override
            public void bindView(Context context,
                                 View createdView,
                                 CallLog callLog,
                                 RecyclerView.ViewHolder holder,
                                 List<CallLog> callList,
                                 int position) {

                TextView textView = (TextView) createdView;
                textView.setTextAppearance(CometChatTheme.getTextAppearanceHeading4Regular(context));
                textView.setTextColor(CometChatTheme.getTextColorPrimary(context));
                CallUtils.getCallLogUserName(callLog);
                if (callLog.getTotalDurationInMinutes() > 0) {
                    String duration = String.valueOf(callLog.getTotalDurationInMinutes());
                    textView.setText(CallUtils.getCallLogUserName(callLog) + " • \uD83D\uDD5A\uFE0F " + duration
                        .substring(0, duration.length() > 4 ? 4 : 3) + " mins");
                } else textView.setText(CallUtils.getCallLogUserName(callLog));
            }
        });

setLeadingView

Customizes the leading view, usually the caller’s avatar or profile picture. Use Cases:

Display a profile picture.
Show a call type icon (missed, received, dialed).
Indicate call status (e.g., missed calls in red).

        cometChatCallLog.setLeadingView(new CallLogsViewHolderListener() {
            @Override
            public View createView(Context context, CometchatCallLogsItemsBinding listItem) {
                return super.createView(context, listItem);
            }

            @Override
            public void bindView(Context context,
                                 View createdView,
                                 CallLog call,
                                 RecyclerView.ViewHolder holder,
                                 List<CallLog> callList,
                                 int position) {
                
                super.bindView(context, createdView, call, holder, callList, position);
            }
        });

Example

YourActivity.java

cometChatcallLog.setLeadingView(new CallLogsViewHolderListener() {
            @Override
            public View createView(Context context, CometchatCallLogsItemsBinding listItem) {
                return new CometChatAvatar(context);
            }

            @Override
            public void bindView(Context context,
                                 View createdView,
                                 CallLog callLog,
                                 RecyclerView.ViewHolder holder,
                                 List<CallLog> callList,
                                 int position) {
                CometChatAvatar avatar = (CometChatAvatar) createdView;

                if (callLog.getInitiator() instanceof CallUser) {
                    CallUser initiator = (CallUser) callLog.getInitiator();
                    boolean isLoggedInUser = CallUtils.isLoggedInUser(initiator);
                    boolean isMissedOrUnanswered = callLog.getStatus().equals(CometChatCallsConstants.CALL_STATUS_UNANSWERED) || callLog
                        .getStatus()
                        .equals(CometChatCallsConstants.CALL_STATUS_MISSED);

                    if (callLog.getType().equals(CometChatCallsConstants.CALL_TYPE_AUDIO) || callLog
                        .getType()
                        .equals(CometChatCallsConstants.CALL_TYPE_VIDEO) || callLog.getType().equals(CometChatCallsConstants.CALL_TYPE_AUDIO_VIDEO)) {

                        if (isLoggedInUser) {
                            avatar.setAvatar(ResourcesCompat.getDrawable(context.getResources(), R.drawable.outgoing_voice_call, null));
                        } else if (isMissedOrUnanswered) {
                            avatar.setAvatar(ResourcesCompat.getDrawable(context.getResources(), R.drawable.miss_call, null));

                        } else {
                            avatar.setAvatar(ResourcesCompat.getDrawable(context.getResources(), R.drawable.incoming_voice_call, null));
                        }
                    }
                }
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                    Utils.convertDpToPx(context, 50),
                    Utils.convertDpToPx(context, 50)
                );
                avatar.setLayoutParams(layoutParams);
            }
        });

setSubtitleView

Enables customizing the subtitle view, usually used for additional call details. Use Cases:

Display call type (Missed, Received, Outgoing).
Show network strength indicators.
Include call duration in a more readable format.

        cometChatCallLog.setSubtitleView(new CallLogsViewHolderListener() {
            @Override
            public View createView(Context context, CometchatCallLogsItemsBinding listItem) {
                return super.createView(context, listItem);
            }

            @Override
            public void bindView(Context context,
                                 View createdView,
                                 CallLog call,
                                 RecyclerView.ViewHolder holder,
                                 List<CallLog> callList,
                                 int position) {
                
                super.bindView(context, createdView, call, holder, callList, position);
            }
        });

Example

You can create and return a view from setSubtitleView which will be loaded in call log item.

YourActivity.java

        cometChatCallLog.setSubtitleView(new CallLogsViewHolderListener() {
            @Override
            public View createView(Context context, CometchatCallLogsItemsBinding listItem) {
                return new TextView(context);
            }

            @Override
            public void bindView(Context context,
                                 View createdView,
                                 CallLog callLog,
                                 RecyclerView.ViewHolder holder,
                                 List<CallLog> callList,
                                 int position) {
                TextView textView = (TextView) createdView;
                CallUser callUser = (CallUser) callLog.getInitiator();
                boolean isInitiator = callUser.getUid().equals(CometChat.getLoggedInUser().getUid());
                if (callLog.getStatus().equals(CometChatCallsConstants.CALL_STATUS_UNANSWERED) || callLog
                    .getStatus()
                    .equals(CometChatCallsConstants.CALL_STATUS_MISSED)) {
                    textView.setText("Missed Call");
                } else {
                    if (isInitiator) {
                        textView.setText("Outgoing Call");
                    } else {
                        textView.setText("Incoming Call");
                    }
                }
            }
        });

setTrailingView

Customizes the trailing section, typically for call duration or actions. Use Cases:

Display call duration.
Add a “Call Again” button.
Show call timestamps.

        cometChatCallLog.setTrailingView(new CallLogsViewHolderListener() {
            @Override
            public View createView(Context context, CometchatCallLogsItemsBinding listItem) {
                return super.createView(context, listItem);
            }

            @Override
            public void bindView(Context context,
                                 View createdView,
                                 CallLog call,
                                 RecyclerView.ViewHolder holder,
                                 List<CallLog> callList,
                                 int position) {

                super.bindView(context, createdView, call, holder, callList, position);
            }
        });

Example

You can create and return a view from setTail which will be loaded in call log item.

YourActivity.java

        cometChatcallLog.setTrailingView(new CallLogsViewHolderListener() {
            @Override
            public View createView(Context context, CometchatCallLogsItemsBinding listItem) {
                return new TextView(context);
            }

            @Override
            public void bindView(Context context,
                                 View createdView,
                                 CallLog callLog,
                                 RecyclerView.ViewHolder holder,
                                 List<CallLog> callList,
                                 int position) {
                TextView textView = (TextView) createdView;
                textView.setText(new SimpleDateFormat("dd MMM, hh:mm a").format(callLog.getInitiatedAt() * 1000));
            }
        });

​Overview

​Usage

​Integration

Activity and Fragment

​Actions

setOnItemClick

setOnItemLongClick

setOnBackPressListener

OnError

setOnLoad

setOnEmpty

​Filters

1. CallLogRequestBuilder

​Events

​Customization

​Style

​Functionality

​Advanced

​setOptions

​addOptions

​setDateTimeFormatter

​setLoadingView

​setEmptyView

​setErrorView

​setItemView

​setTitleView

​setLeadingView

​setSubtitleView

​setTrailingView

Overview

Usage

Integration

Actions

Filters

Events

Customization

Style

Functionality

Advanced

setOptions

addOptions

setDateTimeFormatter

setLoadingView

setEmptyView

setErrorView

setItemView

setTitleView

setLeadingView

setSubtitleView

setTrailingView